2021年最新web前端面试题及答案：CSS相关专题

绝地灬酷狼 2023-01-22 11:57 5阅读 0赞

## CSS相关专题 ##

本章节面试题与CSS相关，以专题形式推出便于各个击破。

[2021年最新web前端面试题及答案：HTTP/HTML/浏览器专题][2021_web_HTTP_HTML]

#### 说一下 css 盒模型 ####

CSS 中的盒子模型包括 IE 盒子模型和标 准的 W3C 盒子模型。

CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充， 和实际内容。

标准盒模型：一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)

怪异盒模型：一个块的总宽度=width+margin（左右）（既 width 已经包含了 padding 和 border 值）  
![在这里插入图片描述][7c018ee013f78769de33061b8c49ae61.png_pic_center]

#### BFC（块级格式化上下文，用于清楚浮动，防止 margin 重叠等） ####

直译成：块级格式化上下文，是一个独立的渲染区域，并且有一定的布局规则。 BFC 区域不会与 float box 重叠 BFC 是页面上的一个独立容器，子元素不会影响到外面 计算 BFC 的高度时，浮动元素也会参与计算 那些元素会生成 BFC： 根元素 float 不为 none 的元素 position 为 fixed 和 absolute 的元素 display 为 inline-block、table-cell、table-caption，flex，inline-flex 的元素 overflow 不为 visible 的元素

**一、BFC的概念？**

BFC（块级格式上下文）：它是页面中的一块渲染区域，有自己的渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用

**二、BFC的原理？**

内部的Box会在垂直方向，一个接一个地放置  
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠  
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反  
BFC的区域不会与float box重叠  
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素  
计算BFC的高度时，浮动元素也参与计算

**三、如何创建BFC？**

根元素，即HTML元素  
float的值不为none  
overflow的值不为visible  
display的值为inline-block、table-cell、table-caption  
position的值为absolute或fixed

**四、BFC的使用场景？**

去除边距重叠现象  
清除浮动（让父元素的高度包含子浮动元素）  
避免某元素被浮动元素覆盖  
避免多列布局由于宽度计算四舍五入而自动换行

#### 垂直居中的方法 ####

