css三⼤布局
标准流：
从左到右，从上到下块级元素独占⼀⾏，⾏内元素碰到⽗盒⼦边缘换⾏
浮动：
特点
1 元素浮动之后不占据原来的位置（脱标），变成⽴体，下⾯可以有东西，只影响下⾯的
2 浮动的盒⼦在⼀⾏上显⽰
3 ⾏内元素浮动之后转换为⾏内块元素（可以定义宽⾼）。（不推荐使⽤，转⾏内元素最好使⽤display: inline-block;）
作⽤
⽂本绕图：⽂字到图⽚的右边
css实现三列布局制作导航
⽹页布局
清除浮动：
1 给浮动的盒⼦加⽗盒⼦，并且设置⾼度
2 额外标签法：再最后⼀个浮动的盒⼦后加 <div id="" ></div>
3 给浮动的盒⼦的⽗盒⼦加 overflow：hidden（在解决⽗边框塌陷时⽤过）相当于设置了⽗元素的⾼度，如果有⼦元素到了⽗元素的外⾯，此⽅法不适⽤
4 ⽤伪元素清楚浮动：给⽗盒⼦加类（clearfix）推荐使⽤
.clearfix:after {
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
兼容IE浏览器
.clearfix {
zoom: 1;
}
与⾏内块元素区别：浮动可以设置左浮动和右浮动
定位：
⽅向：left  right top bottom
static 静态定位
是默认值，相当于标准流
absolute 绝对定位
特点：
1 元素使⽤绝对定位之后不占据原来的位置（脱标）
2 元素使⽤绝对定位，位置是从浏览器出发。
3 嵌套的盒⼦，⽗盒⼦没有使⽤定位，⼦盒⼦绝对定位，⼦盒⼦位置是从浏览器出发。
4 嵌套的盒⼦，⽗盒⼦使⽤定位，⼦盒⼦绝对定位，⼦盒⼦位置是从⽗元素位置出发。
5 给⾏内元素使⽤绝对定位之后，转换为⾏内块（可以设置宽⾼）。（不推荐使⽤，推荐使⽤display:inline-block;）relative 相对定位
特点：
1 使⽤相对定位，位置从⾃⾝出发。
2 还占据原来的位置。
3 ⼦绝⽗相（⽗元素相对定位，⼦元素绝对定位）（⽗元素占据位置，⼦元素随意浮动）
4 ⾏内元素使⽤相对定位不能转⾏内块
fixed  固定定位
特点：
1 固定定位之后，不占据原来的位置（脱标）
2 元素使⽤固定定位之后，位置从浏览器出发。
3 元素使⽤固定定位之后，会转化为⾏内块（不推荐，推荐使⽤display:inline-block;）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。