大厂前端面试题总结（CSS篇）

系列文章

• 大厂前端面试题总结（Web安全篇）
• 大厂前端面试题总结（ES6篇）
• 大厂前端面试题总结（JS手写篇）
• 大厂前端面试题总结（JS理论篇）
• 大厂前端面试题总结（Vue篇）
• 大厂前端面试题总结（浏览器篇）
• 大厂前端面试题总结（性能优化篇）

CSS部分

目录
1、盒模型
2、垂直居中
3、三栏布局
4、CSS权重计算方式
5、BFC
6、清除浮动的方法
7、position属性（div布局方式）
8、Flex布局
9、实现一个自适应的正方形
10、实现一个三角形
11、CSS预处理器机制
2020.11.16补充
12、calc, support, media各自的含义及用法
13、1rem、1em、1vh、1px各自代表的含义
14、水平居中四种方式
15、画一条0.5px的直线？
16、行内元素有哪些？块级元素有哪些？空（void）元素有哪些？
17、页面导入样式时，使用link和@import有什么区别？
18、什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？？
2020.11.23
19、隐藏类有哪些
20、css的置换元素和非置换元素
2020.12.2
21、伪类和伪元素的区别（2020.12.18修）
2020.12.16
22、可继承的样式有哪些

1、盒模型

盒模型是Web页面布局的基本方式，它由 margin + border + padding + content 四部分组成。
在W3C标准（标准盒模型）中：width = content
在IE标准（怪异盒模型）中：width = content + padding + border
那么，在两种标准浏览器之间如何实现转换呢？
为了解决这个问题，在CSS3中增加了一个border-sizing属性：
当border-sizing: border-box时，是IE盒模型；
当border-sizing: content-box时，是W3C盒模型。

TIP：感谢qq_40360121、树笨无名博友的纠正

2、垂直居中

垂直居中的方式有十几种，但常用的方式有三种：第一种使用flex；第二种使用position + transform；第三种使用position + 负margin。

<div class='outer'>
	<div class='inner'>
	</div>
</div>

第一种：flex，outer中设置样式

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

第二种：position+transform，主要在inner中设置样式，inner宽高已知

