float布局
浮动布局的核心就是让元素脱离普通流，然后使用width/height，margin/padding将元素定位。脱离普通流的元素，就像脱离地心引力一样，与普通流不在一个高度上。浮动布局的核心就是让元素脱离普通流，然后使用width/height，margin/padding将元素定位。脱离普通流的元素，就像脱离地心引力一样，与普通流不在一个高度上。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| .wrap {
background-color: #D66464;
}
.clearfix:after {
content: "";
clear: both;
display: block;
}
.left {
float: left;
width: 100px;
background: #00f;
height: 180px;
}
.right {
float: right;
width: 150px;
background: #0f0;
height: 200px;
}
.center {
background: #FFFFFF;
margin-left: 110px;
margin-right: 160px;
height: 150px;
}
|
普通流布局（inline-block布局）
- 使用inline-block之前先处理点小障碍：inline-block元素会有4px左右的空隙，这个是因为我们写代码时候的换行符所致。
- 解决办法很简单：在inline-block的父元素中设置样式font-size：0；letter-spacing: -4px; 然后设置inline-block的所有兄弟元素 font-size：值；letter-spacing: 值px; 恢复正常的显示。
- 另外还有一点需要注意的是inline-block默认是基线对齐的，而inline-block的基线又跟文本基线一致，所以在内容不同的时候并不能水平对齐。只需要用vertical-align显式声明一下top/bottom/middle对齐即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| .wrap {
background-color: #FBD570;
font-size: 0;
letter-spacing: -4px;
margin-left: 100px;
margin-right: 150px;
}
.wrap * {
font-size: 1rem;
letter-spacing: normal;
}
.left {
display: inline-block;
vertical-align: top;
width: 100px;
background: #00f;
height: 180px;
margin-left: -100px;
}
.right {
display: inline-block;
vertical-align: top;
width: 150px;
background: #0f0;
height: 200px;
margin-right: -150px;
}
.center {
display: inline-block;
vertical-align: top;
background: #B373DA;
height: 150px;
min-width: 150px;
width: 100%;
}
|
绝对定位
前面的浮动和普通流中其实定位都是靠盒子模型控制的，与我们常说的定位还是有差别的。而绝对定位就是我们平常所说的定位，给定参考坐标系+坐标确定位置。
弹性盒子(flex)
弹性盒布局有如下优势：
- 独立的高度控制与对齐。
- 独立的元素顺序。
- 指定元素之间的关系。
- 灵活的尺寸与对齐方式。
弹性框布局算法是方向无关的，与此相对的，块级布局侧重于垂直方向、行内布局侧重于水平方向。