面试_css
1 . 伪类和伪元素的区别是什么？
一 、两者的定义
- 伪类 是一个以冒号作为前缀 , 被添加到一个选择器末尾作为关键字 , 当你希望样式在特定状态才被呈现在指定的元素时 , 你可以往元素的选择器后面加上对应的伪类
- 微元素 用于创建一些不在文档树中的元素 , 并为其添加样式 。比如说 , 我们可以用过 ::before来在一个元素前添加一些文本 , 并为这些文本添加样式。 虽然用户可以看到这些文本 , 但是在文本实际不在文档树中 。
二、 区别
伪类是通过元素选择器上加入伪类改变元素状态
p::first-child { color : 'red';}
伪元素是通过对元素的操作进行对元素的改变
p::before { content : 'coder;'; }
2 . CSS如何实现垂直居中？
行内元素 -水平居中
-
方法一: 对子元素设置
text-align: center; -
方法二: 父元素设置
width: fit-content再让父元素居中以达到居中目的
-垂直居中
-
方法一: 使子元素行高与高度相同（仅对单行有效）
-
方法二: 子元素设置
vertical-align: middle;IFC 轴线居中
可将行内中的图片居中 块级元素
- 水平居中
-
子元素使用
margin: xx auto;
自身设置：margin-left: auto;margin-right: auto; 合并写法：margin: xx auto;
left: 50%; /* 先让左边线居中 */
transform: translateX(-50%);
- 使用flex
弹性布局
子元素默认均匀分布于主轴
父元素要设置 justify-content
display: flex;
justify-content: center;
使幅轴居中
- 垂直居中align-items
display: flex;
align-items: center;
使主轴居中
-垂直水平居中
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
3 . CSS的优先级如何计算？
相关知识点 : CSS的优先级是根据样式声明的特殊性值来判断的。
-
选择器的特殊性值分为四个等级，如下：
（1）标签内选择符x,0,0,0
（2）ID选择符0,x,0,0
（3）class选择符/属性选择符/伪类选择符 0,0,x,0
（4）元素和伪元素选择符0,0,0,x
-
计算方式 :
（1）每个等级的初始值为0 （2）每个等级的叠加为选择器出现的次数相加
（3）不可进位，比如0,99,99,99
（4）依次表示为：0,0,0,0
（5）每个等级计数之间没关联
（6）等级判断从左向右，如果某一位数值相同，则判断下一位数值
（7）如果两个优先级相同，则最后出现的优先级高，!important也适用
（8）通配符选择器的特殊性值为：0,0,0,0
（9）继承样式优先级最低，通配符样式优先级高于继承样式
（10）!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特 殊性值为1,0,0,0,0。
4 . 浮动塌陷问题解决方法是什么？
-
浮动定义 : float（浮动），会使元素向左或者向右移动，其周围的元素也会重新排列。
-
浮动用法 : none默认值元素不浮动、left元素向左浮动、 right元素向右浮动、
-
清除浮动的办法
<body>
<!-- html -->
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
<!-- css -->
<style>
.box1 {
width: 100px;
height: 100px;
background-color: hotpink;
float: left;
}
.box::after{ /* 办法1 : 给元素添加伪类 */
content : '';
clear : both;
display: block;
}
.box {
border: 1px solid blue;
overflow: hidden; /* 办法2 : 给元素添加伪类 */
}
.box2{
clear: both; /* 办法3 : 添加子元素同级元素 加上 clear: both */
}
</style>
</body>
5 .position属性的值有哪些
-
static：该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。/ / 普通元素定位
-
relative：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。/ / 固定定位
-
absolute：是不为元素预留空间，通过指定元素相对于最近的非static定位祖先元素的偏移，来确定元素位置。 / / 相对定位
-
fixed：是指不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。
6 . BFC、IFC是什么？
-
BFC（Block Formatting Context）叫做“块级格式化上下文"
布局规则如下：
1.内部的盒子会在垂直方向，一个个地放置；
2.盒子垂直方向的距离由margin决定， 属于同一个BFC的两个相邻Box的上下margin会发生重叠；
3.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
4.BFC的区域不会与float重叠；
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；
6.计算BFC的高度时，浮动元素也参与计算。
这些元素会产生BFC。1.根元素；2.float的属性不为none；3.position为absolute或fixed；4.display为inline-block，table-cell，table-caption，flex；5.overflow不为visible
-
IFC （inline Formatting Context）叫做“行级格式化上下”
布局规则如下：
1.内部的盒子会在水平方向，一个个地放置；
2.IFC的高度，由里面最高盒子的高度决定；
3.当一行不够放置的时候会自动切换到下一行；
