CSS 面试问题全集盒模型:如何有效给原素设定 z

在当代前面中，招聘面试针对 CSS 考察规定比较低，几乎无法与 JavaScript 一概而论，根本无法与 JavaScript 的某一细分化专题讲座一概而论。

本文中列出了多个 CSS 面试问题，可应对绝大多数企业的 CSS 招聘面试。

有关大量 CSS 面试问题，可以查看 CSS 面试问题全集

盒模型

• 题型：概述 CSS 的盒模型

CSS 的盒模型关键包括以下二种，可以通过 box-sizing 特性开展配备：

• content-box：默认设置特性。width 只包括 content
• border-box：width 包括 (content、padding、border)

CSS specificity (权重值)

• 题型：概述下 css specificity

css specificity 即 css 中有关选择符的权重，下列三种类型的选择符先后降低

1. id 选择符，如 #app
2. class、attribute 与 pseudo-classes 选择符，如 .header、[type="radio"] 与 :hover
3. type 标识选择符和伪元素选择器，如 h1、p 和 ::before

在其中使用通配符选择符 *，组成选择符 ~ >，否认伪类选择器 :not() 对优先无影响

还有另外内联款式 <div class="foo" style="color: red;"></div> 及 !important(最大) 具有更高的权重值

:not 的优先危害 - codepen 能够得知 :not 对选择符的优先没有任何危害

CSS Specificity - codepen 能够得知十几个 class 选择符也没有一个 id 选择符权重值高

填补难题:

1. 100 个 class 选择符和 id 选择符那一个非常高
2. 属性选择器和类选择器哪一个权重值比较高
3. 使用通配符选择符和原素选择符哪一个权重值教高

' ' 与 '~' 选择符有什么区别

• 【Q315】' ' 与 '~' 选择符有什么区别

• 选择符配对相邻的好兄弟原素

• ~ 选择符配对接着的所有哥们原素

z-index 与层叠上下文

• 题型：如何有效给原素设定 z-index
• 题型：z-index: 999 原素一定会放置 z-index: 0 原素以上吗

z-index 高标值一定在低标值前面吗，div 等级如下所示

• A -> 3
  • AA -> 1000
• B -> 4
  • BB -> 10

编码见 zindex - codepen

不一定，更复杂的实例见 层叠上下文 - MDN

水准居中

• 题型: 如何做到一个元素水准居中
• 编码: absolute/translate

宽高比不确定的小块原素水准居中，由此可见下列实例

• absolute/translate

并提供几类不一样思路：

• flex:
  • justify-content: center
  • align-content: center
• grid
  • place-items: center
• absolute/translate
  • position: absolute
  • left/top: 50%
  • transform: translate(50%)
• ##absolute/inset##

左边固定不动、右边响应式

• 题型: css 如何做到左边固定不动300px，右边自适应的合理布局
• 编码: 编码

给予 flex 与 grid 规划的二种构思

• flex:
  • 左边: flex-basis: 200px
  • 右边: flex-grow: 1; flex-shrink: 0;
• grid
  • 父器皿: grid-template-columns: 200px 1fr;

.container
  .left
  .main

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

三栏平均分合理布局

• 题型: 如何做到三列平均分合理布局
• 编码: 如何做到三列平均分合理布局

一样给予 flex 与 grid 的这两种计划方案

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

进一步难题：如何做到十六列平均分合理布局？

如何画一个正方形/宽度固定长方型

• 难题：如何画一个正方形/宽度固定长方型

以往解决方案是采用 padding。一个元素 padding 倘若设为百分数，则代表的要以父元素宽度为标准，按照这个基本原理，可以设置宽高比。可事实上实际意义比较有限，终究你将 padding 给占，content 没有任何地区。

智能化解决方案是采用宽高比的 CSS 特性: aspect-ratio。

CSS 怎样避免款式矛盾

• 题型：写 CSS 时怎样避免取名款式矛盾

1. BEM 式: .home-page .home-page-btn

.home-page {
  .home-page-btn {}
}

BEM 有一个缺陷，可能有些过长，应适当简单化，只包囊该网页页面元件的茎类名，但是很有可能提升款式矛盾的风险性

.home-page {
  .btn {}
}

2. CSS Scoped

scoped css 会让现阶段部件(scope)下所有元素形成唯一的特性或类名，对每一个 CSS 标准将带上唯一特性完成修饰符的取名维护

// 手动式写
.btn {}

// 编译程序后
.btn .jsx-1287234 {}

3. CSS Module

• css-modules repo
• css-modules demo

module css 会让类名开展 hash 化

CSS 自变量

• 题型：是否有用过 css variable，它克服了什么样的问题

:root{
  --bgcolor: #aaa;
  --color: #000;
}

CSS 配备暗黑模式

• 题型：怎么使用 CSS 完成页面的暗黑模式 (Dark Mode)

最通俗点说，可以通过媒体查询 @media (prefers-color-scheme: dark) 与 CSS 自变量完成。

@media (prefers-color-scheme: dark) {
    :root{
    }
}