前端开发面试总结——CSS部分

最新推荐文章于 2024-05-21 21:13:29 发布

往事随风，唯有技术

最新推荐文章于 2024-05-21 21:13:29 发布

阅读量94

点赞数

分类专栏：前端开发文章标签： css 前端

本文链接：https://blog.csdn.net/m0_55337573/article/details/132146022

版权

前端开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. CSS3中有哪些新特性？

过渡transition旋转rotate缩放scale转换 transform
阴影 box-shadow text-shadow
RGBA color：rgba（R,G,B,A）
渐变效果 liner-gradient线性 radial-gradient径向 conic-gradient圆锥
自定义字体 @font-face
圆角效果 border-radius
弹性布局 flex
动画 animation
多栏布局
多背景图
媒体查询

2. CSS选择器及其优先级？

!important > 内联样式 > id选择器 > 类 | 属性 | 伪类选择器 > 标签 | 伪元素选择器 > 通配符*

3. CSS中可继承属性有哪些？

字体系列属性：font-size，font-style，font-family，font-weight
文本系列属性：text-align，line-height，text-indent，color，letter-spacing等
元素可见性：visibility
列表布局属性；list-style
光标属性：cursor

4. display的属性值及其作用？

none：元素不显示，空间也不保留
inline：内联元素，宽高设置无用
block：块级元素，独占一行
inline-block：行内块元素，可以设置宽高

5. 隐藏元素的方法有哪些？

display: none 不占位页面重新渲染
visibility: hidden 占位不绑定监听事件
opacity: 0 占位改变元素透明度可绑定监听事件
position: absolute 不占位定位到远离页面的位置
z-index：负值，改变层级
translate：scale（0，0），占据位置，不绑定监听事件
v-if 条件切换
v-show 等于display: none

6. link和@import的区别？

两者都是外部引用 CSS 的方式，但是存在一定的区别：

link是XHTML标签，除了能够加载CSS，还可以定义RSS等其他事务；而@import属于CSS范畴，只可以加载CSS。
link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后再加载。
link是XHTML标签，无兼容问题；@import则是在CSS2.1提出的，低版本的浏览器不支持。
link支持使用Javascript控制DOM改变样式；而@import不支持。

7. 伪元素和伪类的区别和作用？

根本区别：是否创造了新的元素（虚拟），是为伪元素，否为伪类
语法区别：单冒号为伪类，双冒号为伪元素
可同时使用多个伪类，只能同时使用一个伪元素
伪元素：before，after，first-line，first-letter，创建文档树以外的元素
伪类：active，hover，focus，link，visited，操作文档树已有元素

8. 对盒模型的理解？

盒模型规定了网页元素如何显示以及元素间的相互关系
padding控制父子元素之间的关系
margin控制同辈元素之间的位置关系
标准：margin + border + padding + content = 总宽度 box-sizing: content-box
怪异：width（content，border，padding） + margin = 总宽度 box-sizing: border-box

9. 为什么有时候用translate来改变位置而不是定位？

改变translate或opacity不会触发浏览器重新布局或重绘，只会触发复合。改变定位会触发重新布局进而触发重绘和复合。
translate使浏览器为元素创建一个GPU图层，但定位会使用CPU，故translate更高效，可以缩短平滑动画的绘制时间。
translate改变位置时，元素依旧占据原始空间，定位就不会发生这种情况

10. 常见图片格式和使用场景？

gif：简单动画，颜色少256种，支持动图；无损压缩，浏览器全兼容
png：色彩好，压缩比高，无损压缩，内存大，不支持IE6，支持透明
jpg：体积小，不支持透明，有损压缩，浏览器全兼容
svg：可放大缩小，矢量没有损失。适应屏幕，图片较小

11. 对sprites的理解？

雪碧图：将小图标合并在一起之后的图片
使用：css属性background-image，background-position，background-size
优点：提前加载资源，减少加载多张图片的http请求（一次）

12. 预处理器less和sass区别？

