【深入理解CSS】盒模型

盒模型

元素宽度的问题

tip：IE 有一个 bug，它会默认将元素渲染成行内元素，而不是块级元素，
所以代码中我们用声明 display: block 来纠正。
想要两个盒模型并排，首先设置它们为浮动向左，之后需要设置它们的宽度，由于外边距的影响，main和sidebar不能分别设置为70%和30%，当我们把sidebar宽度改为26%就能实现并排了。
但声明不推荐使用这种方法（魔术数值，其意为不是一个理想的值，而是通过更改样式试出来的值）。
我们可以通过calc（30%-3em）来优化。
也可以设置border-box使border、padding不影响width。

元素高度问题

控制溢出行为
当明确设置一个元素的高度时，内容可能会溢出容器。
用 overflow 属性可以控制溢出内容的行为，该属性支持以下 4 个值。

 visible（默认值）——所有内容可见，即使溢出容器边缘。
 hidden——溢出容器内边距边缘的内容被裁剪，无法看见。
 scroll——容器出现滚动条，用户可以通过滚动查看剩余内容。在一些操作系统上，会出现水平和垂直两种滚动条，即使所有内容都可见（不溢出）。不过，在这种情况下，滚动条不可滚动（置灰）。
 auto——只有内容溢出时容器才会出现滚动条。

可以用 overflow-x 属性单独控制水平方向的溢出，或者用 overflow-y 控制垂直方向
溢出。

等高列CSS布局

首先可以给容器设置dispaly：table，给每一列设置display：table-cell，使元素等高。

但上面代码有一个错误，margin-left并不会生效，因为为table-cell元素，故要利用border-spacing修改代码。
border-spacing也会作用于表格的外边缘，会导致main和header板块无法对齐。

对于这种情况，我们可以在外面包裹一层新容器，然后利用负外边距，清除表格外边缘的空余。

等高列flex布局

给容器设置display：flex，即弹性容器，其子元素也默认等高，还可以设置元素宽度、外边距，并不用担心超出100%以及包裹新容器的情况，因为flexbox会妥善处理。

min-height和max-height

我们可以使用这两个属性来规定盒模型的最小或最大值，而不是明确定义高度，这样元素可以在这些界限内自动决定高度。

min-width 和 max-width也有类似属性。

垂直居中内容

• 可以用一个自然高度的容器
  给容器加上相等的上下内边距让内容居中
• 可以指定高度，且避免使用内边距
  对容器使用 display: table-cell 和
  vertical-align: middle
• 可以用flex
  后续会详细介绍
• 只有一行文字
  设置一个大的行高，让它等于理想的容器高度。这样会
  让容器高度扩展到能够容纳行高。如果内容不是行内元素，可以设置为 inline-block。
• 知道容器和内容的高度
  使用绝对定位。
• 知道内部元素的高度
  使用绝对定位结合变形。

可以参考 howtocenterincss 网站。可以根据自己的场景填写几个选项，然后它会相应地生成垂直居中的代码。

负外边距

💡如果设置左边或顶部的负外边距，元素就会相应地向左或向上移动，导致元素与它前面的元素重叠。
💡如果设置右边或者底部的负外边距，并不会移动元素，而是将它后面的元素拉过来。

外边距折叠

当多个外边距折叠时，只会作用其中外边距最大的一个。

猫头鹰选择器* + *

该选择器开头是一个通用选择器（*），它可以选中所有元素，后面是一个相邻兄弟组合器（+），最后是另一个通用选择器。它因形似一只眼神空洞的猫头鹰而得名。猫头鹰选择器功能接近此前介绍的选择器：.social-button + .social-button，但是它不会选中直接跟在其他按钮后面的按钮，而是会选中直接跟在其他元素后面的任何元素。也就是说，它会选中页面上有着相同父级的非第一个子元素。

接下来用猫头鹰选择器给页面元素加上顶部外边距。这样就会给侧边栏的每一个元素加上一致的间距。