CSS 常规流

盒子模型是规定了单个盒子的规则，那如何定义盒子和盒子之间的规则呢？

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

视觉格式化模型，大体将页面中的盒子的排列分为三种方式：

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

常规流布局

常规流又叫做文档流，普通文档流，常规文档流。

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

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

包含块（containing block）:每个盒子都有它的包含块，包含块决定了盒子的排列区域，有点像iOS里面的父控件。

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

块盒

水平方向

1. 每个块盒的总宽度，必须刚好等于包含块的宽度。这里的总宽度指的是

2. width 宽度的默认值是auto，margin 的默认取值是0， 他的取值也可以是auto，只不过他的默认值不是auto

3. auto: 他的意思是这个width 或者 margin 要将剩余空间吸收掉

4. 如果width 和margin 的取值都是auto的时候，width 会抢占所有的空间，是因为width 的吸收能力强于 margin.

5. 若宽度，边框，内边距，外边距计算后，仍有剩余空间，该剩余空间被 margin-right 全部沾满。这个规则一定成立，需要注意的是浏览器的margin-right 计算值仍然可能是我们设置的，比方说我们设置margin 0 50px，查看计算的属性，margin-right 仍然是50，是实际布局的可以看到 margin-right明显大于 50，是占满了剩余的空间。

6. 在常规流中，块盒在其包含块中居中，可以定宽，然后左右margin 设置为auto。原理就是定了宽度后，左右两个margin 抢夺剩余空间，因为margin-left 和margin -right抢夺剩余空间的能力一致，这样就导致块居中了。

 margin: 0 auto;

垂直方向

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

height : auto 适应内容的高度 如果一个父元素的块包含一个子元素的块，子元素和父元素的高度如果都不设置高度的话，他的值就是auto,子元素会被内容撑开， 子元素作为父元素的内容，而父元素会被子元素撑开。

2.百分比取值

宽，margin ，padding 可以取值百分比。 以上的所有百分比相等于包含块的宽度（width） 以上的所有百分比相对于包含块的宽度。

3.高度的百分比：

• a.包含块的高度取决于子元素的高度，设置百分比无效。

父元素不设置高度，实际就是auto，子元素设置 50%,这时候设置的百分比无效，那是因为这里逻辑有问题，父元素的高度取决于子元素的高度，子元素的高度又是父元素的50%。明显这两个逻辑都不能把父元素，子元素的高度确定下来，所以就是无效的。就相当于这个百分比没写。

        .parent{
                  background: lightblue;
                  padding: 50px;
                }
                
        .child{
            background: red;
            height: 50%;
        }

• b.包含块的高度不取决于子元素的高度，百分比相对于父元素的高度。

        .parent{
                background: lightblue;
                padding: 50px;
                height: 1000px;
            }
        .child{
            background: red;
            height: 50%;
        }

这就是正常的情况，父元素设置 100，子元素设置一个百分比，很明显这两种情况都可以确定子元素的高度。

4.外边距的合并问题 上下外边距的合并）

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

发生外边距的元素有两种关系：

1. 两个兄弟元素之间的合并

/* 下面的child1 和 child2 之间垂直间距为 100 而不是 150*/
        .child1{
                background: lightblue;
                height: 300px;
                margin-bottom:50px;
            }
        .child2{
            background: red;
            height: 100px;
            margin-top: 100px;
            width: 200px;
        }

2. 父子元素之间的合并

        .parent{
                background: lightblue;
                height: 300px;
                margin-top:50px;
                /* 用下面的代码代替上面的代码 也就是替代办法*/
                 /* padding-top: 50px; */
            }
        .child{
            height: 100px;
            background: red;
            margin-top: 50px;
            width: 200px;
        }

合并规则：

• 两个外边距取大的哪个值
• 条件：必须是margin要相邻，这里相邻必须是两个margin相邻，如果一个父元素的padding 和子元素的margin 之间的挨着不会产生合并。

这篇好文章是转载于：学新通技术网