猫说

前端面试题之CSS

2022/01/09 面试题

CSS面试常问知识点汇总

1、盒模型

CSS3中的盒模型有以下两种：标准盒子模型、IE盒子模型，这两种盒模型的主要区别是高度和宽度的计算不同

  1. 标准盒模型：盒模型 = content高度 + padding + border + margin；宽度同样
  2. IE盒模型：盒模型 = 高度（高度 = 盒子实际高度content + padding + border） + margin；宽度同样

可以通过修改元素的box-sizing属性来改变元素的盒模型：

  1. box-sizing: content-box表示标准盒模型（默认值）
  2. box-sizing: border-box表示IE盒模型（怪异盒模型）

2、选择器优先级

优先级从前往后排序为：

  1. !important声明的样式的优先级最高
  2. 内联样式：1000
  3. id 选择器：100
  4. 类选择器、伪类选择器、属性选择器：10
  5. 标签选择器、伪元素选择器：1

优先级的规则：

  1. 如果优先级相同，则最后出现的样式生效
  2. 继承得到的样式的优先级最低
  3. 优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式

3、line-height和height

先说height，是一个固定值，代表了当前盒子的固定高度。

line-height的理解：

  • 是一行文本的高，包含了字间距，实际是下一行基线到上一行基线的距离
  • 如果一个标签没有定义height属性，那么高度由line-height决定
  • 一个容器如果没有设置高度，那么容器的高度是line-height而不是文本内容
  • line-height定义的高度是一行的高度，如果文字有多行，盒子的高度会增大
  • line-height和height一样大小的值可以实现单行文字垂直居中

4、CSS属性继承

可继承的有：

  1. 字体属性：如字体类型、粗细、大小
  2. 文本属性：如行高、文本缩进、颜色、字间距
  3. 元素的可见性：visibility
  4. 列表布局属性：list-style
  5. 光标属性

不可继承的有：

  1. display
  2. 文本的一些处理的属性：
    1. text-shadow：阴影效果
    2. white-space：空白符的处理
    3. vertical-align：垂直文本对齐
  3. 盒模型的属性都不行：width、height、margin、border、padding
  4. 背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
  5. 定位：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
  6. 生产内容属性：content
  7. 轮廓样式属性：outline-style、outline-width、outline-color、outline
  8. 页面样式属性：size、page-break-before、page-break-after
  9. 声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

5、display

display的属性及值：

  1. none：元素不显示，并且从文档流中移除
  2. block：块类型，默认宽高为父级宽高，可设置
  3. inline：行内元素，默认为父级宽、不可以设置宽高
  4. inline-block：行内块，可以设置宽高，但是是同行显示
  5. list-item：像块级元素一样显示，并添加列表标记
  6. table：元素作为表格元素显示
  7. inherit：继承父级display的值

5.1 行内元素

  1. 不可以设置宽高
  2. 可以设置水平方向的margin和padding，不能设置垂直方向的
  3. 不会自动换行

5.2 块级元素

  1. 可以设置宽高
  2. 可以设置margin和padding
  3. 可以自动换行
  4. 多个块级元素，默认从上到下排列

6、隐藏元素的方法

  • display：none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。

  • visibility：hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。
  • opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
  • position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
  • z-index：-999：来使其他元素遮盖住该元素，以此来实现隐藏。
  • transform: scale(0,0)：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

6.1 display:none与visibility:hidden的区别

  1. 在渲染树种：
    1. display:none会让元素从渲染树中移除，不占据任何空间
    2. visibility:hidden不会从渲染树中移除，元素还在只是不可见
  2. 是否可以继承：
    1. display:none：不可以继承，子孙节点随着父节点消失而消失，没办法修改子节点显示
    2. visibility:hidden：继承，可以设置visibility:visible让子孙节点显示
  3. 修改常规文档流中元素的 display 通常会造成文档的重排，但是修改visibility属性只会造成本元素的重绘
  4. 如果使用读屏器，设置为display:none的内容不会被读取，设置为visibility:hidden的内容会被读取

7、link和@import的区别

两者都是外部引用CSS的方式，它们的区别如下：

  • link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
  • link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
  • link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
  • link支持使用Javascript控制DOM去改变样式；而@import不支持。

8、transition和animation的区别

transition是过度属性，强调过度，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧。

animation是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。它也类似于flash的补间动画，但是它可以设置多个关键帧（用@keyframe定义）完成动画。

9、伪元素和伪类的区别和作用

伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。

p::after {content:"Hot!";}

伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。

a:hover {color: red}

