前端面试题01（css）
@[toc]
hello hello~ ，这里是 code袁~💖💖 ，欢迎大家点赞🥳🥳关注💥💥收藏🌹🌹🌹
💥个人主页：code袁
💥 所属专栏：Java
1、CSS选择器的优先级
CSS的特性：继承性，层叠性，优先级
！important > 行内样式 > id >类/伪类/属性 > 标签 > 全局选择器
<style>
.box {
background-color: blue;
height: 200px;
width: 200px;
}
</style>
<body>
<div class="box" style="background-color: red"></div>
</body>
2、隐藏元素的方法有哪些
1.display：none 元素在页面上消失，不占据空间
2.opacity:0 设置元素的透明度0 不占空间
3.visibility：hidden 让元素消失 占据空间
4.position：absolute 通过改变元素位置，让其消失
3、px和rem的区别
px是像素，每个像素的大小一致，绝对的长度单位
rem 相对单位 1px=10rem
4、重绘和重排的区别
浏览器的重绘（repaint）和重排（reflow）是指浏览器对网页进行重新渲染的过程。
重排是指重新计算网页布局的过程，而重绘则是根据新的布局信息重新绘制网页的过程。
它们的区别在于，重排会导致元素的尺寸、位置、内容等属性的变化，因此需要重新计算布局信息；
而重绘则是在元素的位置和尺寸等属性不变的情况下，重新绘制元素的样式。
5、水平垂直居中的方式
1.定位+margin
2.定位+transform
3.flex布局
4.grid布局
5.table布局
定位+margin
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 400px;
height: 400px;
border: 1px solid;
position: relative;
}
.son {
position: absolute;
width: 200px;
height: 200px;
background-color: rebeccapurple;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
定位+transform
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 400px;
height: 400px;
border: 1px solid;
position: relative;
}
.son {
position: absolute;
width: 200px;
height: 200px;
background-color: rebeccapurple;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
flex布局
<style>
* {
margin: 0;
padding: 0;
}
.father {
display: flex;
justify-content: center;
align-items: center;
width: 400px;
height: 400px;
border: 1px solid;
}
.son {
width: 200px;
height: 200px;
background-color: green;
}
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
6、CSS的那些属性可以继承
子属性可以继承父属性的样式
1.字体属性 font
2.文本属性 text-hight
3.元素的可见性：visibility：hidden
4.表格布局属性：border-spacing
5.列表属性：list-style
6.页面样式属性：page
7、预处理器
预处器语言增加了变量，函数，混入等强大的功能
SASS LESS
SASS（Syntactically Awesome Style Sheets）和LESS（Leaner St Sheets）是两种流行的CSS预处理器，
它们扩展了CSS的功能并提供了更便捷的开发方式。
SASS和LESS都支持以下特性：
变量：可以定义和使用变量，方便在多个地方复用样式。
嵌套规则：可以在父选择器内部编写子选择器，减少代码的嵌套层级。
混合（Mixin）：可以定义可重用的样式块，并在需要的地方引用。
继承：可以通过继承已有的样式来减少重复代码。
运算：可以进行数学运算，方便计算样式值。
函数：提供了一些内置函数，用于处理颜色、字符串等。
SASS还有一些额外的特性：
Partials和Import：可以将样式文件拆分为多个部分，并在需要的地方引入。
控制指令：提供了条件语句和循环语句，增强了样式表的灵活性。
LESS相比于SASS，更加简洁和易学，语法上更接近于普通的CSS。
而SASS则提供了更多的高级特性和灵活性。
🎉写在最后
🍻伙伴们，如果你已经看到了这里，觉得这篇文章有帮助到你的话不妨点赞👍或 Star ✨支持一下哦！手动码字，如有错误，欢迎在评论区指正💬~
你的支持就是我更新的最大动力💪~
