css高频面试题汇总（含答案）1、css盒模型所谓盒模型就是把HTML中的元素看作是一个矩形的盒子，包括内容（cont

1、css盒模型

所谓盒模型就是把HTML中的元素看作是一个矩形的盒子，包括内容（content）、内边距（padding）、边框（border）、外边距（margin）

css的盒子模型包括标准盒子模型和IE盒子模型（怪异模型）

标准盒子模型：box-sizing: content-box （默认）

width 是 content 内容，盒子的宽度是 content + padiing + border
IE盒子模型 box-sizing: border-box （常使用，方便还原设计稿）

width是content + padding + border这是三部分的宽度，盒子的宽度就是width

2、css 权重

!important > 行内样式 > ID选择器 > 类选择器 | 属性选择器 | 伪类选择器 > 元素选择器

权重规则总结:

1、!important 优先级最高，但也会被权重高的!important所覆盖

2、行内样式总会覆盖外部样式表的任何样式(除了!important)

3、单独使用一个选择器的时候，不能跨等级使css规则生效

例如：无论多少个class组成的选择器，都没有一个ID选择器权重高

4、如果两个权重不同的选择器作用在同一元素上，权重值高的css规则生效 5、如果两个相同权重的选择器作用在同一元素上：以后面出现的选择器为最后规则. 6、权重相同时，与元素距离近的选择器生效

其中通配符选择器 *，组合选择器 + ~ >，否定伪类选择器 :not() 对优先级无影响

通配符 * 权重固定为 0-0-0，组合符 +, ~, > 仅描述元素关系，不参与权重计算否定伪类 :not() 本身不增加权重，但括号内的选择器会正常计算优先级

建议：

避免使用!important;
利用id增加选择器权重;
减少选择器的个数（避免层层嵌套）;

参考阅读：你对CSS权重真的足够了解吗？

3、’+’ 与 ’~’ 选择器有什么不同

+ 选择器匹配紧邻的兄弟元素

~ 选择器匹配随后的所有兄弟元素

4、z-index 与层叠上下文

z-index用于设置元素的堆叠顺序，而层叠上下文则是决定这些z-index值如何相互作用的环境。

层叠上下文是一个三维的概念，它决定了页面中一组元素的堆叠顺序。每个层叠上下文都有自己的z-index层级，层叠上下文内的元素只会与同一上下文中的其他元素进行z-index比较，这也导致了z-index小的可能在z-index大的元素上。

如下图，组件1的z-index 可以比组件3的z-index小，但是组件1会在组件3上层

非定位元素： Non-positioned Element，也就是 position: static 元素；
定位元素：Positioned Element，也就是 position: relative|absolute|fixed|sticky 元素；
盒子：box，也称盒模型。文档树由元素组成，渲染树由盒子组成，实际元素大小、布局渲染操作的对象是盒子而不是元素。在构造渲染树时会为每个元素生成对应的盒子。**但盒子不一定全部由元素生成，**如：匿名盒子（anonymous box）不是由元素对应生成，而是渲染器根据规则自动生成。
非/定位盒子： Non-positioned/Positioned Element，非定位元素对应的是非定位盒子，定位元素对应的是定位盒子。
层叠上下文： Stacking Context，也称堆叠上下文，Z 轴的基本组成单位。层叠上下文与盒子的映射关系为 1:N，即每个层叠上下文可以有 N 个盒子。每个层叠上下文有一个父层叠上下文（除根层叠上下文）和 0~N 个子层叠上下文。 (这里能理解基本组成单位，就很好理解层叠上下文了)
根层叠上下文： Root Stacking Context，根盒子（html|body对应的盒子）对应的层叠上下文，是其他层叠上下文的祖先上下文，根层叠上下文的范围覆盖整条 Z 轴。
层叠等级： Stack Level，也有称层叠水平、层叠层级，当 N 个盒子位于同一个层叠上下文中，则通过层叠等级来决定它们位于 Z 轴上的位置。
层叠顺序： Stacking Order，表示元素发生层叠时特定的垂直显示顺序。

<section>
    <div style="position: relative; background: red; z-index: 10;">
        <p style="position: relative; background: orange; z-index: -999;"></p>
    </div>
    <div style="position: relative; background: darkviolet; z-index: 8;"></div>
    <div style="position: relative; background: darkturquoise; z-index: 9;"></div>
</section>

对于定位元素而言，若 z-index 属性值不是 auto，则会创建一个新的层叠上下文，并且其子孙盒子将属于这个新层叠上下文，因此，橙色（-999）实际是跟父盒子在同一层叠上下文，它比青色（9）、紫色（8）更靠近用户。

强烈推荐阅读：# 由Z Index引发的层叠上下文思考

5、BFC 块级格式化上下文

说到BFC，一定要先聊一聊浮动和浮动塌陷，这是因为 BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。

BFC 会阻止外边距折叠（ CSS探索系列之Margin ）

当两个相邻的块框在同一个块级格式化上下文中时，它们之间垂直方向的外边距可能会发生叠加。换句话说，如果这两个相邻的块框不属于同一个块级格式化上下文，那么它们的外边距就不会叠加。
BFC 不会重叠浮动元素

