面试题之css篇 👇
盒模型
盒模型由 margin + border + padding + content 四个属性组成
W3C的标准盒模型
width = content,不包含 border + padding
IE盒模型
width = border + padding + content
相互转换
二者之间可以通过CSS3的 box-sizing 属性来转换。
box-sizing: content-box 是W3C盒模型
box-sizing: border-box 是IE盒模型
垂直居中的方法
方法一:flex
.outer{
display: flex;
justify-content: center;
align-items: center
}
方法二: position + transform, inner宽高未知
.outer{
position:relative;
}
.inner{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
方法三:position + 负margin, inner宽高已知
.outer{
position: relative;
}
.inner{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
方法四:设置各个方向的距离都是0,再将margin设为auto,也可以实现,前提是inner宽高已知
.outer {
position: relative;
}
.inner {
width: 100px;
height: 100px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
三栏布局
三栏布局是很常见的一种页面布局方式。左右固定,中间自适应。实现方式有很多种方法。
第一种:flex
<div class="container">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
.container{
display: flex;
}
.left{
flex-basis:200px;
background: green;
}
.main{
flex: 1;
background: red;
}
.right{
flex-basis:200px;
background: green;
}
第二种:position + margin
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
</div>
body,html{
padding: 0;
margin: 0;
}
.left,.right{
position: absolute;
top: 0;
background: red;
}
.left{
left: 0;
width: 200px;
}
.right{
right: 0;
width: 200px;
}
.main{
margin: 0 200px ;
background: green;
}
第三种:float + margin
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
</div>
body,html{
padding:0;
margin: 0;
}
.left{
float:left;
width:200px;
background:red;
}
.main{
margin:0 200px;
background: green;
}
.right{
float:right;
width:200px;
background:red;
}
如何实现一个自适应的正方形
方法1:利用CSS3的vw单位
vw 会把视口的宽度平均分为100份
.square {
width: 10vw;
height: 10vw;
background: red;
}
方法2:利用margin或者padding的百分比计算是参照父元素的width属性
.square {
width: 10%;
padding-bottom: 10%;
height: 0; // 防止内容撑开多余的高度
background: red;
}