一，浮动
1，多个块级元素纵向找标准流
多个块级元素横向排列找浮动 （中间无空隙,浮动贴浮动）
注：先用标准流的父亲排列上下位置，之后内部子元素采取浮动排列左右位置
2，浮动语法：
选择器{ float:属性值；}
left right none
3，浮动特点：1),（脱离标准流控制脱标），不再保留原先位置，浮动盒子浮在标准流上面（层叠）
2）如果一行都加浮动，一行内显示盒子并顶端对齐
3）任何元素都可以浮动，添加浮动后有了行内块元素特殊，可以添加高度，宽度
4）浮动是不影响下面元素的，因此有的可以不用去除外边距
4，为了约束浮动元素位置，用标准流盒子来约束
5，盒子中套很多盒子，可以用div,ul>li来实现
注：有了li就有了小点，清除小点
li{
list-style: none;
}
6，行内元素 i em a span
7,css第一行一定要加上
*{
margin: 0;
padding: 0;
}
8,
若后面的盒子掉了下去，是因为边距超出了标准流盒子范围，需要清除最后一个盒子边距
.t{
margin-right: 0;
}
9，浮动盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
10，
1)为什么要清除浮动？
父盒子很多情况下不方便给高度，但是父盒子高度为0 时，下面的标准流盒子会自动往上走
2)清除浮动几种方法
语法 选择器{clear: 属性值；}
- 额外标签法：在最后一个子元素添加一个额外标签，添加清除浮动样式
.clear {
clear: both
}
</style>
<body>
<div class="box">
<div class="a">1</div>
<div class="b">2</div>
<div class="clear"></div>
</div>
</body>
- 父级添加overflow(缺：不能显示溢出部分)
.box {
/* 清除浮动 */
overflow: hidden;
width: 1226px;
height: 615px;
background-color: pink;
margin: 0 auto;
}
</style>
<body>
<div class="box">
<div class="a">1</div>
<div class="b">2</div>
</div>
- after伪元素法（也是给父辈添加）
<style></style>里添加,原理是后面添加个盒子把父盒子撑开
<body>
<div class="box clearfix">
<div class="a">1</div>
<div class="b">2</div>
</div>
</body>
- 双伪元素清除浮动（也是给父辈添加）
原理是前后各用一个盒子把父盒子撑开
二
三，定位
1，定位可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子
2，定位=定位模式+边偏移
1）定位模式：
2)边偏移
3，静态定位：默认的定位方式，无定义的意思
选择器{position: static;}
4,相对定位：（相对于自己原来的位置）
选择器{position: relative;}
.box {
position: relative;
top: 20px;
left: 20px;
}
特点：1）移动位置的时候参照自己原来的位置（反向大招）
2）不脱标，继续保留原来的位置，别的盒子没办法占用
5，绝对定位：（反向）
选择器{position: absolute;}
特点：1）如果没有祖先元素或者祖先元素没有定位，则以浏览器为准
2）如果祖先元素有定位，以最近一级有定位祖先元素为参考点移动位置
3）绝对定位脱标不占有原来的位置
6，大部分 父亲相对定位，儿子绝对定位--->(子绝父相)
7，固定定位：
选择器{position: fixed;}
特点：1）以浏览器的可视窗口为参照点移动元素
2）跟父元素没有任何关系
3）不随滚动条滚动
4）不占有原先的位置（下面可以放别的盒子）
- 固定定位小技巧：1，让固定定位的盒子left: 50%,走到浏览器可视区一半的位置
- 2，让固定定位的盒子margin-left:版心宽度一半的位置
8，粘性定位（了解）
top后边的像素表示距离边框多少值时黏上
9，定位总结
10,叠放次序
选择器{z-index: 1;}
注意：1，数值越大越靠上，默认值是auto
2，属性相同，按照书写顺序，后来者居上
3，数值后面不能加单位
4，只有定位的盒子才有z-index属性
11，绝对定位的盒子居中算法
1），left 50% 让盒子移动到父级元素水平中心位置
2），margin-left: -100px; 让盒子向左移动自身宽度的一半
12，
1）行内元素添加绝对或固定定位，可以直接设置高度和宽度
2）块级元素添加绝对固定定位，如果不给宽度或高度，默认大小是内容大小
3）浮动元素，绝对定位元素都不会出发外边距合并的问题
13，定位扩展
1），浮动元素不同，只会压住它下面标准流的盒子，但不会压住它下面标准流的文字（图片）
（浮动最初目的是做文字环绕效果的）
2），绝对定位（固定定位会压住下面标准流所有的内容）
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
