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; }