文档流
# 问题
- 问题 1：为什么一个定宽的块级元素中，设置了样式
margin: 0 auto;后会出现具有居中对齐的方式？？？- 问题 2：为什么一个块级元素的宽度默认就是 100%
# 定义
- 所谓文档流就是元素排版过程中，元素会自动从左到右，从上到下遵循这种流的方式进行排列
- 其实在文档流中布局很简单，在文档流中所有的块级元素都被认为是一个盒子。我们只要将对应的盒子摆放到合适的位置就 ok 了
# 盒子模型
# 注意事项
重点！！！ 重点！！！ 重点！！！ 在子元素中满足一下公式：
父类内容区域的宽度 = 子margin-left + 子border-left + 子padding-left + content + 子padding-right + 子border-right + 子margin-right在文档流中这个公式是一定要满足的。接下来给大家列举一个例子
<style>
html,
body {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
background: red;
}
</style>
<div class="box"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
- 其实我们都知道盒子模型有一个特性：
就是单独沾满一行。就是这个盒子模型的宽度不满一行，也会单独沾满一行 - 其实就算元素宽度没有沾满父类的内容区域。那么浏览器就会给我们自动设置填满
- 其实我们可以理解为：父类宽度 100% = margin-left + border-left + padding-left + content(200px) + padding-right + border-left + margin-right(100% - 200px). 所以虽然宽度不满一行。但是也会单独沾满一行的
- 在决定元素的位置属性中 只有 width/ margin-left/ margin-right 可以设置 auto 属性
- 如果元素设置了 auto。但是宽度又无法沾满父类元素。浏览器会优先分配给具有 auto 的属性
html,
body {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
background: red;
margin-left: auto; // 设置auto属性
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
- 在方位属性中 margin-left/ margin-right 默认就是 0 width 的 auto 就是百分之百. 所有会有几个特点
- 如果 width/ margin 都是 auto 的话。此时 margin 是 0 width 就是百分之百（这个特点就解释了上述第二个问题）
- 如果同时设置了 width/ margin-right 为 auto 的话。margin-right 就是 0. width 就是百分之百
- 如果宽度是已知的，但是 margin-left/ margin-right 是 auto。 会将剩余的空间平分到左右两侧（其实这个内容 就解决了上述问题 1 的疑问）