编码规范、居中

编码规范

  • class 名称中只能出现小写字符和破折号(dashe)(不是下划线,也不是驼峰命名法)。
  • 使用有意义的名称。使用有组织的或目的明确的名称,不要使用表现形式(presentational)的名称。如:
推荐:<div class="text-lesser"></div>
不推荐: <div class="light-grey"></div>
  • 标签语义化
<article>
  <h1>编码规范</h1>
  <p>今天讲的内容是编码规范,讲师
     <b>若愚</b> @饥人谷</p>
</article>
  • 用两个空格来代替制表符(tab)。
  • 为选择器分组时,将单独的选择器单独放在一行。
  • 为了代码的易读性,在每个声明块的左花括号前添加一个空格。声明块的右花括号应当单独成行。
  • 每条声明语句的 : 后应该插入一个空格。
  • 参考:
  • bootstrap 编码规范
  • google html css编码规范
  • 命名这货真难

居中

  1. 上下padding相等:
.ct {
      padding: 40px 0;
      text-align: center;
      background: #eee;
      border: 1px solid red;
}

http://js.jirengu.com/xiyetevone/1/edit

  1. 绝对定位的元素居中:
position: absolute;
  left: 50%;
  top: 50%;
  /* margin-left: -200px;
  margin-top: -150px; 当宽度和高度固定的时候宽度和高度的一半*/
  transform: translate(-50%,-50%);
  width: 400px;
  height: 300px;

http://js.jirengu.com/waquyokaci/1/edit

  1. 表格法实现居中:display: table-cell;
display: table-cell;
  vertical-align: middle;

http://js.jirengu.com/nape/1/edit?html,css,output

  1. 行内元素居中: vertical-align: middle;
    http://js.jirengu.com/vetutacuwo/1/edit

分别使用一个html 标签来实现 这三个效果

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的。 ...
    青鸣阅读 331评论 0 1
  • 命名技巧 语义化语义化标签优先基于功能命名、基于内容命名、基于表现命名简略、明了、无后患tips: 大声叫出它的名...
    yytyff阅读 792评论 0 0
  • 1、 前端编码规范 HTML书写规范 所有编码均遵循xhtml标准, 标签 & 属性 & 属性命名 必须由小写字母...
    李博洋li阅读 349评论 0 0
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,388评论 25 708
  • 闺密戴着一块硕大的玉上班了,久久没有笑容的脸也变得柔和亲切起来。 她说,这是老公去新疆出差买回来的,原价8000多...
    生活涵如是阅读 633评论 0 2