CSS总结
一、margin、width
1、width:auto:
（1）、相对inline元素，会根据元素内容宽度设定
（2）、相对block元素，会根据外层元素设定宽度
（3）、该宽度为窗口宽度去除margin-left或margin-right宽度的宽度
2、width:100%
（1）、默认显示整行
（2）、如有margin宽度，则该宽度为窗口宽度与margin宽度之和，有可能出现滚动条
二、块元素和内联元素
块元素为block，内联元素为inline。
元素设置float属性后默认转换为块元素，也可通过display:inline将其转换为块元素。
1、块元素前后默认加上换行，可设置宽度。
块元素包括：form,div,p,table,ol等。
2、内联元素默认位置接上一个元素，内联元素宽度可自动根据内容改变。
内联元素包括：font,a,br,li,input,select,radio等。
关于input等作为内联元素可设置宽度问题：有些浏览器input元素为inline-block元素。为内联块元素，该种元素在外部表现为内联元素，在内部表现为块元素。
三、display:none和visability:hide
前者设置框的类型为移除，不占用浮动位置。后者设置为不可见，仍占用位置。
四、display、float、Position的相互作用
如果display为none，则float，Position不起作用。
如果float不为none，display不为none，则display不起作用，元素变为block。
五、图片img上加提示，添加title属性
<img title="收起" src="" />
六、叠加外边距
p{margin-top:10px;margin-bottom:20px;}
上下两个p元素的距离为20px。水平外边据不叠加。
七、盒子理论
1、盒子（元素）没有设定宽度，则默认为auto，与外层容器宽度相同。如果设定了边框，内外边距，则盒子内容宽度会缩短。
2、盒子（元素）设定宽度，则该宽度为内容宽度。如果设定了边框，内外边距，则盒子内容宽度不变，盒子整体宽度变长。
八、Float与Clear
1、元素设置Float：left后，会跳出于常规文档流中，跳出于当前父容器，如宽度允许后面的元素会自动补上。
2、解决办法
（1）父容器设置:float:left;width:100%;
紧跟父容器的元素设置：clear:both，清楚左右浮动
（2）父容器设置css样式
.clearfix:after{
content:'.';
display:block;
height:0;
visibility:hidden;
clear:both;
}
九、Position
（1）static：静态，默认位于常规文档流中，自动堆叠。
（2）relative：相对位置，不彻底跳出原来文档流位置。相对于原来文档流中位置，top或left偏移多少。原来位置保留，没有其他元素补充。
（3）absolute：绝对位置，彻底跳出于文档流。相对于body上下文，top或left偏移多少。原来位置被其他元素占据。
（4）fixed：固定位置，彻底跳出于文档流。相对于当前浏览器窗口，top或left偏移多少。原来位置被其他元素占据。
十、背景
（1）前景色：包括文本，边框等。
（2）背景色：分两层，最底层为background-color,上一层为background-image
background-image 设置背景图片
background-repeat 设置背景图重复
默认repeat。
四个关键字：repeat,repeat-x,repeat-y,no-repeat.
background-position 设置背景图位置
关键字设置位置，百分比设置位置，绝对数值设定位置。
关键字与百分比设定的位置为图片该位置与元素该位置。
绝对数值设定位置为图片左上角位置与元素该位置。
background-attachment 设置背景图黏着
默认scroll
关键字：scroll 背景图片随着滚动条移动，fixed背景图片不会随着滚动条移动，inherit 继承。
background-size 设置背景图大小（CSS3）
cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
percentage:以父元素的百分比来设置背景图像的宽度和高度。
length:设置背景图像的高度和宽度。
background-color 设置背景颜色