所有子元素浮动，父类加上class='clearfix'
开发者工具 computed 网页计算出样式的像素大小
div高度由其内部文档流元素的高度总和所决定（决定≠相等）
文档流：文档内元素的流动方向。
内联元素从左往右，如果受到阻碍，换行继续流
块级元素，每一个块级元素各占一行，从上往下流。
break属性： word-break:break all (全部被打断，建议页面是中文时使用)
字体不同，字体的建议行高不同
脱离文档流：posttion:fixed;（相对于屏幕左上角）
span：不接受设置宽高；
内联元素 不接受宽高
尽量不要设置宽高 用padding
css三角形 运用边框
border:width:0px, height:0px.
border-top-width:三角形中心到顶部的距离
三角形：设置4个透明的边框 把上面的三角形干掉（三角形中心到顶部距离为0） 左边的三角形给一个颜色 就会有一个直角三角形
span里面不能放div 放了会bug，所以放span。
span{display:block}==div
脱离文档流：子元素CSS:position：absolute; 父元素CSS： position:relative; 且absolute相对于relative定位。
css-tricks.com 用css画各种图形
水平居中
1、块级元素
如果一个块级元素被人为设置了宽度，即它的宽度已经确定，那么就可以给它添加以下 CSS 使其在所在行居中显示。
margin-left:auto;
margin-right:auto;
这种方法只适合于确定了宽度的块级元素，虽然不建议为一个元素设置宽高，但是我们可以给它设置一个最大宽度，这样以上的居中方法也是有效的。
如果实在无法确定块级元素的宽度，可以用display: inline-block;进行转换，然后用内联元素的居中方法将其水平居中
2、内联元素
内联元素通常都出现在块级元素中，只需给父元素添加text-align: center;即可使其居中显示。如果它没有父元素，给它外面套一个就好了。
注：text-align: center;只对子代的内联元素有效，对块级元素是无效的。
对于单一的内联元素，因为其宽度就是文字的长度，可以给它添加左右相同大小的 padding，这样在它自己的盒子中看上去就是居中的了。
