2022年Web前端开发面试题-CSS篇汇总
常见css面试题
1、标准盒模型和IE盒模型两者的区别是什么？
标准的(W3C)盒模型：元素的实际宽度等于设置的宽高 + border + padding (默认方式)
IE盒模型： 元素的实际宽度就等于设置的宽高，即使定义有 border 和 padding 也不会改变元素的实际宽度，即 ( Element width = width )
2、怎么设置这两种模型呢？
很简单，通过设置 box-sizing就可以达到自由切换的效果。
box-sizing:content-box;(标准)box-sizing:border-box;(IE)
3、描述一下下面盒子的大小，颜色什么的（content-box模型）
考查点：
整个盒子的大小
padding的颜色
border的颜色
height为0了，看得见盒子吗？
整个盒子的大小(内容区) = 0 （因为height为0）
padding的颜色 = pink（默认背景色蔓延到padding和border区域）
border的颜色 = blue（会继承color字体的颜色，默认为black）
height为0了，看得见盒子吗？（虽然height为0，但是看得见盒子，因为有border和padding）
这里需要注意：
如果没有写border-style，那么边框的宽度不管设置成多少，都是无效的。
border-color的颜色默认跟字体颜色相同
padding颜色跟背景颜色相同
4、当元素设置成inline-block会出现什么问题？怎么消除？
inline-block元素水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子：
去除inline-block元素间间距的N种方法
元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了。考虑到代码可读性，显然连成一行的写法是不可取的，我们可以：
或者使用font-size:0
5、行内元素可以设置padding，margin吗？
行内元素的margin左右有效，上下无效。
行内元素的padding左右有效 ，但是由于设置padding上下不占页面空间，无法显示效果，所以无效。
6、什么是边距重叠？什么情况下会发生边距重叠？如何解决边距重叠？
边距重叠：两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。
边距重叠分为两种：
同级关系的重叠：
同级元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个
父子关系的边距重叠：
嵌套崩塌
父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距。
给父元素添加overflow：hidden 这样父元素就变为 BFC，不会随子元素产生外边距。
7、什么是BFC？
BFC的基本概念–BFC就是“块级格式化上下文”的意思，也有译作“块级格式化范围”。
它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。
通俗的讲，就是一个特殊的块，内部有自己的布局方式，不受外边元素的影响。
8、那么BFC的原理（规则）是什么呢？
内部的Box会在垂直方向上一个接一个的放置
垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关。）
每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然
9、BFC由什么条件创立?
float属性不为none
position属性为absolute或fixed
display属性为inline-block、table-cell、table-caption、flex、inline-flex
overflow属性不为visible（overflow: auto/ hidden;）
10、BFC的使用场景
(1) 清除元素内部浮动
只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式，对于IE6加上zoom:1就可以了。
主要用到
计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。
(2) 解决外边距合并问题(嵌套崩塌)
外边距合并的问题。
主要用到
盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
属于同一个BFC的两个相邻盒子的margin会发生重叠，那么我们创建不属于同一个BFC，就不会发生margin重叠了。
(3) 制作右侧自适应的盒子问题
主要用到
普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文
11、清除浮动影响的方法？
11.1额外标签法（在最后一个浮动标签后，新加一个块标签，给其设置clear：both；）
11.2 父级添加overflow属性（父元素添加overflow:hidden）
通过触发BFC方式，实现清除浮动
11.3 使用after伪元素清除浮动（推荐使用）
12、块元素居中
一般常见的几种居中的方法有：
对于宽高固定的元素
（1）我们可以利用margin:0 auto来实现元素的水平居中。
（2）利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水
平和垂直方向上的居中。
（3）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素
的中心点到页面的中心。
（4）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素
的中心点到页面的中心。
（5）使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对
齐，然后它的子元素也可以实现垂直和水平的居中。
对于宽高不定的元素，后面两种方法，可以实现元素的垂直和水平的居中。
13、CSS 选择器有哪些？
14、CSS 优先级算法如何计算？
当设置样式冲突时,选择器优先级高的设置的样式生效!
从高往低: !important > 行内样式 > id选择器 > class选择器 > 标签选择器 > 通配符和继承属性
组合选择器的权重是累加
!important的使用
p{
font-size:24px !important;
}
/* 对于选中的p元素,字号强制设置为24px,比行内样式优先级要高 */
15、position的属性有哪些，区别是什么？
position有以下属性值：
16、对 sticky 定位的理解
sticky 英文字面意思是粘贴，所以可以把它称之为粘性定位。语法：position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative;
而当页面滚动超出目标区域时，它的表现就像 position:fixed;它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom, left 之一，换言之，指定 top, right, bottom, left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
17、CSS 优化、提高性能的方法有哪些？
加载性能：
css压缩：将写好的css进行打包压缩，可以减小文件体积。
css单一样式：当需要下边距和左边距的时候，很多时候会选择使用margin-left:20px;margin-bottom:30px;
减少使用@import，建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。
选择器性能：
关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；
如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）。
尽量少的去对标签进行选择，而是用class。
尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。
了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。
渲染性能：
属性值为0时，不加单位。
可以省略小数点之前的0。
标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。
选择器优化嵌套，尽量避免层级过深。
css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用。
不滥用web字体。对于中文网站来说WebFonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。
可维护性、健壮性：
将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。
样式与内容分离：将css代码定义到外部css中。
18、元素的层叠顺序？
层叠顺序，英文称作 stacking order，表示元素发生层叠时有着特定的垂直显示顺序。下面是盒模型的层叠规则：
对于上图，由上到下分别是：
背景和边框：建立当前层叠上下文元素的背景和边框。
负的z-index：当前层叠上下文中，z-index属性值为负的元素。
块级盒：文档流内非行内级非定位后代元素。
浮动盒：非定位浮动元素。
行内盒：文档流内行内级非定位后代元素。
z-index:0：层叠级数为0的定位元素。
正z-index：z-index属性值为正的定位元素。
注意: 当定位元素z-index:auto，生成盒在当前层叠上下文中的层级为 0，不会建立新的层叠上下文，除非是根元素。
19、两栏布局的实现？
一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应，两栏布局的具体实现：
利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。
<style>
.container {
height: 100px;
}
.left {
float: left;
width: 200px;
background: red;
height: 100px;
}
.right {
margin-left: 200px;
width: auto;
background: green;
height: 100px;
}
</style>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
利用浮动，左侧元素设置固定大小，并左浮动，右侧元素设置overflow: hidden; 这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。
<style>
.container {
height: 100px;
}
.left {
float: left;
width: 200px;
background: red;
height: 100px;
}
.right {
overflow:hidden;
background: green;
height: 100px;
}
</style>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
利用绝对定位，将父级元素设置为相对定位。左边元素设置为absolute定位，并且宽度设置为200px。将右边元素的margin-left的值设置为200px。
<style>
.container {
position:relative;
height: 100px;
}
.left {
position:absolute;
width: 200px;
background: red;
height: 100px;
}
.right {
margin-left:200px;
background: green;
height: 100px;
}
</style>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
利用flex布局，将左边元素设置为固定宽度200px，将右边的元素设置为flex:1。
<style>
.container {
display:flex;
height: 100px;
}
.left {
width: 200px;
background: red;
height: 100px;
}
.right {
flex:1;
background: green;
height: 100px;
}
</style>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
20、三栏布局实现？
三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，三栏布局的具体实现：
利用绝对定位，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。
<style>
.container{
position: relative;
height:100px;
}
.left{
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: red;
}
.right{
position: absolute;
right: 0;
top: 0;
width: 200px;
height: 100px;
background-color: orange;
}
.center{
margin-left: 100px;
margin-right: 200px;
height: 100px;
background-color: blue;
}
</style>
<body>
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
利用浮动，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式，中间一栏必须放到最后
<style>
.container{
height:100px;
}
.left{
float:left;
width: 100px;
height: 100px;
background-color: red;
}
.right{
float:right;
width: 200px;
height: 100px;
background-color: orange;
}
.center{
margin-left: 100px;
margin-right: 200px;
height: 100px;
background-color: blue;
}
</style>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</body>
利用flex布局，左右两栏设置固定大小，中间一栏设置为flex:1。
<style>
.container{
display:flex;
height:100px;
}
.left{
width: 100px;
height: 100px;
background-color: red;
}
.right{
width: 200px;
height: 100px;
background-color: orange;
}
.center{
flex:1;
height: 100px;
background-color: blue;
}
</style>
<body>
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
21、圣杯布局？
<div class="container">
<div class="content"></div>
<div class="left"></div>
<div class="right"></div>
</div>
圣杯布局，利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边。
.container{
position: relative;
padding-left: 100px;
padding-right: 200px;
height: 100px;
}
.content{
float: left;
width: 100%;
height: 100px;
background-color: blue;
}
.left{
float: left;
width: 100px;
height: 100px;
background-color: red;
margin-left: -100%;
position: relative;
left: -100px;
}
.right{
float: left;
width: 200px;
height: 100px;
background-color: green;
margin-left: -200px;
position: relative;
right: -200px;
}
22、双飞翼布局？
<div class="container">
<div class="wrap">
<div class="center"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的 margin 值来实现的，而不是通过父元素的 padding 来实现的。本质上来说，也是通过浮动和外边距负值来实现的。
.container{
width: 100%;
height: 100px;
}
.wrap{
float: left;
width: 100%;
}
.center{
background-color: blue;
height: 100px;
margin-left: 100px;
margin-right: 200px;
}
.left{
float: left;
margin-left: -100%;
width: 100px;
height: 100px;
background-color: red;
}
.right{
float: left;
margin-left: -200px;
width: 200px;
height: 100px;
background-color: green;
}
flex实现
<div class="container">
<div class="content"></div>
<div class="left"></div>
<div class="right"></div>
</div>
.container{
display: flex;
height: 100px;
}
.content{
flex: 1 1;
height: 100px;
background-color: blue;
order: 2;
}
.left{
flex: 0 0 100px;
height: 100px;
background-color: red;
order: 1;
}
.right{
flex: 0 0 200px;
height: 100px;
background-color: green;
order: 3;
}
23、CSS3中有哪些新特性？
新增各种CSS选择器
圆角
阴影(文本、盒子)
渐变
元素变换(平移、旋转、缩放)
过渡(transition)
背景
动画(animation)
内容有些多，大家可以先点赞收藏，但一定要去看。当你把大厂面试题知识点都看完并且理解了，以后就没有你过不了的前端面试。资源都帮你整理好了，还不学就有些说不过去了。
更多学习资料以及面试题库，需要的伙伴点击下方可以无偿获取！！
更多优质视频
