CSS3 布局
1. 正常布局(文档流布局)
- 正常的布局模式即为文档流的默认渲染模式
- 元素按照其在 HTML 中的先后顺序自上而下布局
- 行内元素水平排列,直到行被占满然后换行
- 块级元素则会被渲染为一个完整的新行
- 所有元素默认的布局方式都是普通流
2. 浮动布局
浮动布局主要依赖 float
属性,可以设置的值为 left
和 right
,代表浮动的元素会脱离文档流并向左或向右浮动,直到碰到父元素或者另一个浮动元素
浮动的元素类似于 inline-block
,具有内联的性质,且可以设置宽高
浮动的元素会脱离文档流,也就是浮动的元素不会影响普通元素的布局,不会占据文档流的位置,所以会导致父元素高度坍塌
为了解决父元素高度坍塌的问题,需要 清除浮动
2.1. 清除浮动
2.1.1. 父级定义高度
- 原理:父级定义固定高度,以此解决父级无法自动获取高度的问题
- 优点:简单,代码少,浏览器支持好
- 缺点:只适合父级与子级高度固定的布局,需要给出精确的高度
- 建议:只建议高度固定的布局时使用
2.1.2. 结尾处添加空标签并清除浮动
- 原理:在父级内的结尾处添加一个空 DIV,利用 CSS 的
clear: both;
来清除浮动,让父级能自动获取到高度 - 优点:简单,代码少,浏览器支持好
- 缺点:需要额外增加节点
- 建议:是以前主要使用的清除浮动方法
2.1.3. clearfix 清除浮动类
.clearfix::after {
content: "";
display: block; height: 0; clear: both; visibility: hidden; }
- 原理:为父级的伪元素(::after)清除浮动
- 优点:浏览器兼容好
- 缺点:代码多,理解困难
- 建议:推荐使用,建议提供公共类 clearfix 作为清除浮动使用
2.1.4. 父级定义溢出隐藏
- 原理:必须定义 width,同时不能定义 height,浏览器会自动检查浮动区域的高度
- 优点:简单,代码少
- 缺点:不能和 position 配合使用,因为超出的尺寸会被隐藏
- 建议:只推荐没有使用 position 和不涉及 overflow 的场景
3. 定位布局
position porperty value | name | describe |
---|---|---|
relative | 相对定位 | 相对自身定位 |
absolute | 绝对定位 | 相对自身第一个非 static 定位的父元素定位 |
fixed | 固定定位 | 相对浏览器视口定位 |
4. 居中布局
4.1. 水平居中
4.1.1. 行内元素水平居中
.inline-hor-center {
text-align: center;
}
4.1.2. 单个块级元素水平居中
.single-block-hor-center {
margin-left: auto;
margin-right: auto;
}
.single-block-hor-center {
position: relative;
left: 50%;
transform: translateX(-50%); }
4.1.3. 多个块级元素
.flex-hor-center {
display: flex;
justify-content: center;
}
4.2. 垂直居中
4.2.1. 行内元素垂直居中
.inline-ver-center-parent {
display: table;
}
.inline-ver-center {
diplay: table-cell;
vertical-align: middle;
}
4.2.2. 单行文字或图片
设置文字的 line-height
和 height
相等
4.2.3. 单个块级元素垂直居中
.single-block-ver-center {
position: absolute;
top: 50%;
transform: translateY(-50%); }
4.2.4. 使用 Flexbox 垂直居中
.flex-ver-center {
display: flex;
align-items: center;
}
5. 双飞翼布局 & 圣杯布局
双飞翼布局和圣杯布局目的都是左右两栏固定宽度,中间部分自适应
5.1. 双飞翼布局
<div class="container">
<div class="middle"> <div class="content"></div> </div> <div class="left"></div> <div class="right"></div> </div>
.middle,
.left,
.right {
float: left;
min-height: 130px; text-align: center; } .middle { width: 100%; background: blue; } .content { margin: 0 300px 0 200px; } .left { width: 200px; margin-left: -100%; background: green; } .right { width: 300px; margin-left: -300px; background: orange; }
5.2. 圣杯布局
<div class="container">
<div class="middle"></div> <div class="left"></div> <div class="right"></div> </div>
.container {
padding: 0 300px 0 200px; } .middle, .left, .right { position: relative; float: left; min-height: 130px; } .middle { width: 100%; background: blue; } .left { margin-left: -100%; left: -200px; width: 200px; background: green; } .right { margin-left: -300px; right: -300px; width: 300px; background: orange; }
5.3. Flex 实现
<div class="container">
<div class="middle"></div> <div class="left"></div> <div class="right"></div> </div>
.container {
display: flex;
min-height: 130px;
}
.middle { flex-grow: 1; background: blue; } .left { order: -1; flex-basis: 200px; background: green; } .right { flex-basis: 300px; background: orange; }
6. 左侧固定右侧自适应两栏布局
6.1. HTML 基本结构
<div class="wrapper">
<div class="left"></div> <div class="right"></div> </div>
6.2. float + margint-left
.wrapper-float {
overflow: hidden; // 清除浮动
}
.wrapper-float .left {
float: left; } .wrapper-float .right { margin-left: 150px; }
6.3. float + BFC
.wrapper-float-bfc {
overfloat: auto;
}
.wrapper-float-bfc .left {
float: left; margin-right: 20px; } .wrapper-float-bfc .right { margin-left: 0; overflow: auto; // 形成了 BFC,因此不会与浮动的元素重叠 }
6.4. flex
.wrapper-flex {
display: flex;
align-items: flex-start;
}
.wrapper-flex .left { flex: 0 0 auto; } .wrapper-flex .right { flex: 1 1 auto; }