层叠样式表（英语：Cascading Style Sheets，缩写：CSS；又称串样式列表、级联样式表、串接样式表、阶层式样式表）。
层叠指什么？
- 样式层叠 可以多次对同一选择器进行样式声明。
- 选择器层叠 可以用不同选择器对同一个元素进行样式声明。
- 文件层叠 可以用多个文件进行层叠。
如何知道那些浏览器支持CSS样式？
- 所有浏览器跑一边。
- 使用caniuse.com
CSS语法样式
选择器{
属性名：属性值;
/*注释*/
}
at语法
@charset "UTF-8";
@import url(2.css);
@media (min-width:100px)and(max-width:200px){
语法一}
文档流（Normal Flow）——文档中元素的流动方向
方向
inline元素从左到右，达到最右边才会换行、
block元素从上到下，每一个都另一行
inline-block也是从左到右
宽度
inline宽度为内部inline元素的和，不弄用width指定
block默认自动计算宽度，可以用width指定
inline-block结合以上两种特点，可以使用width指定。
高度
inline的高度由line-height间接确定，跟height无关
block高度由内部文档流元素决定,可以设置height
inline-block和block类似，可以设置height
overflow的四种样式
- hidden 超出不分消失不可见
- scroll 滚动，但是滚动条一直都在
- auto 自动设置
- visible 直接显示
脱离文档流
第一种:position:absolute
第二种:float:left
第三种:fixed
盒模型
content box
border box
两种盒模型的区别：
- content-box 内容盒-内容就是盒子的边界
- border-box 边框盒-边框是盒子的边界
content-box width = 内容宽度
border-box width = 内容宽度+padding+border
margin合并
child1与child2上下外边框合并。
如何不让两个margin合并？
width:100%;
display:inline-block;
多个子元素时，第一个子元素与最后一个子元素会和父元素发生外边距合并，只有上下方向存在，左右方向不存在
如何取消margin合并？
加入 border-top:10px solid black;或者padding-top:10px或者overflow:hidden
