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

admin管理员组

文章数量:1794759

大厂前端面试题总结（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。

本文标签： 面试题css