CSS基础（10）- 常规流

本系列笔记是基于【渡一教育】袁进老师的html+css基础课程而记录，仅作为个人记录以及阅读使用。

常规流

盒模型：规定单个盒子的规则

视觉格式化模型（布局规则）：页面中的多个盒子的排列规则

大体分为3种方式：

1. 常规流
2. 浮动
3. 定位

常规流布局

常规流、文档流、普通文档流、常规文档流

所有元素，默认都属于常规流布局

总体规则：块盒独占一行，行盒水平依次排列

包含块 containing block：每个盒子都有它的包含块，包含块决定了盒子的排列区域

绝大部分情况下，盒子的包含块，为其父元素的内容盒

块盒

1. 每个块盒的总宽度，必须刚好等于包含块的宽度

• 宽度默认为auto(把剩余的空间吸收掉)

• margin也可以设为auto(也是把剩余的空间吸收掉)，默认为0

• width吸收能力强于margin

• 若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该剩余空间被margin-right吸收

• 在常规流中，块盒在其包含块中 居中，可以定宽，然后令margin-left、margin-right设为auto (也可以 margin: 0 auto;)

2. 每个块盒垂直方向上的auto值

• height: auto; 适应内容的高度

• margin: auto; 表示 0

3. 百分比取值

• padding、宽、margin可以取值为百分比。以上所以百分比，相对的是包含块的宽度（与包含块的高度没有任何关系）

• 高度的百分比：
  1）. 包含块的高度取决于子元素的高度时，子元素里设置的百分比无效

.parent {
    background: lightblue;
    width: 300px;
    /* height: 200px; */
    border: 2px solid;
    padding: 30px;

}

.child {
    border: 2px solid;
    background: #f00;
    height: 50%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2）. 包含块的元素不取决与子元素的高度时，百分比相对于父元素的高度

.parent {
    background: lightblue;
    width: 300px;
    height: 1000px;
    border: 2px solid;
    padding: 30px;

}

.child {
    border: 2px solid;
    background: #f00;
    height: 50%;
}

/*.child的宽会等于500px*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4. 上下外边距的合并

两个常规流块盒，上下外边距相邻，会进行合并

两个外边距，取最大值

父子元素外边距相邻也会合并

.parent {
    background: rgb(84, 38, 84);
    height: 300px;
    margin-top: 50px;
    /*解决方法1：加一个border
    
    border:1px solid #fff*/
}

.child {
    background: rgb(214, 104, 30);
    height: 100px;
    width: 300px;
    margin-top: 50px;/*解决办法2：不在子元素里写margin-top，去父元素里写padding-top*/
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

参考资料

1. 【渡一教育】袁进老师的html+css基础课程
2. 【渡一教育】袁进老师相关课程源代码