BFC 内的浮动不会影响其它 BFC 中元素的布局，而 clear 属性只能清除同一 BFC 中在它前面的元素的浮动。
BFC 通常可以包含浮动，即计算 BFC 的高度时，浮动元素也参与计算

独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，也就是说父元素会把浮动元素的高度也计算在内，所以不用清除浮动来撑起高度。同时 BFC 仍然属于文档中的普通流。

也就是说，如果父元素创建了 BFC，就可以闭合浮动，避免浮动塌陷现象

强烈推荐阅读： # 由浮动塌陷引发的块级格式上下文思考

6、实现水平垂直居中

水平垂直居中是最常见的布局之一，其实现有很多种方式，可按照具体情况使用，例如元素是定宽定高、不定宽不定高。

/* 公共代码 */
.wp {
    border: 1px solid red;
    width: 300px;
    height: 300px;
}

.box {
    background: green;    
}

.box.size{
    width: 100px;
    height: 100px;
}
/* 公共代码 */

确定宽高：

绝对定位 + 负margin

先通过绝对定位，将左上角定在父盒子中心点，然后使用负margin偏移宽高的一半达到中心对其的效果。


/* 定位代码, 父相子绝 */
.wp {
    position: relative;
}

.box {
    position: absolute;;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

绝对定位 + margin: auto

（margin： auto的作用是自动均分剩余空间）


/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

绝对定位 + calc

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

绝对定位 + transform

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

padding填充

使用较少，这里就不列举具体代码了

不定宽高

flex布局

flex作为现代的布局方案，颠覆了过去的经验，只需几行代码就可以优雅的做到水平垂直居中

.wp {
    display: flex;
    justify-content: center;
    align-items: center;
}

flex 布局 + margin: auto;

参考阅读：css flex布局中妙用margin: auto

.wp {
    display: flex;
}

.box {
    margin: auto;
}

grid 网格布局

.wp {
    display: grid;
}
.box {
    align-self: center;
    justify-self: center;
}

7、左侧固定，右侧自适应

flex 布局

左侧写死宽度，右侧使用 flex：1 表示 flex-grow: 1; flex-shrink: 0

.box1 {
   display: flex;
}

.box1 .item_right {
   flex: 1;
}

grid 布局

.container { 
   display: grid; grid-template-columns: 300px 1fr;
}

浮动布局等

8、三栏均分布局

flex:
- 方案一: flex: 1;
- 方案二: flex-basis: calc(100% / 3)
grid:
- 父容器: grid-template-columns: 1fr 1fr 1fr

9、如何画一个正方形或者长宽固定的长方形

现代的方法是设置 aspect-ratio 纵横比

#box {
  border: 1px solid black;
  width: 200px;
  background: #9af;
  aspect-ratio: 1/1;
}

10、CSS 如何避免样式冲突

1、使用BEM命名规范，通过将类名结构化来避免冲突

.block {}
.block__element {}
.block--modifier {}

2、css Modules CSS Modules 入门教程

CSS Modules 将类名局部化，确保样式只在特定组件内生效。例如：

/* styles.module.css */
.title {
  color: red;
}

3、style 添加 scoped 刨根问底，揭开 Vue 中 Scope CSS 实现的幕后（原理）

11、css 变量

css变量减少样式重复定义，比如同一个颜色值要在多个地方重复使用，以前通过less和sass预处理做到，现在css变量也可以做到，方便维护，提高可读性

:root{
  --bgcolor: blue;
  --color: red;
}
p {
  color: var(--color);
}
div {
  backgroung-color: var(--bgcolor);
  color: var(--color)
}

12、CSS 配置暗黑模式

/* 深色模式 */
@media (prefers-color-scheme: dark) {
    body { background: #333; color: white; }
}
/* 浅色模式 */
@media (prefers-color-scheme: light) {
    body { background: white; color: #333; }
}

// 是否支持深色模式
// 返回true或false
window.matchMedia("(prefers-color-scheme: dark)").matches;

vueUse工具库提供了 useDark 这个 api，观察源码发现，底层使用的就是上面这一套

参考阅读：几行CSS让整站支持深色模式的探索与拓展

12、什么是CSS的继承性，哪些属性可继承，哪些不可以？

CSS 的继承性是指某些样式属性可以从父元素传递到其子元素，使得子元素继承父元素的样式属性。这意味着，如果父元素上设置了特定的样式，子元素可能会自动继承这些样式，而无需显式地在子元素上设置相同的样式。
可继承的属性

文字相关属性： font-family、font-size、font-weight、font-style 等。
颜色属性： color、background-color。
文本相关属性： line-height、text-align、text-transform 等。
链接相关属性： text-decoration、link、visited、hover、active 等。
列表属性： list-style-type、list-style-image 等。
表格属性： border-collapse、border-spacing 等。
元素显示属性： display、visibility。
百分比属性：某些属性（如 padding、margin）中的百分比值可以继承。

不可继承的属性

盒模型属性： width、height、margin、padding、border 等。
定位和布局属性： position、top、right、bottom、left、float、clear 等。
背景属性： background-image、background-position、background-repeat 等。
定位属性： z-index。
轮廓属性： outline、outline-width、outline-style、outline-color。
文字选择属性： user-select、cursor。
表格属性： table-layout、border-collapse、border-spacing。
元素显示属性： display、visibility。

css高频面试题汇总（含答案）