电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: CSS综合 [打印本页]

作者: look_w 时间: 2019-2-19 17:15 标题: CSS综合

说一说你平时写代码遵守的编码规范
1. 语义化

语义化标签优先
基于功能命名、基于内容命名、基于表现命名
简略、明了、无后患

2. CSS规范

tab 用两个空格表示
css的 :后加个空格， {前加个空格
每条声明后都加上分号
换行，而不是放到一行
颜色用小写，用缩写, #fff
小数不用写前缀, 0.5s -> .5s；0不用加单位
尽量缩写， margin: 5px 10px 5px 10px -> margin: 5px 10px
相关的属性声明应当归为一组，并按照positioning,Box model,Typographic,visual顺序

垂直居中有几种实现方式，给出代码范例

设置上下padding相等

.ct {
   padding: 40px 0;
   text-align: center;
   background: #eee;
}

绝对定位实现垂直居中

.dialog {
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -200px;
   margin-top: -150px; /*transform: translate(-50%,-50%);*/
   width: 400px;
   height: 300px;
   box-shadow: 0px 0px 3px #000;
}

vertical-align实现居中
JS bin
table-cell实现居中

.box{
   width:500px;
   height: 300px;
   border: 1px solid;
   display: table-cell;
   vertical-align: middle;
   text-align: center;

}

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)