CSS专栏

前置知识：盒子模型 box-sizing: border-box 实际宽度 = width = content + padding + border 代码：此时为border-box 内容宽度为250

px和% px是基本单位，绝对单位（其他都是相对单位） %相对于父元素（dom树上的节点的父元素）的宽度比例 em和rem em是相对于当前元素的font-size rem相对于根节点的font-si

父元素： 关于二维布局方式： grid-template-columns属性： 效果： grid-template-areas属性： 效果： 如果行轨道和列轨道的尺寸小于grid容器，还可以对轨道进行

总结： 1. 选择器越具体，优先级越高 2. 相同优先级，出现在后面的，覆盖前面的 3. 属性后面加!important的优先级最高，但是要少用 具体优先级计算网站： http://www.ayqy.

为什么要清除浮动 元素浮动后会脱离标准流，此时不会影响块级元素的布局，此时标准流会当作浮动元素不存在，所以当包含浮动元素的包含框小于浮动元素的时候，就会出现高度塌陷，所以需要解决高度塌陷问题。 如何清

第一种盒模型为content-box（W3C标准，即浏览器默认标准） 即width指定的是内容部分的宽度，而非实际宽度 $实际宽度= width + padding + margin$ 第二种盒模型为

BFC是什么 Block Formatting Context ：块级格式化上下文 BFC是一个完全独立的空间，空间里的子元素完全不会影响到外面的布局。 总结：BFC：块级格式化上下文 怎么做：触发B

以下是总结的九种实现垂直居中方式，清晰明了 居中元素定宽高适用👇 以下代码实现的效果均如此图所示： 1. absolute + 负margin html： css： 2. absolute + mar