本文版权归饥人谷和本人所有
1.编码规范:
(1).合理命名
- 使用语义化标签,
- 基于功能命名、基于内容命名、基于表现命名,命名应该体现功能,不涉及表现样式(颜色、字体、边框、背景等)
- 简略、明了、无后患
(2) 标签命名不使用驼峰,使用-代替_
(3) tab用2个空格
(4) 尽量少的使用id
(5) css属性换行,而不是放到一行
(6) 小数不用写前缀, 0.5s -> .5s;0不用加单位
(7) 不追求多属性赋值的简写,以免引起代码混乱
(8) 为选择器中的属性添加双引号,例如,input[type="text"]
(9) 选择器要尽可能短,并且尽量限制组成选择器的元素个数,建议不要超过 3
参考文章:
http://codeguide.bootcss.com/
2.垂直居中的四种方法
一.调整padding,使上下padding相等
二.绝对定位加负margin
注意点:
1.当设置宽度和高度为百分比时,是用父元素内容的宽度和高度乘以该百分比
2.当子元素的宽高固定时,可直接用负margin
3.当子元素的宽高不固定时,可用transform: translate(-50%,-50%) 这里的50%是相对于内容本身的宽高。
三.vertical-align伪元素居中
利用vertical-align:middle
先设置一个伪元素,使其高度与父元素高度一致(即100%),再对其设置vertical-align:middle ,此处要注意要将该伪元素设置display:inline-block
因为行内元素无法设置宽高,而块级元素无法应用vertical-align:middle
再设置需要垂直居中对齐的元素 :vertical-align:middle
四. table-cell布局
利用表格布局的特性。如果display:table-cell
不影响布局则这种方式非常方便快捷
用css画小三角形,模拟对话框:
http://js.jirengu.com/zulihivala/1/edit?html,css,output