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

CSS相关专题

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

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

说一下 css 盒模型

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

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

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

怪异盒模型：一个块的总宽度=width+margin（左右）（既 width 已经包含了 padding 和 border 值）

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/浏览器专题