本文详细梳理了前端面试中关于CSS的常见问题，包括元素居中方法、清除浮动的方式、不同布局样式、CSS样式初始化、CSS Sprites概念及使用、display、opacity和visibility的区别、语义化理解等关键知识点，还有CSS3新特性、盒子模型、移动端适配、样式覆盖规则、重绘和回流、选择器和优先级等，旨在帮助开发者准备面试。
1、元素居中的方法
如：实现一个div在不同分辨率下的水平垂直居中
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid pink;
width: 100px;
height: 100px;
}
更多详情：https://www.cnblogs.com/cdnotes/p/14415904.html
2、阐述清除浮动的几种方式
1、浮动的产生
float: left/right（设置后产生浮动）
初衷：浮动原先的设计初衷是为了实现文字环绕效果
结果：父元素高度塌陷，理解起来就是元素浮动飘起来了，失去高度，下面的元素会顶上来，就造成了原有的元素背景不见了，margin/padding也不能正常显示
2、解决浮动的方法
（1）clear: both，在元素最后下加一个元素设置clear：both属性，缺点是会增加多余无用的html元素
<div class="container">
<div class="left">left浮动</div>
<div class="right">right浮动</div>
<div style="clear:both;"></div>
</div>
（2）使用after伪元素
.box 父元素
.box::after {
content: ' ';
display: block;
clear: both;
}
（3）给父元素设置明确的高度，缺点是并不是所有元素的高度都是固定
（4）给父级元素设置overflow:hidden, 缺点：不能和position配合使用
3、左右固定，中间自适应的样式
<style>
.box {
display: flex;
height: 200px;
}
.left {
flex: 0 0 200px;
background-color: pink;
}
.center {
flex: 1;
background-color: yellow;
}
.right {
flex: 0 0 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
4、上下固定，中间滚动布局样式
方法一：利用定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
html, body {
height: 100%;
}
.top, .bottom {
width: 100%;
height: 100px;
background-color: pink;
position: relative;
top: 0;
left: 0;
}
.bottom {
bottom: 0;
}
.center {
width: 100%;
background-color: skyblue;
height: calc(100% - 200px);
overflow: auto;
}
</style>
<body>
<div class="top"></div>
<div class="center">
<!-- 填充内容测试 -->
</div>
<div class="bottom"></div>
</body>
</html>
方法二：弹性布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
html, body {
padding: 0;
margin: 0;
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.top, .bottom {
width: 100%;
height: 100px;
background-color: pink;
}
.center {
width: 100%;
background-color: skyblue;
flex: 1;
overflow: auto;
}
</style>
<body>
<div class="top"></div>
<div class="center">
<!-- 填充内容测试 -->
</div>
<div class="bottom"></div>
</body>
</html>
5、css样式初始化
因为浏览器的兼容问题，不同浏览器对有些标签的默认值不同，如果不初始化css，会导致不同浏览器页面间的显示差异。
6、解释css sprites ，如何使用？
CSS雪碧图，即CSS Sprite，也有人叫它CSS精灵图，是一种图像拼合技术。该方法是将多个小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。
目的：
减少Http请求数量，加速内容显示。因为每请求一次，就会和服务器建立一次链接，而建立链接是需要额外的时间的。
详情：https://www.cnblogs.com/cdnotes/p/14668319.html
7、display:none; opacity:0; visibility:hidden；的区别
（1）display：none;
不占空间，不能触发事件
（2）opacity：0;
占据空间，可以触发事件
（3）visibility：hidden;
占据空间，不能触发事件
8、说说你对语义化的理解
a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
b. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重
c. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页
d. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化
9、内联元素缝隙问题
产生的原因：
空白区域的形成是因为内联元素之间有回车，在html中，空格、制表符、回车都属于空白符，多个空白符都会视为一个空格，空格的大小由父级的font-size决定。
解决方法：
- 给父元素设置font-size: 0;，在内联元素上把font-size设置回去
- 将空白符注释掉
- 把内联元素排列在同一行，并紧贴在一起
- 使用浮动float，有些场合不允许使用浮动，这条就不适用
10 在网页中的应该使用奇数还是偶数的字体？
实际上奇数偶数随便用都可以，但是为了迎合设计规范，用偶数可能好一些。
11、css3有哪些新特性
详情：
https://www.runoob.com/css3/css3-tutorial.html
https://www.html.cn/qa/css3/13608.html
- 边框：border-radius、border-image、box-shadow
- 渐变
- 文本效果：text-overflow、text-shadow、word-wrap、word-break
- 字体：@font-face
- 转换、过渡：transform、transition
- 动画：@keyframes
- 多列：column-count、column-gap、column-rule
- 弹性布局
- @media媒体查询
12、介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
盒子模型：
content + border + padding + margin = 盒子大小 // 自己带入一下上下左右的数据
盒子的宽等于content的宽
盒子的高等于content的高
低版本IE的盒子模型 （没错，就是面试中一直说的怪异盒子模型）(content + border + padding) + margin = 盒子大小盒子的宽等于 content的宽 + 左右border + 左右padding盒子的高等于 content的高 + 上下border + 左右padding
13、移动端适配1px问题
14、CSS样式覆盖规则
!important > 内联样式 > id选择 > （class选择 = 伪类选择） > (标签选择 = 伪元素选择)
内联样式：<div style="display: none"></div>
内部样式: <style></style>
外联样式：<link href="" />
三者的优先级为：内联样式>内部样式>外联样式。
15、重绘和回流（哪些情况重绘，哪些回流）
16、CSS选择符有哪些？CSS中哪些属性可以继承？优先级算法如何计算？
1、css选择符有哪些？
id #
class .
标签 div p
相邻兄弟 ul+div
兄弟 p~p
子 ul>li
后 ul li
通配 *
属性 a[href='xxx']
伪类 a:after a:hover :nth-child :first-child...
2、CSS中哪些属性可以继承？
答常见的color 、 font-size即可
3、优先级算法如何计算？
!important > 行内样式 > id> class > 元素和伪元素>通配选择器*
选择器的特殊性值表述为4个部分，用0,0,0,0表示。
- 行间样式的特殊性是1,0,0,0
- ID选择器的特殊性值，加0,1,0,0。
- 类选择器、属性选择器或伪类，加0,0,1,0。
- 元素和伪元素，加0,0,0,1。
- 通配选择器
*对特殊性没有贡献，即0,0,0,0。 - 最后比较特殊的一个标志!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。
17、css3新增的伪类有哪些
参考第18点
18、伪类和伪类元素的区别
直接参考：伪类和伪类元素的区别
19、position属性四个值区别和用法
1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
2、relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（元素本身）位置进行定位。可通过z-index进行层次分级。
3、absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。
4、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。
20、CSS3的Flexbox（弹性盒布局模型）,以及适用场景？
Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。
它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式
使用场景：如手机端的三列布局（即头尾固定、中间自适应）
21、用纯CSS创建一个三角形的原理是什么？
22、一个满屏品字布局怎么设计？
23、怎么让Chrome支持小于12px 的文字？
解决Chrome谷歌浏览器不支持CSS设置小于12px的文字
24、style标签写在body前与写body后有什么区别
1⃣️ 写在body标签前利于浏览器逐步渲染：
2⃣️ 写在body标签后：
由于浏览器以逐行方式对html文档进行解析；
当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染；
在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）；
25、经常遇到的浏览器的兼容性有哪些
经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？
。。。待续
扫一扫
414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
