css面试题
# hcss常见面试题
# 1.1 介绍一下CSS的盒子模型
CSS的盒子模型有哪些：标准盒子模型、IE盒子模型
CSS的盒子模型区别：
标准盒子模型：margin、border、padding、content
IE盒子模型 ：margin、content（ border + padding + content ）
通过CSS如何转换盒子模型：
box-sizing: content-box; /*标准盒子模型*/
box-sizing: border-box; /*IE盒子模型*/
1
2
3
4
5
6
7
2
3
4
5
6
7
# 1.2 line-height和heigh区别【大厂】
line-height是每一行文字的高，如果文字换行则整个盒子高度会增大（行数*行高）。
height是一个死值，就是这个盒子的高度。
1
2
2
# 1.3 CSS选择符有哪些？哪些属性可以继承？
CSS选择符：
通配（*）
id选择器（#）
类选择器（.）
标签选择器（div、p、h1...）
相邻选择器(+)
后代选择器(ul li)
子元素选择器（ > ）
属性选择器(a[href])
CSS属性哪些可以继承：
文字系列：font-size、color、line-height、text-align...
***不可继承属性：border、padding、margin...
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 1.4 CSS优先级算法如何计算？
优先级比较：!important > 内联样式 > id > class > 标签 > 通配
1
CSS权重计算：
第一：内联样式（style） 权重值:1000
第二：id选择器 权重值:100
第三：类选择器 权重值:10
第四：标签&伪元素选择器 权重值:1
第五：通配、>、+ 权重值:0
1
2
3
4
5
6
2
3
4
5
6
# 1.5 用CSS画一个三角形
用边框画（border）,例如：
{
width: 0;
height: 0;
border-left:100px solid transparent;
border-right:100px solid transparent;
border-top:100px solid transparent;
border-bottom:100px solid #ccc;
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 1.6 一个盒子不给宽度和高度如何水平垂直居中？
# 让一个元素水平垂直居中的方式有哪些？
- 1.定位+margin
- 2.定位+transform
- 3.flex布局
- 4.grid布局
- 5.table布局
# 一个盒子不给宽度和高度如何水平垂直居中？
# 方式一：
<div class='container'>
<div class='main'>main</div>
</div>
.container{
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
border:5px solid #ccc;
}
.main{
background: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 方式二：
<div class='container'>
<div class='main'>main</div>
</div>
.container{
position: relative;
width: 300px;
height: 300px;
border:5px solid #ccc;
}
.main{
position: absolute;
left:50%;
top:50%;
background: red;
transform: translate(-50%,-50%);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 1.7 display有哪些值？说明他们的作用。
none 隐藏元素
block 把某某元素转换成块元素
inline 把某某元素转换成内联元素
inline-block 把某某元素转换成行内块元素
1
2
3
4
2
3
4
# 1.8 对BFC规范(块级格式化上下文：block formatting context)的理解？
BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
1. 了解BFC ： 块级格式化上下文。
2. BFC的原则：如果一个元素具有BFC，那么内部元素再怎么弄，都不会影响到外面的元素。
3. 如何触发BFC：
float的值非none
overflow的值非visible
display的值为：inline-block、table-cell...
position的值为:absoute、fixed
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 1.9 清除浮动有哪些方式？
1. 触发BFC
2. 多创建一个盒子，添加样式：clear: both;
3. after方式
ul:after{
content: '';
display: block;
clear: both;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 1.10 在网页中的应该使用奇数还是偶数的字体？为什么呢？
偶数 : 让文字在浏览器上表现更好看。
另外说明：ui给前端一般设计图都是偶数的，这样不管是布局也好，转换px也好，方便一点。
1
2
3
2
3
# 1.11 position有哪些值？分别是根据什么定位的？
static [默认] 没有定位
fixed 固定定位，相对于浏览器窗口进行定位。
relative 相对于自身定位，不脱离文档流。
absolute 相对于第一个有relative的父元素，脱离文档流。
relative和absolute区别
1. relative不脱离文档流 、absolute脱离文档流
2. relative相对于自身 、 absolute相对于第一个有relative的父元素
3. relative如果有left、right、top、bottom ==》left、top
absolute如果有left、right、top、bottom ==》left、right、top、bottom
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 1.12 写一个左中右布局占满屏幕，其中左、右俩块固定宽200，中间自适应宽，要求先加载中间块，请写出结构及样式。
双飞翼
1
# 1.13 什么是CSS reset？
reset.css 是一个css文件，用来重置css样式的。
normalize.css 为了增强跨浏览器渲染的一致性，一个CSS 重置样式库。
1
2
2
# 1.14 css sprite是什么,有什么优缺点
1. 是什么
把多个小图标合并成一张大图片。
2. 优缺点
优点：减少了http请求的次数，提升了性能。
缺点：维护比较差（例如图片位置进行修改或者内容宽高修改）
1
2
3
4
5
2
3
4
5
# 1.15 display: none;与visibility: hidden;的区别
1. 占用位置的区别
display: none; 是不占用位置的
visibility: hidden; 虽然隐藏了，但是占用位置
2. 重绘和回流的问题
visibility: hidden; 、 display: none; 产生重绘
display: none; 还会产生一次回流
产生回流一定会造成重绘，但是重绘不一定会造成回流。
产生回流的情况：改变元素的位置(left、top...)、显示隐藏元素....
产生重绘的情况：样式改变、换皮肤
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 1.16 opacity 和 rgba区别
共同性：实现透明效果
1. opacity 取值范围0到1之间，0表示完全透明，1表示不透明
2. rgba R表示红色，G表示绿色，B表示蓝色，取值可以在正整数或者百分数。A表示透明度取值0到1之间
区别：继承的区别
opacity会继承父元素的opacity属性，而RGBA设置的元素的后代元素不会继承不透明属性。
1
2
3
4
5
6
7
2
3
4
5
6
7
# 1.17 隐藏元素的方法有哪些？
display:none;
元素在页面上消失，不占据空间
opacity:0;
设置了元素的透明度为0，元素不可见，占据空间位置
visibility:hidden;
让元素消失，占据空间位置，一种不可见的状态
position:absolute;
clip-path
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 1.18 px和rem的区别是什么？
px是像素，显示器上给我们呈现画面的像素，每个像素的大小是一样，绝对单位长度
rem，相对单位，相对于html根节点的font-size的值，直接给html节点的font-size:62.5%;
1rem = 10px; （16px*62.5%=10px）
1
2
3
2
3
rem是相对长度，相对于根元素（html）的font-size属性来计算大小，通常来做移动端的适配
rem是根据根元素font-size计算值的倍数
比如html上的font-size:16px，给div设置宽为1.5rem,1.2rem = 16px*1.2 = 19.2px.
1
2
3
2
3
# 1.9 重绘重排有什么区别？
重排（回流）：布局引擎会根据所有的样式计算出盒模型在页面上的位置和大小
重绘：计算好盒模型的位置、大小和其他一些属性之后，浏览器就会根据每个盒模型的特性进行绘制
浏览器的渲染机制
对DOM的大小、位置进行修改后，浏览器需要重新计算元素的这些几何属性，就叫重排
对DOM的样式进行修改，比如color和background-color，浏览器不需要重新计算几何属性的时候，直接绘制了该元素的新样式，那么这里就只触发了重绘
1
2
3
4
5
2
3
4
5
为了避免CSS重排回流，可以采取以下策略：
避免频繁修改DOM：创建一个整体的DOM结构，然后一次性插入文档。
使用CSS类：通过添加和删除类来更改样式，而不是直接修改样式属性。
CSS3 动画利用 GPU 加速，可以更高效地实现动画效果，减少重绘和回流的次数。
使用documentFragment：在不直接与DOM交互的情况下构建DOM结构。
使用requestAnimationFrame或setTimeout：将多个DOM更改放在下一个动画帧或时间段内完成。
使用虚拟DOM：使用如React这样的库，它们维护一个内存中的虚拟DOM，并高效地比对变化，然后批量更新实际DOM。
使用 transform 替代 top/left：对于需要进行动画或平移的元素，使用 CSS3 的 transform 属性来替代 top/left 属性，因为 transform 的改变不会引起回流。
使用CSS属性动画：对于动画，使用CSS的transform和opacity等属性，它们不会引发布局变化。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 1.10 CSS的哪些属性哪些可以继承？哪些不可以继承？
CSS的三大特性：继承、层叠、优先级
子元素可以继承父类元素的样式
1.字体的一些属性：font
2.文本的一些属性：line-height
3.元素的可见性：visibility:hidden
4.表格布局的属性：border-spacing
5.列表的属性：list-style
6.页面样式属性：page
7.声音的样式属性
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 1.11 解决了哪些移动端的兼容问题？
1.当设置样式overflow:scroll/auto时，IOS上的华东会卡顿
-webkit-overflow-scrolling:touch;
2.在安卓环境下placeholder文字设置行高时会偏上
input有placeholder属性的时候不要设置行高
3.移动端字体小于12px时异常显示
应该先把在整体放大一倍，然后再用transform进行缩小
4.ios下input按钮设置了disabled属性为true显示异常
input[typy=button]{
opcity:1
}
5.安卓手机下取消语音输入按钮
input::-webkit-input-speech-button{
display:none
}
6.IOS下取消input输入框在输入引文首字母默认大写
<input autocapitalize='off' autocorrect='off'/>
7.禁用IOS和安卓用户选中文字
添加全局CSS样式：-webkit-user-select:none
8.禁止IOS弹出各种窗口
-webkit-touch-callout:none
9.禁止IOS识别长串数字为电话
添加meta属性 <meta conten='telephone=no' name='format-detection'>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22