css盒模型的一些知识

Posted 2021-09-12 star

垂直居中指南

在容器里让内容居中最好的方式是根据特定场景考虑不同因素。做出判断前，先逐个询问自己以下几个问题，直到找到合适的解决办法。

1. 可以用一个自然高度的容器吗？给容器加上相等的上下内边距让内容居中。
2. 容器需要指定高度或者避免使用内边距吗？对容器使用display: table-cell和vertical-align: middle。
3.  可以用Flexbox吗？ 如果不需要支持IE9，可以用Flexbox居中内容。
4. 容器里面的内容只有一行文字吗？设置一个大的行高，让它等于理想的容器高度。这样会让容器高度扩展到能够容纳行高。如果内容不是行内元素，可以设置为inline-block。
5. 容器和内容的高度都知道吗？将内容绝对定位。（只有当前面提到的方法都无效时才推荐这种方式。）
6. 不知道内部元素的高度？用绝对定位结合变形（transform）。（还是只有当前面提到的方法都无效时才推荐该方法。）
7. 还不确定的话，参考howtocenterincss网站。这个网站很不错，可以根据自己的场景填写几个选项，然后它会相应地生成垂直居中的代码

负外边距

	左负边距	右负边距	上负边距	下负边距
未指定width的块状元素	width扩大	width扩大	向上移动，与它上面的元素重叠	将它下面的元素拉过来
指定width的块状元素	向左移动	没有作用	向上移动，与它上面的元素重叠	将它下面的元素拉过来
未指定width的内联元素	向左移动，与它左边的元素重叠	将它右边的元素拉过来	向上移动，与它上面的元素重叠	将它下面的元素拉过来
指定width的内联元素	向左移动，与它左边的元素重叠	将它右边的元素拉过来	向上移动，与它上面的元素重叠	将它下面的元素拉过来

负外边距并不常用，但是在某些场景下很实用，尤其是当创建列布局的时候。不过应当避免频繁使用，不然网页的样式就会失控。

外边距折叠

1. 当顶部和/或底部的外边距相邻时，就会重叠，产生单个外边距。
2. 只有上下外边距会产生折叠，左右外边距不会折叠。
3. 弹性子元素的外边距不会折叠

防止外边距折叠:

1. 对容器使用overflow: auto（或者非visible的值），防止内部元素的外边距跟容器外部的外边距折叠。这种方式副作用最小。
2. 在两个外边距之间加上边框或者内边距，防止它们折叠。
3. 如果容器为浮动元素、内联块、绝对定位或固定定位时，外边距不会在它外面折叠。
4. 当使用Flexbox布局时，弹性布局内的元素之间不会发生外边距折叠。网格布局（grid布局）同理。

一些注意点

1. 百分比参考的是元素容器块的大小，但是容器的高度通常是由子元素的高度决定的。这样会造成死循环，浏览器处理不了，因此它会忽略这个声明。要想让百分比高度生效，必须给父元素明确定义一个高度。
2. vertical-align声明只会影响行内元素或者table-cell元素。对于行内元素，它控制着该元素跟同一行内其他元素之间的对齐关系。对于显示为table-cell的元素，vertical-align控制了内容在单元格内的对齐。