「这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战」

CSS笔记-盒子布局

一般来说，盒子的布局方式分为水平布局和垂直布局，具体内容如下

1. 水平布局

即元素在其父元素水平方向的位置布局，其影响因素有

• margin-left

• border-left

• padding-left

• width

• padding-right

• border-right

• margin-right

当元素在父元素中水平布局时，必须要满足以下的等式：

父元素内容区的宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

以上等式必须满足，如果等式相加结果不成立，即为过渡约束。那么等式会自动调整，如下所示：

• 当等式中的7个属性有值为auto时，等式会自动调整auto的值 直到等式成立。

• 当等式中的7个属性值都无auto的情况下， 将自动调整 margin-right 的值 直到等式成立。

• 七个值中能被设置成auto的只有 margin-left、margin-right 和 width 三个。

• 当某一值为auto时，等式自动调整那个值的大小使之成立

• width为auto

• 且 某一margin外边距为 auto时，则宽度为最大值，该margin为0；

• 且 margin都为 auto 时，则宽度为最大值， margin都为0；

• 宽度 width 为固定值，margin为auto时，则两外边距值相等，及在父元素中水平居中。

2. 垂直布局

垂直布局相对于水平布局来说简单很多，并不需要满足公式。

1. 父元素中高度 height 无具体值 ， 则父元素的高度随子元素高度撑开；

2. 父元素中高度 height 有具体值

3. 子元素高度未超父元素，则子元素子父元素内展示；

4. 子元素高度超出父元素，则子元素从父元素中溢出；

这里可以使用 overflow 属性来设置父元素中溢出子元素的处理办法。

• overflow: visible （默认值） 子元素溢出，在父元素外显示

• overflow: hidden 子元素被裁减，溢出内容被隐藏

• overflow: auto 根据需要生成（横向或者纵向）滚动条

• overflow: scroll 生成两个滚动条

• 另外还有 overflow-x 和 overflow-y 表示横向纵向的设置。