.outer {
	position: relative;
}
.inner {
	position: absolute;
	width: 100px;
	height: 100px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

TIP：感谢rubbishmaker9527指正修改
第三种：position+负margin，主要在inner中设置样式，inner宽高已知

.outer {
	position: relative;
}
.inner {
	position: absolute;
	width: 100px;
	height: 100px;
	top: 50%;
	left: 50%;
	margin-top: -50%;
	margin-left: -50%;
}

扩展：
第四种：position+负margin，将四个方向的距离都设置成0，然后使用margin: auto;也可以实现

.outer {
	position: relative;
}
.inner {
	position: absolute;
	width: 100px;
	height: 100px;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

3、三栏布局

三栏布局是一种常见的布局方式。原理是中间固定，两边自适应。常用的有三种方式：

<div class="container">
	<div class="left"></div>
	<div class="main"></div>
	<div class="right"></div>
</div>

* {
  padding: 0;
  margin: 0;
}
.container {
  height: 500px;
}

第一种：flex

.container {
	display: flex;
}
.left {
	flex-bases: 200px
}
.right {
	flex-bases: 200px;
}
.main {
	flex: 1;
}

第二种：position

.left, .right, .main {
  position: absolute;
  height: inherit;
}

.left, .right {
  width: 200px;
}

.left {
  left: 0;
}

.right {
  right: 0;
}

.main {
  left: 200px;
  right: 200px;
}

第三种：float + margin

.left, .right {
  width: 200px;
  height: inherit;
}

.left {
  float: left;
}

.right {
  float: right;
}

.main {
  margin: 0 200px;
}

TIP：感谢树笨无名博友的纠正

4、CSS权重计算方式

CSS基本选择器包括：ID选择器、类选择器、标签选择器、通配符选择器。一般情况下按照：!importment > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符选择器。
但如果这几种选择器都作用一个元素时，该元素最后会采用哪种样式呢？常见的有两种方式：第一种采用二进制规则计算；第二种采用1，10，100，1000这种方式进行进行计算。我比较倾向于采用二进制方式进行权重计算比较。
权值计算方式

• 内联样式：1000；
• ID选择器：0100；
• 类选择器和伪类选择器：0010；
• 标签选择器和属性选择器：0001；
• 通配符选择器、子选择器和相邻选择器：0000；
• 继承的样式没有权值。

比较规则
层级相同，向后比较；层级不同，层级高的权重大，不论底层级有多少个选择器。

5、BFC

BFC 是 Block Formatting Context 的简称，翻译过来就是块级格式化上下文。

以下方式都会创建 BFC

• 根元素（ html ）
• 浮动元素（ float 值不为 none ）
• 绝对定位元素（ position 值为 absolution 或 fiexd ）
• 行内块元素（ display 值为 block ）
• 表格单元格（ display 值为 table-cell ， html 内表格单元格默认为该值）
• 表格标题（ display 值为 table-caption ，同上）
• 匿名表格单元格元素（ display 值为 table、table-row、table-row-group、table-header-group、table-footer-group（它们分别是 html 里的 table、row、tbody、thead、tfoot 的默认值）或 inline-table ）
• overflow 值不为 visible 的元素
• display 值不为 flow-root 的元素
• contain 值为 layout、content 或 paint 的元素
• 弹性元素（ display 值为 flex 或 inline-flex 元素的直接子元素）
• 网格元素（ display 值为 grid 或 inline-grid 元素的直接子元素）
• 多列容器（元素的 column-count 或 column-width 不为 auto ，包括 column-count 为 1 ） column-span 为all的元素始终会创建一个新的 BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome BUG）

BFC 布局规则

• 内部 box 会在垂直方向一个接一个的放置；
• box 垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻的 box margin 会发生重叠；
• 每个元素的左外边距与包含块的左边界相接触，即使浮动元素也如此；
• BFC 区域不会与 float 元素区域发生重叠；
• 计算 BFC 高度时，浮动元素子元素也参与计算；
• BFC 就是页面上一个独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

BFC 能够解决的问题

• 父元素塌陷
• 外边距重叠
• 清除浮动

6、清除浮动的方法

清除浮动的主要目的是为了解决父元素塌陷，比较常用的就是.clearfix伪类。

第一种：clearfix

<div class="outer clearfix">
	<div class="inner">
	</div>
</div>
.clearfix {
	display: block;
	height: 0;
	content: '';
	clear: both;
	visibility: hidden;
}

第二种：同级额外创建div，<div class=“clear”>

.clear {
	clear: both;
}

第三种：触发父元素BFC，overflow：hidden

7、Position属性（Div布局方式）

• absolute:绝对定位，相对于static以外第一个父元素进行定位；
• relative:相对定位，相对于自身进行定位；
• fixed:固定定位，相对于浏览器窗口进行定位；
• static:默认值，没有定位，元素出现在正常的流中；
• inherit:规定应该从父元素中继承position的属性。

一般情况下我们喜欢子绝父相，也就是父元素相对定位、子元素绝对定位这种布局方式。这种布局方式中，子元素相对于父元素padding属性进行定位。

在CSS3中新增加了一个position:sticky属性。这个属性的作用是”动态的“：当元素跨越特定阙值前为相对定位，之后为固定定位。元素的阙值指的是top、left、right、bottom其中之一，然后方可使粘性定位生效，否则其行为和绝对定位相同。但sticky尚处实验阶段。

8、Flex布局

父容器

• 主轴方向，flex-direction：row、row-reverse、column、column-reverse
• 换行方式，flex-wrap：nowrap、wrap、wrap-reverse
• 编写，flex-flow：flex-direction、flex-wrap，默认为row nowrap
• 主轴对齐方式，justify-content：flex-start、flex-end、center、space-between、space-around
• 交叉轴对齐方式，align-items：flex-start、flex-end、center、baseline、stretch
• 多根轴线对齐方式，align-content：flex-start、flex-end、center、space-between、space-around、stretch

子容器

• 在主轴上排列顺序order：默认为0，越小排列越靠前
• 放大比例flex-grow：默认为0，数值
• 缩小比例flex-shrink：默认为1，数值
• 基础尺寸flex-basis：默认为auto，可指定大小，例如100px
• 自己的对齐方式align-self：auto、flex-start、flex-end、center、baseline、stretch
• 编写flex：是flex-grow、flex-shrink、flex-basis的缩写，默认 0 1 auto
• flex：auto = flex： 1 1 auto
• flex：none = flex： 0 0 auto
• flex取值为单值： 1、无单位：flex-grow；2、有单位：flex-basis
• flex取值为双值： 1、无单位：grow&shrink；2、有单位：grow&basis

9、实现一个自适应的正方形

方式一：利用CSS3里面的vm单位

.square {
	width: 100vw; // or vh
	height: 100vw; // or vh
}

方式二：利用margin或padding的参考父元素的width属性按照百分比进行计算

.square {
	width: 10%;
	padding-bottom: 10%;
	height: 0; // 防止内容撑开多余的高度
}

10、实现一个三角形

方式一：利用盒模型的border属性上下左右交界框处会呈现出平滑斜线的这个特性，通过设置不同的上下左右边框宽度或颜色即可得到三角形或者梯形

.triangle {
	height: 0;
	width: 0;
	border-color: red blue green pink;
	border-style: solid;
	border-width: 30px;
}

如果想实现一个单独的三角形，只要将其他三块颜色设置成透明即可：

.triangle {
	height: 0;
	width: 0;
	border-color: red transparent transparent transparent;
	border-style: solid;
	border-width: 30px;
}

方式二：利用CSS3中的clip-path属性
clip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。clip-path属性详情链接

.triangle {
	width: 30px;
	height: 30px;
	background: red;
	clip-path: ploygon(0px 0px, 0px 30px, 30px 0px) //将坐标(0,0),(0,30),(30,0) 连成一个三角形
	transform: rotate(225deg) // 旋转225，变成下三角
}

11、CSS预处理器机制

为了适应当今网站复杂度，CSS预处理器应运而生。

CSS预处理器的作用：

1、文件切分
CSS预处理器扩展了@import指令的能力，通过编译环节将切分后的文件重新合并为一个大文件。这一方面解决了大文件不便维护的问题，另一方面也解决了一堆小文件在加载时的性能问题。

2、模块化
把文件切分的思路再向前推进一步就是“模块化”。一个大的CSS文件在合理切分之后，所产生的这些小文件相互关系应该是一个树形结构。
树形的根节点一般称为“入口文件”，属性的其他节点一般称为“模块文件”。入口文件通常会依赖多个模块文件，各个模块文件也可能会依赖其它更末端的模块，从而构成整个树形。示例：

entry.styl
├─ base.styl
│ ├─ normalize.styl
│ └─ reset.styl
├─ layout.styl
│ ├─ header.styl
│ │ └─ nav.styl
│ └─ footer.styl
├─ section-foo.styl
├─ section-bar.styl
└─ …
入口文件entry.styl在编译时会引入所需的模块，生成entry.css，然后被页面引用。

3、选择符嵌套
在CSS预处理语言中，嵌套语法可以很容易地表达出规则之间的层级关系，为单条生命写注释也很清晰易读。

.nav
   margin: auto  // 水平居中
   width: 1000px
   color: #333
   li
       float: left  // 水平排列
       width: 100px
       a
           display: block
           text-decoration: none

4、变量
变量让开发者更容易实现网站视觉风格的统一，也让换肤这样的需求变得轻松容易。

// 用 Stylus 来写
$color-primary = #ff4466
strong
   color: $color-primary
   font-weight: bold
/* ... */
.notice
   color: $color-primary

5、运算
运算可以让值与值之间建立关联。在CSS里面有些属性的值其实和其他属性的值是紧密相关，CSS语法无法表达这层关系；而在预处理语言中，我们可以用变量和表达式来呈现这种关系。

.wrapper
   $max-lines = 3
   $line-height = 1.5

   overflow: hidden
   line-height: $line-height
   max-height: unit($line-height * $max-lines, 'em')

变量可以是局部定义的变量，也可以从更上层的作用域获取：

$line-height = 1.5  // 全局统一行高
body
   line-height: $line-height
.wrapper
   $max-lines = 3
   max-height: unit($line-height * $max-lines, 'em')
   overflow-y: hidden

6、函数
把常见的运算操作抽象出来，我们就得到了函数。开发人员可以自定义函数，预处理器里也内置大量的函数。最常用的内置函数应该就是颜色的运算函数。

.button
   $color = #ff9833
   background-color: $color
   &:hover
       background-color: darken($color, 20%)

7、Mixin
Mixin的形态和用法跟函数十分相似——先定义，然后在需要的地方调用，在调用时可以接受参数。它与函数的不同之处在于：函数用于产生一个值，而Mixin的作用是产生一段CSS代码。Mixin可以产生多条CSS规则，也可以只产生一些CSS声明。

// 为 clearfix 定义一个 mixin
clearfix()
   ...
   &::after
       ...
// 在需要的元素身上调用
.info
   clearfix()
footer
   clearfix()

8、工程化
CSS预处理语言无法直接运行于浏览器环境，也就是编写的源码需要编译成CSS代码之后才能用于页面。但现在的前端开发流程已经包含了构建环节，所以开发只要按照标准写法即可，后期代码校验、代码压缩、代码后处理等让工具搞定就好了。

参考链接

12、calc, support, media各自的含义及用法

• @support：

用于检测浏览器是否支持CSS某个属性，即条件判断，如果支持某个属性，可以写一套样式，如果不支持某属性，提供另一套样式作为替补。
基本用法：

@support(prop:value){
	/*自己的样式*/
}
@supports (display: flex) { div { display: flex; }}

除此之外还支持逻辑运算符or、and 和 not及其混用
@supports (transition-property: color) or ((animation-name: foo) and (transform: rotate(10deg))){/*自己的样式 */}

calc()：用于计算动态函数值，支持“+”，“-”，“*”，“/”运算

• 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
• 任何长度值都可以使用calc()函数进行计算；
• calc()函数支持 “+”, “-”, “*”, “/” 运算；
• calc()函数使用标准的数学运算优先级规则；

@media：针对不同的媒体类型定义不同的样式

基本用法

@media mediatype and|not|only (media feature) {CSS-Code;}

参考链接

13、1rem、1em、1vh、1px各自代表的含义

• rem：相对于页面根元素元素，通常做法是给html元素设置一个字体大小，然后其他元素的大小就是相对于根元素的大小
• em：相对于父元素字体大小，元素的width/height/padding/margin用em的话是相对于该元素的font-size
• vw/vh：视窗的宽度和高度，相对于屏幕宽度和高度的1%，处理宽度的时候%单位更合适，高度vh更合适
• px:像素，相对于屏幕分辨率而言

参考链接

14、水平居中四种方式

• text-align方式
  text-align: center：文本居中
• margin方式
  margin: auto：content居中，非块级元素必须设置宽度
• flex方式
  justify-content: center：主轴对齐

其他几种方式参考上文：2、垂直居中

15、画一条0.5px的直线？

transform: scale(0.5,0.5); // 2D缩放转化

更多transform信息参考菜鸟教程链接：CSS3 transform 属性 | 菜鸟教程

16、行内元素有哪些？块级元素有哪些？空（void）元素有哪些？

• 行内元素：a、b、span、img、input、strong、select、label、em、button、textarea等
• 块级元素：div、ul、li、dl(定义列表)、p、h1-h6、blockquote(段落缩进)等
• 空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img等

参考文章

17、页面导入样式时，使用link和@import有什么区别？

• 差别1：老祖宗的差别
  link属于XHTML标签，而@import完全是css提供的一种方式。
  link标签除了可以加载css外，还可以做很多其他的事情，比如定义RSS，定义rel连接属性等，@import只能加载CSS。

• 差别2：加载顺序的差别
  当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再加载。所以有时候浏览@import加载CSS的页面时会没有样式（就是闪烁），网速慢的时候还挺明显。

• 差别3：兼容性的差别
  由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题，完全兼容。

• 差别4：使用dom控制样式时的差别。
  当时用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的（不支持）。

参考链接

18、什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

什么是FOUC(文档样式短暂失效)?

如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。

解决方法：

使用LINK标签将样式表放在文档HEAD中。

19、隐藏类有哪些

隐藏属性即通过css样式将元素隐藏起来。
常用的几种方式：

• 通过设置display: none
• 通过设置visibility: hidden
• 通过设置opacity: 0
• 通过将元素盒模型设置为：

  .hiddenBox {
      margin:0;
      border:0;
      padding:0;
      height:0;
      width:0;
      overflow:hidden;
  }
  

元素隐藏后的事件响应
元素隐藏后只有opacity: 0的元素可以触达点击事件，其他几种方式都不能触发点击事件；
通过JS以上任意一种方式都可以触发点击事件

CSS3 transition对这几种方法的影响(动画效果)

• display:none 完全不受transition属性的影响，元素立即消失
• visibility：hidden 元素消失的时间跟transition属性设置的时间一样，但是没有动画效果
• opacity 和 height 等属性能够进行正常的动画效果

20、css的置换元素和非置换元素

什么是置换元素

• 内容不受CSS视觉格式化模型控制
• CSS渲染模型并不考虑对此内容的渲染
• 一般元素本身拥有固定的宽高比的元素

行内级置换元素的宽度

• 行内级非置换元素：高度和宽度设置没有用，垂直方向上的margin、padding设置也没有用。
• 行内级置换元素：

  • 如果宽高或者宽的值为auto，且元素有固有的宽度，则width是此固有的宽度;

  • 如果宽度设置为auto，且不符合上述条件，则宽度的使用值为300px。

    如：iframe，canvas

  • 如果宽度设置为auto，但是高度有非auto的值，且元素有固定的宽高比： width = 高度 * 固定宽高比

    如img只设定了height，宽度会按比例计算

行内级置换元素的高度

• 行内级非置换元素
  高度和宽度设置是不适用，垂直方向上的margin、padding设置也没有用。
• 行内级置换元素
  • 如果宽高或者高的值为auto，且元素有固有的高度，则height是此固有的宽度
  • 如果高度设置为auto，但是宽度有非auto的值，且元素有固定的宽高比：height = 宽度 / 固定宽高比
  • 如果高度设置成auto，且不符合上述条件，则height的值不能大于150px，且宽度不能大于高度的2倍。

• 常见的行内置换元素
  <img>
<input>
<textarea>
<select>
<object>

21、伪类和伪元素的区别

伪元素

• 每条选择器最多只能包含一个伪元素
  

伪类

• 每条选择器可以包含多个伪类
• UI伪类选择器顺序：:hover、:foucs、:active
  

总结

• 伪元素的操作对象是新生成的dom元素，而不是原来dom结构里就存在的；而伪类恰好相反，伪类的操作对象是原来的dom结构里就存在的元素。

• 伪元素与伪类的根本区别在于：操作的对象元素是否存在于原来的dom结构里。

22、可继承的样式有哪些

继承就是指子节点默认使用父节点的样式属性。
不可继承的属性太多了不要背，记住可以继承的属性有哪些就行了。

• 可以继承的属性很少，只有颜色，文字，字体，间距，行高，对齐方式和列表的样式可以继承。
• 所有元素可继承：visibility和cursor。
• 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
• 终端块状元素可继承：text-indent和text-align。
• 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。