23.CSS 八股文问题

文章介绍了CSS盒模型的概念，包括标准盒模型和IE盒模型的区别，以及如何通过box-sizing属性来控制元素的盒模型。同时，文章还讨论了隐藏元素的几种方法，如display:none、opacity:0、visibility:hidden和position:absolute等。此外，还解释了px、rem和rpx三种长度单位的区别。最后，文章简要提到了重绘和回流的概念，但没有详细解释。评价：文章简洁明了地介绍了CSS盒模型和隐藏元素的方法，对于初学者来说很有帮助。但对重绘和回流的解释过于简略，建议进一步补充相关内容。

结果由AI生成

1.说一下CSS盒子模型？

html页面所有的元素都可看成是一个盒子，盒子组成：内容content(width.height)、内边距padding、边框border、外边距margin.

①  标准盒子模型：box-sizing:content-box(不写为默认)

盒子实际占用宽度 = width+padding+border+margin

②   IE盒子模型：box-sizing:border-box

盒子实际占用宽度 = width(padding+border包含在width中)+margin

2. 隐藏元素的方法？

①display:none 消失不占位置

②opacity:0 透明，还在

③visibility:hidden 不可见，还在

④position:absolute 通过定位到看不到的地方，仍占位

⑤clip-path 剪切，区域外隐藏 clip-path:circle(120px at center);剪切一个圆形区域。

3.px rem rpx区别?

px像素：绝对像素大小。

rem:  相对于根节点font-size数值。

rpx：微信小程序的像素，1px=2rpx。

4.怎么理解重绘和回流？

重排（回流）：渲染引擎根据所有样式计算出盒模型在页面的位置和大小。（强调计算位置）

重绘：计算好盒模型的位置、大小和其他一些属性后，根据盒子模型特征进行绘制。（强调绘制）

具体过程：解析html DOM树，解析CSS形成样式css树，DOM树和Css树结合成渲染树，计算位置大小（即回流），绘制到页面（重绘）。

5.元素垂直居中的方式有哪些？

①子绝父相，父元素设置宽高，不设置额外的boder和padding。子元素上下左右都是0,通过margin auto。

②子绝父相，top:50%;left:50%,transform:translate(-50%,-50%)左上角到中心点，再挪动自身的50%。

③flex布局,父元素display：flex;justify-content:center;align-items:center.

④grid布局，.parent { display: grid;place-items: center; /* 水平+垂直都居中 */}

⑤table布局，表格里面可以这样居中.parent {  display: table-cell; vertical-align: middle; /* 垂直居中,仅表格中生效 */text-align: center;     /* 可选：水平居中 */…}

6.CSS哪些属性可以继承？

1.字体font

2.文本，text,color,line-height..

3.元素可见性：visibility:hidden

4. 表格的布局属性：border-sapceing

5.列表的属性:list-style

6.页面样式属性：page（少见，@media print打印模式）

7.声音的样式属性：h1 { volume: loud; }      /* 响亮 */

7.是否使用过预处理器？

增加变量、函数、混入等强大功能

sass @myContent

less $myContent