CSS基础面试题

CSS 的盒子模型

一个元素占有空间的大小由几个部分构成，其中包括

• 内容（content）

• 内边距（padding），内容与边框之间的距离

• 边框（border）

• 外边距（margin），边框与外部元素之间的距离

四个部分，这四个部分一起构成了盒子模型

盒模型分为： W3C 标准盒子 、IE 盒子

W3C 标准盒子（content-box）：内容盒子，现代浏览器中使用的都是正常盒模型content-box。一般设置元素的 width 只包含 内容的宽度，不包含 border，padding

CSS 设置为 content-box

box-sizing: content-box;

盒子总宽度 = margin + border + padding + width

IE 盒子（border-box）：一般设置的 width 包含 内容的宽度 + padding + border

CSS 设置为 border-box

box-sizing: border-box;

盒子总宽 = margin + width

BFC（块格式上下文）

块格式化上下文（Block Formatting Context，BFC）是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

BFC 的特性

1. BFC 可以看作一个独立的容器，容器内部的元素不会影响区块外部的元素布局
2. BFC 里面的元素从左到右，从上到下依次排列
3. 同一个 BFC，相邻的元素 margin 会发生重叠
4. BFC 里面如果有 float 元素，也可以撑开，避免高度坍塌

如何创建 BFC

下面介绍几个常见的创建 BFC 的方法

1. float 属性的值不为 none
2. position 属性的值为 absolute 或者 fixed
3. display 为 inline-block，flow-root，table-cell，table-caption，以及 table 相关的属性，例如 table-caption，table-row 等
4. overflow 属性值不为 visible
5. display 属性值为 flex ，grid ，inline-flex ，inline-grid

CSS解决高度坍塌的问题

什么是高度坍塌，就是父元素的子元素脱离了文档流，且它本身也没设置高度，那么它的高度就会为零

解决办法

1. 创建BFC，如何创建可以查看上面那道题
2. 新增一个空div元素或者伪元素，设置清除浮动，clear: both;

visibility: hidden 和 display: none 和 opacity: 0 有什么区别

三个属性都可以设置元素隐藏，但是控制元素隐藏的方式不一样

visibility: hidden

元素还是会渲染在文档流中，不会更改页面的布局，此时可以通过设置子元素的 visibility: visible 来控制子元素的展示，click 事件不会触发

display: none

元素包括子元素直接从 HTML 文档流删除，不参与排版，绑定的 click 事件也会丢失

opacity: 0

元素还是在文档流，不能控制子元素展示，绑定的 click 事件可以触发

CSS 选择器有哪些？

• id 选择器 #app
• 类选择器 .container
• 标签选择器 div, h1, p
• 子选择器 ul > li
• 后代选择器 h1 p
• 兄弟选择器 li ~ a
• 相邻兄弟选择器 li + a
• 属性选择器 a[rel="external"]
• 伪类选择器 a:hover, li:nth-child
• 伪元素选择器 ::before、::after
• 通配符选择器 *

CSS 选择器及其优先级

!important > 行内 > ID > CLASS ｜属性选择 > 伪元素 ｜ 标签

CSS 中哪些属性可以继承

• 字体相关，常见的有：font，font-size，font-family，font-weight 等等
• 文本相关，常见的有：line-height，color，text-align
• visibility: visible
• 列表，list-style
• 鼠标属性：cursor

什么是渲染层合并？

渲染层合并是浏览器在渲染 HTML 元素的时候，会创建多个层来绘制，然后在每个层绘制完成之后，再合并成一个完整的图层，最终渲染到屏幕上。