CSS面试题2
markdown源文件
提取码:qyjv
1、使用CSS制作一个三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.aa{
width: 0;
height: 0;
border-top: 20px solid transparent;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
border-bottom: 20px solid red;
}
</style>
<body>
<div class="aa">
</div>
</body>
</html>
2、line-height 和height区别
line-height是设置文字的上下行之间的高度,是针对字体来设置的,height则是容器的整体高度。
3、设置background-color会填充哪些区域
content、padding、border都会被填充
4、属性选择器和伪类选择器的优先级
优先级相同
5、为什么img是inline却还是可以设置宽高
img、input是可替换元素
6、选择器优先级
!important>内联>id>class>标签名称
7、制作立方体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>perspective</title>
<style>
.wrapper{
width: 50%;
float: left;
}
.cube{
font-size: 4em;
width: 2em;
margin: 1.5em auto;
transform-style:preserve-3d;
transform:rotateX(-35deg) rotateY(30deg);
}
.side{
position: absolute;
width: 2em;
height: 2em;
background: rgba(255,99,71,0.6);
border: 1px solid rgba(0,0,0,0.5);
color: white;
text-align: center;
line-height: 2em;
}
.front{
transform:translateZ(1em);
}
.bottom{
transform:rotateX(-90deg) translateZ(1em);
}
.top{
transform:rotateX(90deg) translateZ(1em);
}
.left{
transform:rotateY(-90deg) translateZ(1em);
}
.right{
transform:rotateY(90deg) translateZ(1em);
}
.back{
transform:translateZ(-1em);
}
</style>
</head>
<body>
<div class="wrapper w1">
<div class="cube">
<div class="side front">1</div>
<div class="side back">6</div>
<div class="side right">4</div>
<div class="side left">3</div>
<div class="side top">5</div>
<div class="side bottom">2</div>
</div>
</div>
<div class="wrapper w2">
<div class="cube">
<div class="side front">1</div>
<div class="side back">6</div>
<div class="side right">4</div>
<div class="side left">3</div>
<div class="side top">5</div>
<div class="side bottom">2</div>
</div>
</div>
</body>
</html>
注意:每个面的先旋转在平移这里可能会有些人很难理解,这里是先旋转(旋转轴为中心)在沿着Z轴平移,因为Z轴会跟着第一次旋转一起转
8、overflow清楚浮动的原理
因为使用了overflow就具有了BFC特性,BFC在计算高度时,也要计算浮动元素的高度。(BFC是什么详见前端面试1)
9、隐藏元素的方法
opacity:0 透明度为0,不会改变布局,且该区域事件仍有效
display:none,影响布局,可以理解为删去这个元素,
visibility:hidden,不影响布局,元素还存在但是事件不触发。
10、CSS预处理器有哪些
less、sass等