伪类是通过在元素选择器上加⼊伪类改变元素状态，⽽伪元素通过对元素的操作进⾏对元素的改变。

  • 单冒号:：是css3伪类
  • 双冒号::：是css3伪元素

10、requestAnimationframe

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。

该方法属于宏任务，所以会在执行完微任务之后再去执行。

window.requestAnimationFrame(callback);

取消动画：使用cancelAnimationFrame()来取消执行动画，该方法接收一个参数——requestAnimationFrame默认返回的id，只需要传入这个id就可以取消动画了。

优势：

  1. CPU节能：当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统走的RequestAnimationFrame也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了CPU开销。
  2. 函数节流：为了防止在一个刷新间隔内发生多次函数执行，RequestAnimationFrame可保证每个刷新间隔内，函数只被执行一次
  3. 减少DOM操作：requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。

11、CSS3新特性

新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）

圆角 （border-radius:8px）

多列布局 （multi-column layout）

阴影和反射 （Shadoweflect）

文字特效 （text-shadow）

文字渲染 （Text-decoration）

线性渐变 （gradient）

旋转 （transform）

增加了旋转,缩放,定位,倾斜,动画,多背景

12、CSS优化

  1. 加载性能
    1. CSS压缩
    2. css单一样式
    3. 减少使用!import
  2. 选择器性能
    1. 减少后代选择器的使用，最好不要超过三层
    2. 尽量少使用通配符
    3. 尽量少的类名，使用id
  3. 渲染性能
    1. 减少使用浮动、定位
    2. 减少页面的重排、重绘
    3. 标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。
    4. 不使用@import前缀，它会影响css的加载速度。
    5. 小而杂的图片内容使用雪碧图
    6. 尽量少使用web字体
  4. 可维护性
    1. 同种样式抽离
    2. 样式与内容分离

13、css预处理器、后处理器

  • 预处理器：如：less，sass，stylus，用来预编译sass或者less，增加了css代码的复用性。层级，mixin， 变量，循环， 函数等对编写以及开发UI组件都极为方便。
  • 后处理器：如： postCss，通常是在完成的样式表中根据css规范处理css，让其更加有效。目前最常做的是给css属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

好处：

  1. 可以很方便的屏蔽浏览器私有语法的差异
  2. 结构清晰， 便于扩展
  3. 可以轻松实现多重继承
  4. 完美的兼容了CSS代码，可以应用到老项目中

14、单行、多行文本溢出隐藏

// 单行
div{
  overflow: hidden;            // 溢出隐藏
  text-overflow: ellipsis;      // 溢出用省略号显示
  white-space: nowrap;         // 规定段落中的文本不进行换行
}

// 多行
div{
  overflow: hidden;            // 溢出隐藏
  text-overflow: ellipsis;     // 溢出用省略号显示
  display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
  -webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
  -webkit-line-clamp:3;        // 显示的行数
}

15、媒体查询

使用 @media 查询，可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是需要设置设计响应式的页面，@media 是非常有用的。当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

<!-- link元素中的CSS媒体查询 --> 
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> 
<!-- 样式表中的CSS媒体查询 --> 
<style> 
@media (max-width: 600px) { 
  .facet_sidebar { 
    display: none; 
  } 
}
</style>

16、CSS工程化

CSS 工程化是为了解决以下问题：

  1. 宏观设计：CSS 代码如何组织、如何拆分、模块结构怎样设计
  2. 编码优化：怎样写出更好的 CSS
  3. 构建：如何处理我的 CSS，才能让它的打包结果最优
  4. 可维护性：代码写完了，如何最小化它后续的变更成本？如何确保任何一个同事都能轻松接手？

以下三个方向都是时下比较流行的、普适性非常好的 CSS 工程化实践：

  • 预处理器：Less、 Sass 等；
  • 重要的工程化插件： PostCss；
  • Webpack loader 等 。

17、BFC 块级格式化上下文

BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。

创造BFC的条件：

  • 根元素：body；
  • 元素设置浮动：float 除 none 以外的值；
  • 元素设置绝对定位：position (absolute、fixed)；
  • display 值为：inline-block、table-cell、table-caption、flex等；
  • overflow 值为：hidden、auto、scroll；

BFC的特点：

  • 垂直方向上，自上而下排列，和文档流的排列方式一致。
  • 在BFC中上下相邻的两个容器的margin会重叠
  • 计算BFC的高度时，需要计算浮动元素的高度
  • BFC区域不会与浮动的容器发生重叠
  • BFC是独立的容器，容器内部元素不会影响外部元素
  • 每个元素的左margin值和容器的左border相接触

