CSS
作为HTML
页面结构的样式补充语言,在Web页面的布局和样式中起了重要作用。在前端面试中也是必不可少的一个考察点。本篇文章针对初级前端工程师
总结了前端面试中常见的css
面试题,帮助大家对页面布局、CSS
中常见的计量单位、常用属性有一个相对全面的了解。
一、两栏布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
background-color: red;
height: 40px;
}
.left {
float: left;
width: 200px;
background-color: blueviolet;
}
.right {
float: left;
width: calc(100% - 200px);
background-color: blue;
}
.container1 {
width: 100%;
background-color: red;
height: 40px;
}
.left1 {
float: left;
width: 200px;
background-color: blueviolet;
}
.right1 {
margin-left: 200px;
background-color: blue;
}
.container2 {
width: 100%;
background-color: red;
height: 40px;
}
.left2 {
position: absolute;
width: 200px;
background-color: blueviolet;
}
.right2 {
margin-left: 200px;
background-color: blue;
}
.container3 {
display: flex;
height: 40px;
background-color: red;
}
.left3 {
width: 200px;
background-color: blueviolet;
}
.right3 {
flex: 1;
background-color: blue;
}
</style>
</head>
<body>
<!-- 双float 缺点:父元素需要清除浮动 -->
<div class="container">
<div class="left">
<span>我在左边</span>
</div>
<div class="right">
<span>我在右边</span>
</div>
</div>
<hr />
<!-- float + margin-left 缺点: 需要清除浮动 -->
<div class="container1">
<div class="left1">左边</div>
<div class="right1">右边</div>
</div>
<hr>
<!-- position+margin-left -->
<div class="container2">
<div class="left2">左边</div>
<div class="right2">右边</div>
</div>
<hr>
<div class="container3">
<div class="left3">左边</div>
<div class="right3">右边</div>
</div>
</body>
</html>
总结:
- 1.双float
- 2.单float+margin-left
- 3.position+margin-left
- 4.flex
二、画等边三角形、直角三角形、等腰三角形、扇形、圆、半圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tri1 {
width: 0;
height: 0;
border-bottom: 50px solid blue;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
}
.tri2 {
width: 0;
height: 0;
border-bottom: 50px solid blue;
border-right: 50px solid transparent;
}
.tri3 {
width: 0;
height: 0;
border-bottom: 43px solid blue;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
}
.shanxing {
width: 0;
height: 0;
border-bottom: 50px solid blue;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-radius: 50%;
}
.yuan {
width: 50px;
height: 50px;
background-color: blue;
border-radius: 25px;
}
.banyuan {
width: 100px;
height: 50px;
background-color: blue;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
}
</style>
<div class="tri1"></div>
<hr />
<div class="tri2"></div>
<hr />
<div class="tri3"></div>
<hr />
<div class="shanxing"></div>
<hr />
<div class="yuan"></div>
<hr />
<div class="banyuan"></div>
</body>
</html>
三、em单位相对谁
对于如下两种情况,em 分别是相对谁的
font-size: 2em;
width: 2em;
对于font-size
属性,em
是相对于父元素的,根元素是有一个初始值大小为 16px
;
对于font-size
之外的属性,em
就是相对当前元素的font-size
。
四、position: absolute相对谁定位
如果祖先元素有设置 position: static
以外的属性值,则相对该祖先元素定位,否则相对视口定位。
五、position: relative偏移,会影响后面元素的定位吗
相对元素原来的位置进行偏移,脱离文档流,但在文档流中保留原位置的空间(预留空间),
也就是说,元素原来位置会一直保留空白占位,相邻兄弟元素会保持原来的位置,不会随元素的移动而改变
六、flex常用属性
之前整理一篇flex
的文章,关于flex
的简介和相关属性、参数设置可以参见: