前端面试（CSS部分2）

最新推荐文章于 2024-09-06 11:00:54 发布

穷酸的小明

最新推荐文章于 2024-09-06 11:00:54 发布

阅读量122

点赞数

分类专栏：前端面试 css3 文章标签： css css3

本文链接：https://blog.csdn.net/qq_40026070/article/details/106580998

版权

前端面试同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

css3

2 篇文章 0 订阅

订阅专栏

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等

穷酸的小明

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端面试（CSS部分2）

CSS面试题2markdown源文件提取码：qyjv1、使用CSS制作一个三角形<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> .aa{ width: 0; height: 0; border-top: 20px s
复制链接

扫一扫

专栏目录