CSS面试题
- css画三角形：本质就是利用边框border
- css选择器优先级
- 一个div，没有给高度和宽度，怎么水平垂直居中
- height与line-height的区别
css画三角形：本质就是利用边框border
我们首先看一种情况：
width:0px;
height:0px;
border:100px solid blue;
也就是这个盒子没有高度和宽度，只有border。由于border-top和border-left有冲突，同理border-top和border-right也有冲突，所以CSS如下图，安排这种情况。
.triangle_1{
width:0px;
height:0px;
border:100px solid blue;
}
<div class='triangle_1' style='margin-top:300px'></div>
所以如果要画三角形，只留一个boder-xxx即可，即
.triangle_2{
width:0px;
height:0px;
border-left:100px solid transparent;
border-right:100px solid transparent;
border-top:100px solid transparent;
border-bottom:100px solid blue;
}
<div class='triangle_2' style='margin-top:100px'></div>
css选择器优先级
!important > 内联Style > id > class > 标签
一个div，没有给高度和宽度，怎么水平垂直居中
- 利用flex布局
.parent{
width:100px;
height:100px;
border:1px solid blue;
display:flex;
justify-content:center;
align-items:center;
}
<div class='parent' style='margin-top:300px'>
<div>child</div>
</div>
- 利用定位
.parent2{
width:100px;
height:100px;
border:1px solid blue;
position:relative;
}
.child2{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%)
}
<div class='parent2' style='margin-top:100px'>
<div class='child2'>child2</div>
</div>
height与line-height的区别
line-height是div中文字的高度，如果文字换行，第二行也保持line-height设置的值。
height自然是div的高度。
.test1 {
width: 150px;
height: 150px;
background: green;
}
.test2 {
width: 150px;
height: 150px;
line-height:50px;
background: green;
}
<div class='test1'>test1test1test1<br>test1test1test1<br>test1test1test1<br>test1test1test1<br>test1test1test1<br>test1test1test1</div>
<div class='test2' style='margin-top:100px'>test2test2test2<br>test2test2test2<br>test2test2test2<br>test2test2test2<br>test2test2test2<br>test2test2test2</div>
demo的整体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 面试</title>
<!-- Add some style to the page -->
<style>
.test1 {
width: 150px;
height: 150px;
background: green;
}
.test2 {
width: 150px;
height: 150px;
line-height:50px;
background: green;
}
.triangle_1{
width:0px;
height:0px;
border:100px solid blue;
}
.triangle_2{
width:0px;
height:0px;
border-left:100px solid transparent;
border-right:100px solid transparent;
border-top:100px solid transparent;
border-bottom:100px solid blue;
}
.parent{
width:100px;
height:100px;
border:1px solid blue;
display:flex;
justify-content:center;
align-items:center;
}
.parent2{
width:100px;
height:100px;
border:1px solid blue;
position:relative;
}
.child2{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%)
}
</style>
</head>
<body>
<h1>CSS3 面试</h1>
<!-- 1 height与line-height的区别 -->
<!-- height是一个div的高度。line-height是div中文字的高度，如果文字换行，第二行也保持line-height设置的值 -->
<div class='test1'>test1test1test1<br>test1test1test1<br>test1test1test1<br>test1test1test1<br>test1test1test1<br>test1test1test1</div>
<div class='test2' style='margin-top:100px'>test2test2test2<br>test2test2test2<br>test2test2test2<br>test2test2test2<br>test2test2test2<br>test2test2test2</div>
<!-- 2 css选择器优先级： -->
<!-- !important > 内联Style > id > class > 标签 -->
<!-- 3 css画三角形：本质就是利用边框border -->
<div class='triangle_1' style='margin-top:300px'></div>
<div class='triangle_2' style='margin-top:100px'></div>
<!-- 4 一个div，没有给高度和宽度，怎么水平垂直居中 -->
<div class='parent' style='margin-top:300px'>
<div>child</div>
</div>
<div class='parent2' style='margin-top:100px'>
<div class='child2'>child2</div>
</div>
</body>
</html>
