fakerlove的博客

这种方案不要求父元素的高度，也就是父元素的高度发生了变化，仍然可以保持在父元素的垂直居中位置，水平方向上是一样的操作。设置父元素为display：table-cell，子元素设置display：inline-block。这里子元素设置了宽高，所以宽高会按照我们的设置来显示，但是实际上子级的虚拟占位已经撑满了整个父级，这时候，再给他一个margin：auto，它就可以上下左右都居中。在开发中，经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素。

CSS3中的增加了更多的媒体查询，就像if条件表达式一样，我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表。比如当浏览器的宽度或者高度发生变化时，通过百分比单位，可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。通过媒体查询，可以通过给不同的分辨率的设备编写不同的样式来实现响应式布局，比如我们为不同的分辨率的屏幕，设置不同的背景图片。除此之外，可以利用主流的ui框架，如element-ui，antd提供的栅格布局实现响应式。

display的值为inline-block，inltable-cell，table-caption，table，inline-table，flex，inline-flex，grid、inline-grid。两个p元素之间的距离为100px，发生了margin重叠（塌陷），以最大的为准，如果第一个p的margin为80的话，两个p之间的距离是100，以最大的为准。这时候，新的BFC不会与浮动的.aside元素重叠，因此会根据包含块的宽度，和.aside的宽度，自动变窄。

当对一个文档进行布局（layout）的时候，浏览器渲染引擎会根据标准之一的CSS基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。content-box：默认值，元素的width/height不包含padding，border，与标准盒子模型一致。padding：即内边距，清楚内容周围的区域，内边距是透明的，取值不能为负，受盒子的background属性影响。border:即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成。