一，正交原则
html结构
目前总体的css选择器
css样式
二，内联元素居中
内联元素通过文字对齐方式居中 ，就可以达到居中，方法：设置父级的text-align:center，并且可以继承
三，内联元素设置宽高无效
四，坚决不要写死高度（除非是图片，图片可以写死高度）
能么达到设计稿的高度呢？
使用行高+padding来撑高
若设计稿height=24px
那么我们先在google调试窗口删除height,查看剩下的字体高度，如果为16px
那么我们怎么设置高度呢？
line-height:16px;
padding:4px 0;
现在的整体高度就是24px了
例子：
五，设置字体颜色
继承祖先的字体颜色
color:inherit
六，解决父元素与子元素之间的折叠现象
下面只给子元素div设置了一个margin-top
现象是整个父元素div 向下移动了
例子
如果父元素有一些属性：
- 浮动
- 绝对定位
- overflow不为visible
- display:inline-block
- border
- padding-top:1px
//padding-top:1px
如果子容器到父容器的顶部的距离为70px
那么给子容器设置margin-top:70px,出现这个margin-top超出父容器，此时为父容器设置padding-top: 1px，父容器成为超级div
优化：
父容器设置：padding-top:30px;
子容器设置：margin-top:40px;
原理：
把父容器设置成了一个BFC,
什么是BFC呢？
父容器div成了一个超级div
它不允许它的子元素超出它的边界
七，兄弟元素之间的折叠
一般不需要避免
给每个兄弟元素设置：display:inline-block; width:100%
就可以了
如果给每个兄弟元素给设置display:inline-block，每个兄弟就形成了BFC,那么兄弟之间的margin，padding不会折叠
八，豆腐块之间的距离
不同豆腐块之间的距离尽量写在上面的元素上，这样即使下面的元素换了，也能达到同样的隔开效果
只有当设计稿明确规定豆腐块之间的距离是下面区域的，那么，我们在下面一个豆腐块的上面设置 ，margin-top
九，盒模型显示出来的真正高度
盒模型里面正真的高度=padding+height
我们设置的height:30px指的是内容的高度
十，固定高度
某些模块我们是希望它的高度固定，不希望它变来变去
比如横幅(banner)
我们就固定它的高度，但是要根据盒模型计算准确
十一：我们要设置一个文字的高度
不要使用height给文字设置高度，使用line-height设置文字整体行高！！！
十二：
浮动元素的宽度：由它的内容里面有宽度的元素决定，那么没有设置宽度的元素的宽度自适应父容器（浮动元素）的宽度
十三：块元素居中
固定宽度:通过它里面的各个元素宽度和计算得来
margin:0 auto