BFC的作用：

  • 解决margin的重叠问题：由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题。
  • 解决高度塌陷的问题：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把父元素变成一个BFC。常用的办法是给父元素设置overflow:hidden。
  • 创建自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。
.left{
     width: 100px;
     height: 200px;
     background: red;
     float: left;
 }
 .right{
     height: 300px;
     background: blue;
     overflow: hidden;
 }
 
<div class="left"></div>
<div class="right"></div>

18、浮动

非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。

浮动的原理：

  • 浮动元素碰到包含它的边框或者其他浮动元素的边框停留
  • 浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）

清除浮动：

  • 给父级div定义height属性

  • 最后一个浮动元素之后添加一个空的div标签，并添加clear:both样式

  • 包含浮动元素的父级标签添加overflow:hidden或者overflow:auto

  • 使用 :after 伪元素。由于IE6-7不支持 :after，使用 zoom:1 触发 hasLayout**

    .clearfix:after{
    content: "\200B";
    display: table; 
    height: 0;
    clear: both;
  }
  .clearfix{
    *zoom: 1;
  }

19、flex布局

任何一个元素都可以指定flex布局。设置flex布局之后，float clear和vertical-align属性将失效。

19.1 容器属性

就是设置在父级盒子上面的属性。

容器的排列属性：

  1. flex-direction：决定主轴的方向、即项目的排列方向。有四个值：
    1. row： 主轴为水平，起点在左端。
    2. row-reverse: 主轴为水平。起点在右端。
    3. column：主轴为垂直方向，起点在上端。
    4. column-reverse： 主轴为垂直方向，起点在下端。
  2. flex-wrap: 定义了如果一行放不下，是否换行，默认不换行，属性值有三个。
    1. nowrap： 不换行，默认值
    2. wrap： 换行，第一行在上面、
    3. wrap-reverse： 换行，第一行在下面
  3. flex-flow：是前两个属性的集合版。 flex-flow: flex-direction || flex-wrap；

容器的对齐属性：

  1. justify-content: 定义了项目在主轴(X轴)上的对齐方式。有五个值。
    1. flex-start： 左对齐，默认值。
    2. flex-end： 右对齐
    3. conter : 居中
    4. space-between: 两端对齐
    5. space-around: 每个元素的左右空隙都平分剩余空间。
  2. align-items: 定义项目在交叉轴(Y轴)上的对齐方式。有五个属性值。
    1. flex-start： 顶端对齐。
    2. flex-end： 底部对齐。
    3. conter： 居中
    4. baseline： 基线对齐
    5. stretch: 默认值，如果项目没有设置高度或者auto就默认占满整个容器的高度。
  3. align-content： 定义了如果有多根轴线的情况下的对齐方式，只有一根的话不生效，就是当设置了flex-wrap：wrap并且换行之后才生效。有6个值。
    1. flex-start： 与交叉轴的起点对齐
    2. flex-end： 与交叉轴的终点对齐
    3. center： 居中
    4. space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
    5. space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
    6. stretch： 默认值、轴线占满整个交叉轴。

19.2 项目属性

子节点上面的属性。

  1. order： 定义项目的排列顺序，值越小，排列越靠前，默认都是0.
  2. flex-grow： 定义项目的放大比例，设置每一项的占比，默认为0，即存在剩余空间也不放大。如果所有的项目都设置为1的话就是有剩余空间的情况下，每一项平方剩余空间。如果有一项为2，代表该项是为1的二倍。
  3. flex-shrink： 定义项目的收缩比例，默认为1，就是当空间不足的情况下，所有的都收缩，如果有某个设置为0的话，为0的不收缩。
  4. flex-basis： 定义了在分配剩余空间前，项目占据的空间，浏览器根据这个属性计算是否有多余空间，默认值是auto，即项目原本的大小，也可以设置具体的数值。
  5. flex：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
  6. align-self：允许单个项目与其他项目对齐方式不一样，可以覆盖align-items属性，默认值为auto，即继承父级的align-items属性，如果没有父元素，则等同于stretch。

20、rem和em、px

  • px: 固定的值，无论页面放大或者缩小都不会改变，但是是相对显示器屏幕分辨率而言的，不同设备dpr( 物理像素 / 独立像素)不同，低分辨率屏幕dpr=1，高分辨率屏幕>1
  • em: 相对父元素字体大小的倍数。如果父元素的字体为 12px，那么子元素 1em 就是 24px。由于是相对父级的倍数，所以多层嵌套时，倍数关系的计算会很头痛。
  • rem: 相对根元素字体大小的倍数。相对于 html 的字体大小，如果不做任何修改，浏览器默认字体大小为 16px。

可以使用Post css

Search

    Table of Contents