任务十三 css综合

本文版权归饥人谷和本人所有
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不影响布局则这种方式非常方便快捷

四个垂直居中demo

用css画小三角形，模拟对话框：
http://js.jirengu.com/zulihivala/1/edit?html,css,output