1.水平方向布局

一个元素在其父元素中，水平布局必须要满足以下的等式
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

= 其父元素的宽度
以上等式必须满足，如果相加结果使等式不成立，则称为过渡约束

在过渡约束的情况下等式会自动进行调整：

  • 如果这七个值中没有auto的情况，则浏览器会自动调整margin-right值以使等式满足
  • 如果这七个值中有auto的情况，则会自动调整auto值以使等式成立
    • 这七个值中有三个值可以设置为auto：width、margin-left、maring-right
    • 如果只有一个值为auto，则会自动调整auto的那个值以使等式成立
    • 如果有多个auto且宽度为auto，优先调整宽度到最大，其他auto的外边距会自动设置为0
    • 如果外边距都为auto，则auto的外边距会自动均分以使等式成立

1.1 元素居中对齐的技巧

要水平居中对齐一个元素(如 <div>), 可以使用margin: auto;。

设置到元素的宽度将防止它溢出到容器的边缘。

元素通过指定宽度，并将两边的空外边距平均分配。注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

2.垂直方向布局

2.1 元素溢出

子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出

可以使用overflow/overflow-x/overflow-y属性来设置父元素如何处理溢出的子元素

有关overflow的相关内容可以参考这篇博文：(CSS3元素的display、visibility与overflow属性的相关设置)[https://jayfan.icu/2022/03/15/Web%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E4%B9%8BHTML5+CSS3%E5%AD%A6%E4%B9%A0%EF%BC%88%E4%B8%89%EF%BC%89/#2-CSS%E5%85%83%E7%B4%A0%E7%9A%84%E6%BA%A2%E5%87%BA%EF%BC%88overflow%EF%BC%89]

2.2 边距折叠

垂直外边距的重叠（折叠）：相邻的垂直方向外边距会发生重叠现象

兄弟元素间的相邻，垂直外边距会取两者之间的较大值（两者都是正值）

  • 如果相邻的外边距一正一负，则取两者的和

  • 如果相邻的外边距都是负值，则取两者中绝对值较大的