前端面试题之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预处理器、后处理器

  • 预处理器:如:lesssassstylus,用来预编译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