css面试考点原创
# 面试考点汇总
# px和em的应用场景
- 如果元素的大小绝对则,使用px
- 如果需要弹性布局,则可以在与字体相关的部分使用em
- 比如设置按钮的边框和宽高时就可以使用em
# tailwind了解一下
# em和rem
- 如果设置的是font-size时,em相对的父级的font-size
- 如果设置的是其他元素,em相对的是本身内部的font-size
- rem相对于根元素的字体大小,配合媒体查询可以实现自适应
# 响应式和自适应的区别
- 自适应一般适用于某些元素在小范围内改变大小,所有元素全部采用rem,然后控制根标签的font-size来进行放大缩小
- 响应式一般适用于整体布局,根据屏幕来更改布局,使得大屏显示内容更多,小屏更少,而不是单纯的放大缩小。
# 伪元素与伪类的区别
- 伪元素一般是用于生成一些装饰性的元素(非DOM),本身不属于内容,比如before,after
- 伪类则是为了基于特殊状态来选择元素(DOM)
# 渐进增强和优雅降级
- 优雅降级:以最优体验为目标进行开发,对于旧版本进行兼容处理
- 渐进增强:以实现功能为目标进行开发,对于新功能进行追加
# less和sass以及postcss的区别
- less是基于js实现的,可以在页面运行时去做一些事
- sass则需要进行编译(node)。有自己的语法体系
- postcss是css预处理框架,使用原生css即可,可以引入插件实现特殊的功能
# z-index
- 可以为负数
# CSS中可以继承的属性
- 字体,表格,文本,列表,光标,元素可见性
# Visibility和display的区别
- visibility:hidden 隐藏元素,仍占据空间
- display:none 隐藏元素,不在占据空间
# CSS3新增的伪类
- nth系列:nth:disable,nth:checked
# 垂直居中的四种方法
- 设置绝对定位 上下左右为0
- flex
- left,top为50%,translate -50%
- left,top为50%,margin为元素本身宽高一半的负值
# CSS3的新特性
- border-radius
- text-shadow
- linear-gradient
- transform
- text-decoration
# 常见的浏览器兼容性问题
- margin和padding不同--->使用* 全部置为0
- 超链接访问过后hover样式不再出现了,调整样式顺序为lvha
# 什么是包含块
- 包含块指的就是用于定位和计算的容器
# width为auto和100%的区别
- auto表示元素撑满父元素,margin,padding,border,content自动分配空间
- 100%表示元素撑满父元素内容的宽度
# 绝对定位元素和非绝对定位元素的百分比计算区别
- 绝对定位元素的百分比相对于祖先元素的padding-box
- 非绝对定位元素百分比相对于祖先元素的content-box
# base64图片编码优缺点
- 减少http请求
- 无法缓存,体积增大,不兼容ie8
# display > position > float
- 优先级排序
# CSS的优化
- 压缩CSS文件
- 使用link不使用@import
- 雪碧图,base64,svg,webp
- 关键选择器使用id,或者class,且不要叠加过多。
- 不要使用*
- 属性值为0px不要带单位
- 抽离相同的样式属性作为一个class
# css选择器的处理
- 从右往左依次观察,直到匹配或不匹配退出
# 容器竖向的百分比
- 如果设置的是子元素的高度,则相对于父容器的高度(content-box)
- 如果设置的是子元素的宽度,则相对于父容器的宽度
- 如果设置的是内边距,外边距则全部相对于父容器的宽度
# transition和animation的区别
- transition关注的是元素的属性变化,一般与transform结合使用,变化过程与时间关系是一个三次贝塞尔曲线
- animation关注的是元素本身,使用关键帧来进行动画处理
# line-height
- 用来设置行内元素的行间距
- 只对行内元素生效,且其本质上设置的是元素的上下边距,所以即使是一行也会有上边距
- 其值可以取数值,百分比,长度值(带单位)。数值和百分比都会与font-size相乘,长度值则为计算值
- 一行内行间距由最高的元素决定
- 只要有行盒就会有块盒,且块级盒子会在行级盒子的前边生成一个宽度为0,具有字体属性的看不见的空白节点
# 多行文本溢出显示。。。的实现方式
- 手动模拟,height设为行高的行数倍即可
<style>
p{
position:relative;
width: 300px;
height:3em;
line-height:1.5em;
overflow:hidden;
}
p::after{
content: "...";
position: absolute;
bottom: 0;
right: 0;
}
</style>
<p>
我在一行根本放不下,需要两行以上才行
我在一行根本放不下,需要两行以上才行
我在一行根本放不下,需要两行以上
</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
- 利用属性设置
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
1
2
3
4
2
3
4
# 元素隐藏的方式
- display:none
- visibility:hidden
- opacity:0
- transform:scale(0,0)
# 一个水平垂直居中的自适应矩形
代码如下
<div class="c">
<p class="p">
</p>
</div>
<style>
.c{
display: inline-block;
width: 100px;
height: 100px;
background-color: #fda;
}
.p{
background-color: aqua;
height: 0;
padding-top: 50%;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
效果如下