CSS相关

所有子元素浮动，父类加上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，这样在它自己的盒子中看上去就是居中的了。