less是基于JS，是在客户端处理的，sass是基于Ruby，是在服务端处理的
变量不同：less用@，sass用的$
sass支持条件语句，可以使用if...else...，for循环，less不支持

13. 单行、多行文本溢出隐藏?

//单行：
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
//多行：
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

14. px、em、rem的区别及使用场景?

px是固定的像素，一旦设置就无法适应页面大小而改变
em是相对长度单位，相对于父元素字体的大小
rem也是相对长度单位，相对于根元素<html>字体大小
px用于元素的边框或定位，em和rem做响应式开发，rem更加常用

15. 水平垂直居中的实现?

水平居中：text-align：center 垂直居中：line-height
margin： 0 auto
绝对定位position：absloute；top: 50%; transform：translateY(-50%);
Flex布局：justify-content：center；align-items：center；
vertical-align: middle （基线垂直对齐）（常用于表格）
精灵图：background-position: 横px 纵 px；

16. 对Flex布局的理解及其使用场景?

flex-direction：设置主轴方向，row、colum
flex-wrap：换行处理，wrap，nowrap
justify-content：主轴对齐，center、space-between、space-around
align-items：侧轴对齐，center、baseline
align-content：多侧轴对齐，center、space-between、space-around
flex-flow：flex-direction和flex-wrap结合体简写
其他：flex-group放大显示，flex-shrink缩小比例，align-self

17. 为什么需要清除浮动？方式？

由于浮动元素不在占用原文档流的位置会对后面的元素排版产生影响。

清除浮动是指清除由于子元素浮动带来父元素高度塌陷的影响

在父标签结尾处，添加“clear：both”样式的空div标签
父级div元素定义“overflow:both”样式
父级div标签定义伪类“:after”

18. 对BFC的理解，如何创建BFC？

BFC是页面上的一个隔离的独立容器，容器内部的子元素不会影响到外面的元素。主要作用是解决边距重叠问题和解决子元素float脱离文档流，父元素高度塌陷问题（激活BFC使高度重新计算）

19. 什么是margin重叠问题？如何解决？

两个块级元素的上外边距和下外边距可能会合并重叠为一个外边距，取其大。垂直方向，浮动元素和绝对定位脱离文档流不会折叠。
兄弟之间重叠：底部元素变成inline-block或设置成float或绝对定位
父子之间重叠：父加padding或border；子加浮动，父清除浮动；父flex；父加overflow：hidden

20. 实现一个三角形?

//正常三角形
.triangle{
    width: 0;
    height: 0;
    margin-bottom: 50rpx;
    border-top: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 100px solid transparent;
    border-right: 100px solid #ffdd00;
}
//等腰三角形长100宽80
.triangle{
    width: 0;
    height: 0;
    margin-bottom: 50rpx;
    border-top: 100px solid #000;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
}
//直角三角形
.triangle{
    width: 0;
    height: 0;
    margin-bottom: 50rpx;
    border-top: 100px solid transparent;
    border-left: 100px solid #000;
}

21. 实现一个扇形?

.box{   
    width: 0;
    height: 0;
    border-radius: 100px;
    border: 100px solid transparent;
    border-top-color: #000;
}

22. 实现一个宽高自适应的正方形？

.box{
    width: 10%;
    height: 10vw;
    background-color: #f00;
}
//或
.box{
    width: 20%;
    height: 0;
    padding-top: 20%;
    background-color: #f00;
}

23. 画一条0.5px的线？

.box{
    position: relative;
    margin: 30px 0;
}
.box::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background-color: #f00;
    transform: scaleY(0.5);
}

24. 设置小于12px的字体？

.font{
    transform: scale(0.83,0.83);  // 10/12=0.83
}
//或：切图处理

以上是小编自己搜罗各种资源总结，仅供参考学习！持续跟新中。。。

往事随风，唯有技术

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端开发面试总结——CSS部分

前端开发面试总结——CSS部分
复制链接

扫一扫

专栏目录

前端开发面试总结——CSS部分

“相关推荐”对你有帮助么？