KonishiLee's Blog

CSS 面试题

垂直水平居中

display:table

定义父节点

1
2
3
{
display: table;
}

需要居中节点

1
2
3
4
{
display: table-cell;
vertical-align: middle;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style media="screen">
.content{
display: table;
height: 1000px;
border: 1px solid black;
}
.cell{
display: table-cell;
vertical-align: middle;
border: 1px solid red;
}
</style>
<div class="content">
<div class="cell">
水平居中内容
</div>
</div>

margin:top

因为这里有一个细节就是绝对定位之后定义 top,right,bottom,left 为 0 之后(不可能最后都为 0),所以在加上 margin: auto 块级元素就会自动居中(不信你就去试试吧)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style media="screen">
.content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 200px;
width: 200px;
border: 1px solid yellow;
}
</style>
<div class="content">
水平居中内容
</div>

通过 50% 在减去居中块的宽度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style media="screen">
.content {
position: absolute;
top: 50%;
left: 50%;
height: 200px;
width: 200px;
border: 1px solid green;
margin-top: -100px;
margin-left: -100px;
}
</style>
<div class="content">
水平居中内容
</div>

CSS 选择器

计算公式:ICE

I——Id; 100
C——Class; 10
E——Element; 1

即,针对一个 css 选择器表达式,遇到一个id就往特指度数值中加 100,遇到一个 class 就往特指度数值中加 10,遇到一个 element 就往特指度数值中加 1。这样是不是就很方便理解了呢?

注:!important优先级最高,高于上面一切。 选择器最低,低于一切。

如果喜欢这个分享,就帮忙买杯咖啡吧