CSS 网页布局的三种常见方式
标准流、Float（浮动）、Position（定位）
# 1. 标准流（普通流/文档流）是最基本的布局方式
什么是普通流（标准流）：所谓的标准流，就是 元素/标签 按照规定好的默认方式排列
块级元素：div、hr、p、h1~h6、ul、ol、dl、form、table、等
（1）自己独占一行，从上向下顺序排列
（2）宽高、内外边距都可以自己控制
（3）宽度默认为是父元素的100%
行内元素：span、a、i、em、等
（1）一行多个，从左到右顺序排列，元素之间有空白间隙，碰到父元素边缘则自动换行
（2）设置宽高 和 上下内外边距是无效的（不符合W3C标准）
行内块元素：img、input、textarea、等
（1）一行多个，从左到右顺序排列，元素之间有空白间隙，超出父级容器会自动换行
（2）宽高、内外边距都可以自己控制
（3）宽度默认是根据自身的内容来决定
元素之间的相互转换：通过 display 属性，可以转换元素类型
转换为块级元素：display: block;
转换为行内元素：display: inline;
转换为行内块元素：display: inline-block;
# 2. Float（浮动）
为什么需要浮动？
有很多的布局效果，标准流是没办法实现的，如：如何让多个块级盒子在一行排列？如何让两个元素一个靠左一个靠右？
此时就可以利用浮动来完成布局，因为浮动可以改变元素标签默认的排列方式
浮动元素的特性：元素添加浮动后，会有如下特性
1. 浮动元素会一行内显示并且元素顶部对齐
所有添加浮动的元素，都会在一行上显示，并且都是紧挨在一起(元素之间没有空隙)，超出父级容器会自动换行排列
2. 浮动的元素具有"行内块元素"的特性：任何元素都可以添加浮动，不管原先是什么模式的元素
如果块级盒子没有设置宽度，默认和父级一样宽，但添加浮动后，它的宽度根据自身的内容来决定!
浮动后的行内元素不需要转化就可以直接给高度和宽度
注意：行内块元素之间有空白间隙，而浮动没有
3. 浮动元素会脱离标准流
浮动的元素会脱离标准流的控制（会浮起来，向页面左上或右上浮动，原来的位置不再保留）原先的位置会被后面标准流的盒子所占用，且浮动的元素会 覆盖住/压住 标准流的盒子(需要清除浮动)
浮动带来的影响有哪些？
（1）会脱离标准流
（2）浮动元素无法撑起父元素的高度，父元素会出现高度塌陷的现象
在标准文档流中，父元素的高度默认是由子元素撑开的，等于说子元素多高，父元素就多高，但是当子元素有了浮动之后，子元素会脱离标准流，此时，将会导致子元素无法撑起父元素的高度，会导致父元素的高度塌陷
简而言之：父元素不写高度时,子元素写了浮动后,父元素会发生高度塌陷(造成父元素高度为 0)
- 注意：浮动不会压住下面标准流盒子里面的文字/图片（浮动的前世本就是做文字环绕效果的，如今用作布局）
<html>
<body>
<div class="box">
<!-- 让多个块级盒子一行内显示（盒子之间没有空隙） -->
<div class="son1">1</div>
<div class="son2">2</div>
<div class="son3">3</div>
</div>
</body>
<style>
.box {
width: 500px;
height: 100px;
background-color: green;
}
.son1,.son2,.son3 {
width: 200px;
height: 100%;
background-color: red;
/* 添加浮动 */
float: left;
}
</style>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<body>
<div class="box">
<!-- 让两个块级盒子，一个靠左，一个靠右 -->
<div class="left">左</div>
<div class="right">右</div>
</div>
</body>
<style>
.box {
width: 100%;
height: 300px;
background-color: green;
}
.left,.right {
width: 200px;
height: 100%;
background-color: red;
}
.left {
float: left; /* 左浮动 */
}
.right {
float: right; /* 右浮动 */
}
</style>
</html>
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
# Position（定位）
为什么需要定位？
定位 在布局中 非常的常用，它可以让一个元素，摆放到父元素中任意位置
定位 = 定位模式（决定元素的定位方式）+ 边偏移（决定该元素的最终位置）
定位模式：position 属性值，其中有五种种定位方式的属性值
| 值 | 说明 | 特点 |
|---|---|---|
| static | 静态定位：默认定位方式，无定位的意思；遵循正常的标准文档流，不会受到 top、bottom、left、right 边偏移属性的影响 | 没有定位 |
| relative | 相对定位：一般给父元素添加，相对于自己原来的位置进行偏移(自恋型)，一般用于约束有绝对定位的子元素 | 继续保留原来的位置 |
| absolute | 绝对定位：一般给子元素添加，以最近一级有定位的父级盒子来定位，如果父级没有定位，则以浏览器来定位 | 不再保留原来的位置 |
| fixed | 固定定位：以浏览器可视窗口来定位，和父元素没有任何关系；且是固定在某处，即使滚动窗口它也不会移动 | 不再保留原来的位置 |
| sticky | 粘性定位：以浏览器可视窗口来定位，必须添加 top、bottom、left、right 其中一个边偏移的属性 | 继续保留原来的位置 |
边偏移：有top、bottom、left、right四个属性（分别代表上下左右偏移量，定义元素相对其父元素上下左右边线的距离）属性值可以为像素单位px或百分比%
定位拓展知识
（1）添加了绝对定位或者固定定位的行内元素，可以直接设置高度和宽度（和浮动类似）不需要模式转化。
（2）添加了绝对定位或者固定定位的块级元素，如果不给宽度或者高度，盒子默认大小是内容大小。
（3）添加了浮动/绝对定位/固定定位的元素都不会有外边距合并的问题（脱标的盒子不会触发外边距塌陷）
（4）绝对定位/固定定位会完全压住下面标准流的盒子(包括文字图片)
（5）子绝父相，可以让子元素在父盒子里面水平垂直居中
- 子绝父相：一般情况下，子级是绝对定位的话，父级要用相对定位，让子元素以其父元素为标准来定位
- 注意：同一个元素里面，浮动和绝对定位不能同时使用。
<html>
<body>
<div class="box">
<div class="son">
<div class="sun"></div>
</div>
</div>
</body>
<style>
.box {
width: 450px;
height: 200px;
background-color: green;
position: relative; /* 相对定位 */
}
.son {
width: 100px;
height: 100px;
background-color: red;
/* 子绝父相：实现子元素在父级盒子里面水平垂直居中*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.sun {
width: 50px;
height: 50px;
background-color: pink;
/* 注意：sun 盒子是相对于 son 盒子来定位的：因为离它最近一级的父元素 son 有定位属性 */
position: absolute;
left: 25px;
}
</style>
</html>
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
# Flex（弹性布局）