(1)margin:auto 法 
    css: 
    div{ 
        width: 400px; 
        height: 400px; 
        position: relative; 
        border: 1px solid #465468; 
    }
    img{ 
        position: absolute; 
        margin: auto; 
        top: 0; 
        left: 0; 
        right: 0; 
        bottom: 0; 
    }
    
    html: 
    <div>
        <img src="mm.jpg"> 
    </div>
    定位为上下左右为 0，margin：0 可以实现脱离文档流的居中.
    
    (2)margin 负值法 
    .container{ 
        width: 500px; 
        height: 400px; 
        border: 2px solid #379; 
        position: relative; 
    }
    .inner{ 
        width: 480px; 
        height: 380px; 
        background-color: #746; 
        position: absolute; 
        top: 50%; 
        left: 50%; 
        margin-top: -190px; /*height 的一半*/ 
        margin-left: -240px; /*width 的一半*/ 
    }
    补充：其实这里也可以将 marin-top 和 margin-left 负值替换成， 
    transform：translateX(-50%)和 transform：translateY(-50%)
    
    (3)table-cell（未脱离文档流的） 设置父元素的 display:table-cell,
    并且 vertical-align:middle，这样子元素可以实现垂直居中。 
    css: 
    div{ 
        width: 300px; 
        height: 300px; 
        border: 3px solid #555; 
        display: table-cell; 
        vertical-align: middle; 
        text-align: center; 
    }
    img{ 
        vertical-align: middle; 
    }
    
    (4)利用 flex 将父元素设置为 display:flex，
    并且设置 align-items:center;justify-content:center;
    css:
    .container{ 3width: 300px; 
        height: 200px; 
        border: 3px solid #546461; 
        display: -webkit-flex; 
        display: flex; 
        -webkit-align-items: center; 
        align-items: center; 
        -webkit-justify-content: center; 
        justify-content: center; 
    }
    .inner{ 14border: 3px solid #458761; 15padding: 20px; 16}

#### 说一下块元素和行元素 ####

块元素：独占一行，并且有自动填满父元素，可以设置 margin 和 pading 以及高度和宽 度行元素：不会独占一行，width 和 height 会失效，并且在垂直方向的 padding 和 margin 会失效。

#### 多行元素的文本省略号 ####

display: -webkit-box 
    -webkit-box-orient:vertical 
    -webkit-line-clamp:3 
    overflow:hidden

#### CSS3 中对溢出的处理 ####

cnkOhu text-overflow 属性，值为 clip 是修剪文本；ellipsis 为显示省略符号来表被修剪的文本； string 为使用给定的字符串来代表被修剪的文本。

#### 使元素消失的方法有哪些？ ####

visibility=hidden, opacity=0，display:none

1.  opacity：0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定 一些事件，如 click 事件，那么点击该区域，也能触发点击事件的
2.  visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
3.  display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉。

#### position 属性 比较 ####

**固定定位 fixed：** 元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定 位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。  
**相对定位 relative：** 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直 或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是 否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。  
**绝对定位 absolute：** 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那 么它的位置相对于。absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。  
**粘性定位 sticky：**  
元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定 位，之后为固定定位。  
**默认定位 Static：**  
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声 明）。 inherit: 规定应该从父元素继承 position 属性的值。

#### 浮动清除 ####

方法一：使用带 clear 属性的空元素 在浮动元素后使用一个空元素如`<div class="clear"></div>`，并在 CSS 中赋 予.clear\{clear:both;\}属性即可清理浮动。亦可使用`<br class="clear" />`或`<hr class="clear" />`来进行清理。

方法二：使用 CSS 的 overflow 属性 给浮动元素的容器添加 overflow:hidden;或 overflow:auto;可以清除浮动，另外在 IE6 中还 需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。 在添加 overflow 属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动 的效果。

方法三：给浮动的元素的容器添加浮动 给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影 响布局，不推荐使用。

方法四：使用邻接元素处理 什么都不做，给浮动元素后面的元素添加 clear 属性。

方法五：使用 CSS 的:after 伪元素 结合:after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。 给浮动元素的容器添加一个 clearfix 的 class，然后给这个 class 添加一个:after 伪元素实 现元素末尾添加一个看不见的块元素（Block element）清理浮动。

参考:https://www.cnblogs.com/ForEvErNoME/p/3383539.html

#### css3 新特性 ####

开放题。CSS3 边框如 border-radius，box-shadow 等；CSS3 背景如 background-size， background-origin 等；CSS3 2D，3D 转换如 transform 等；CSS3 动画如 animation 等。 参考 https://www.cnblogs.com/xkweb/p/5862612.html

#### CSS 选择器有哪些，优先级呢 ####

id 选择器，class 选择器，标签选择器，伪元素选择器，伪类选择器等 同一元素引用了多个样式时，排在后面的样式属性的优先级高； 样式选择器的类型不同时，优先级顺序为：id 选择器 > class 选择器 > 标签选择器； 标签之间存在层级包含关系时，后代元素会继承祖先元素的样式。如果后代元素定义了 与祖先元素相同的样式，则祖先元素的相同的样式属性会被覆盖。继承的样式的优先级 比较低，至少比标签选择器的优先级低； 带有!important 标记的样式属性的优先级最高； 样式表的来源不同时，优先级顺序为：内联样式> 内部样式 > 外部样式 > 浏览器用户 自定义样式 > 浏览器默认样式

#### css 动画如何实现 ####

创建动画序列，需要使用 animation 属性或其子属性，该属性允许配置动画时间、时长 以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是 由 @keyframes 规则实现，具体情况参见使用 keyframes 定义动画序列小节部分。 transition 也可实现动画。transition 强调过渡，是元素的一个或多个属性发生变化时产生 的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种改变发生 （例如 hover）时才能获取样式，这样就会产生过渡动画。

#### 了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有 哪些方法 ####

DOM 的变化影响到了预算内宿的几何属性比如宽高，浏览器重新计算元素的几何属性， 其他元素的几何属性也会受到影响，浏览器需要重新构造渲染书，这个过程称之为重排， 浏览器将受到影响的部分重新绘制在屏幕上 的过程称为重绘，引起重排重绘的原因有： 添加或者删除可见的 DOM 元素， 元素尺寸位置的改变 浏览器页面初始化， 浏览器窗口大小发生改变，重排一定导致重绘，重绘不一定导致重排， 减少重绘重排的方法有： 不在布局信息改变时做 DOM 查询， 使用 csstext,className 一次性改变属性 使用 fragment 对于多次重排的元素，比如说动画。使用绝对定位脱离文档流，使其不影响其他元素

#### box-sizing 的语法和基本用处 ####

box-sizing 规定两个并排的带边框的框，语法为 box-sizing：content-box/border-box/inherit

content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边 距和边框

border-box：为元素设定的宽度和高度决定了元素的边框盒， inherit：继承父元素的 box-sizing

#### css 布局 ####

六种布局方式总结：圣杯布局、双飞翼布局、Flex 布局、绝对定位布局、表格布局、网 格布局。

圣杯布局是指布局从上到下分为 header、container、footer，然后 container 部分定为三栏 布局。这种布局方式同样分为 header、container、footer。圣杯布局的缺陷在于 center 是 在 container 的 padding 中的，因此宽度小的时候会出现混乱。

双飞翼布局给 center 部分包裹了一个 main 通过设置 margin 主动地把页面撑开。

Flex 布局是由 CSS3 提供的一种方便的布局方式。

绝对定位布局是给 container 设置 position: relative 和 overflow: hidden，因为绝对定位的元 素的参照物为第一个 postion 不为 static 的祖先元素。 left 向左浮动，right 向右浮动。 center 使用绝对定位，通过设置 left 和 right 并把两边撑开。 center 设置 top: 0 和 bottom: 0 使其高度撑开。

表格布局的好处是能使三栏的高度统一。

网格布局可能是最强大的布局方式了，使用起来极其方便，但目前而言，兼容性并不好。 网格布局，可以将页面分割成多个区域，或者用来定义内部元素的大小，位置，图层关 系。

#### css 预处理器有什么 ####

less，sass 等

[2021年最新web前端面试题及答案：HTTP/HTML/浏览器专题][2021_web_HTTP_HTML]

[2021_web_HTTP_HTML]: https://blog.csdn.net/kongcheng_001/article/details/117035647
[7c018ee013f78769de33061b8c49ae61.png_pic_center]: /images/20221020/a68c8e78d6ee4ff89e292dfc6e5ed0cd.png