一、标准流
块级元素
- 独占一行，从上到下排列
- 默认宽度同父元素
div、hr、p、h、ul、ol、dl、form、table等
行内元素
- 一行内显示，超出自动换行
span、a、i、em等
二、浮动
- 任何元素都可以添加，变为块级元素（相当于行内块）
- 脱离标准流，到指定位置
- 漂浮在普通流的上面
- 添加浮动属性，元素不占位置
多个盒子处于一行处理
- 行内块属性
默认有缝隙，难以处理 - 浮动完美解决
属性
noneleftright
注：一般为了避免和标准流影响，浮动元素必须有一个标准流的父亲规范
与父盒子
- 贴着盒子的内边框
- 不会超过盒子的内边距
与兄弟盒子
- 浮动的元素只会影响当前的或者后面的标准流盒子，不影响前面的标准流
- 建议兄弟盒子都浮动，方便处理
清除浮动
- 很多情况下父元素不方便给高度，子元素浮动后不占位置，导致父盒子无高度，影响整个页面布局
- 清除浮动，父盒子自动获取子元素最大的高度
-
clear
属性left、right、both（常用）
a> 额外标签法
浮动元素末尾添加空标签，并为该标签添加属性clear: both;
注：W3C推荐，通俗易懂，但无意义
b> 父级添加overflow
overflow属性设为hidden|auto|scroll
注：内容增多时不会自动换行导致内容被隐藏，无法显示需要溢出的元素
c> 使用after伪元素
.clearfix:after { content:""; display:block; height:0; clear:both; visibility:hidden;}
.clearfix {*zoom:1;}/IE6、7专有/
d> 双伪元素
.clearfix:before,
.clearfix:after {
content:"";
display: table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
三、定位
- 定位 = 定位模式 + 边偏移
- 边偏移
top、bottom、left、right - 定位模式
position
static、relative、absolute、fixed，默认静态定位
静态定位
- 默认定位方式
- 按照标准流特性摆放，无偏移
相对定位
- 相对于原来自身在标准流中的位置偏移
- 保留原来标准流中的位置
绝对定位
- 以带有定位的父级元素来移动位置（父元素无定位时，以浏览器为基准）
- 完全脱离标准流，不占位置
- 子绝父相 （子级绝对定位，父级相对定位）
固定定位
- 绝对定位的特殊形式，以浏览器可视窗口为基准
定位拓展
-
marginauto在绝对定位|固定定位中无效，水平居中写法
左移父级的一半，再返回自身的一半
.abs {
position: relative;
}
.abs .son {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
margin-left: -100px;
}
- 在相对、绝对、固定定位中，
z-index调整堆叠顺序，默认0，赋值正整数或负整数，在其他流中无效 -
float、固定定位和绝对定位，造成inline-block效果 - 浮动、绝对定位不会造成外边距合并
