container容器 流（stream）：相当于一样东西往同一个方向流动向水流车流人流 文档流：多个元素有序排列着（向上往下从左往右），也叫元素流
- 文档流中元素特点：依次紧密排列着，中间不能出现太大空白。流中的元素不能出现叠落现象（就是两个元素叠放在一起），如果需要使用叠落就得脱离文档流： 脱离文档流方法： 1.浮动float（只能往左右飘不能往上下飘）
2.相对定位
3.绝对定位
4.固定定位
一，浮动-难点
float：left；左浮动 float：right右浮动
布局效果：1.浮动元素不在占用页面的布局空间-后面的元素自动补位，从而出现叠落现象
2.元素只要脱离文档流，不管之前是什么元素，都会自动变成行内块元素（就可以指定宽和高）
3.多个元素都往左浮动最先浮动的就会在最左边，后面浮动的会依次向左排列，相反多个元素都往右浮动最先浮动的就会在最右边，后面浮动的会依次向右排列。
4.一个父元素体内的子元素全部浮动，该父元素会发生“高度塌陷”（就是没有高度了）
高度塌陷解决：1.在父元素后新增一个空白子元素(必须块级元素)，在元素内使用{clear：both}
2.父元素体内最后生成一个空白子元素，显示模式为块级元素，并解决高度塌陷
:after{
conter:'';在容器体内的元素最后生成新的子(空)元素
display:block;显示模式为块元素
clear:both解决高度塌陷
}
5.浮动元素不能压住下面的行内元素
6.行内元素文本水平居中要用text-align：center
二.定位
css中使用position属性来控制元素在页面中的位置，它的可取值：
1.position：static；默认值，元素是静态定位的。当前元素处于文档流中，只能依次排布，不能随意改变位置,不会出现叠落现象。
2.相对定位（position：reative）：脱离文档流，使用上下左右修改位置，定位参照物：自己作为静态定位元素时的位置。相对定位元素可以叠落在其它元素上方，虽然移走但不释放布局空间。
用途1：微调自己的位置，而不影响周围的元素 用途2：为绝对定位的子孙元素提供定位参照物
3.position-absolute；绝对定位。绝对定位的元素会脱离文档流使用上下左右修改位置 绝对定位元素的定位参照物是：离自己最近的已定位的父元素，如果父元素都没有定位，最终会找到body，绝对定位元素可以叠落在其它元素上方，释放布局空间显示模式会变成行内块元素
4.半透名的遮罩父元素相对子元素绝对 子元素上下左右都为0
5.绝对定位造成高度塌陷只能给父元素设置高度
6.z-index: 8; 可以让已定位的子元素设置显示优先级
7.超链接不会继承父元素的字体颜色
8.样式脚手架（scaffolding）:声明一些基础类，辅助构建整个页面
三.列表相关样式
list-style-type: disc / circle / square / upper-alpha / upper-greek
list-style-image: url(xx.png);
list-style-position: inside / outside;
①列表项前的提示图片位置无法修改；如果希望修改图片位置，使用background-image替换
②列表在项目中常用于“树形菜单”、“导航条”
四.复杂选择器：nth-child()选择父元素中的第n个子元素
nth-child(odd)选择奇数 nth-child(ever)选择偶数
:not(:first-child){ 选中除了第一个子元素外的所有的li }
:not(:last-child){ 选中除了最后一个子元素外的所有的li }
:first-child{ } :last-child{ }
本身就浮动的元素它的子元素在浮动高度不会塌陷 只有行内块元素才能用vertical-align
