1.BFC
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
2.垂直居中
2.1 flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 600px;
height: 600px;
border: 1px solid slategrey;
display: flex;
justify-content: center;
align-items: center;
}
.content{
width: 200px;
height: 200px;
background-color: tomato;
}
</style>
</head>
<body>
<div class="box">
<div class="content"></div>
</div>
</body>
</html>
2.2 定位布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 600px;
height: 600px;
margin: 0 auto;
border: 1px solid slategrey;
}
.content{
width: 200px;
height: 200px;
background-color: tomato;
position: relative;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
/* 可以把margin替换成transform */
/* transform: translate(-50%, -50%); */
}
</style>
</head>
<body>
<div class="box">
<div class="content"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 600px;
height: 600px;
position: relative;
margin: 0 auto;
border: 1px solid slategrey;
}
.content{
width: 200px;
height: 200px;
background-color: tomato;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="content"></div>
</div>
</body>
</html>
3.浏览器最小字体，如何实现10px字体
.font_12{
font-size: 12px;
}
.font_10{
font-size: 10px;
transform: scale(0.83);
display: inline-block;
position: absolute;
left: -2px;
}
4.H5新特性
6.重排和重绘
dom结构发生改变就会触发重排；重排一定会触发重绘；改变背景颜色会触发重绘
7.CSS3 : 和 :: 的区别
1.单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
2.::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。
:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after
8.渐进增强和优雅降级
9.盒模型
box-sizing: border-box; // width = content + padding + border
box-sizing: content-box; // width = content
10.sass和less的区别
11.飞翼布局，圣杯布局
思路：统一向左浮动，中间的放在最前面浮动顺序中间->左边->右边，浮动后因为中间的宽度为100%；所有中间的占据一行；
左边的和右边的按顺序排列在下面；如果中间的不为100%的话，三者应该在同一条线上，向让左边的移动到中间的左边上面去可以给左边的加margin-left: 负中间的宽度的值；因为左边已经移动到中间的左边了，所以中间的右边紧挨着右边的；然后右边的在中间的右边的话只需要给右边margin-left:负右边自己的宽度的值；这样就把左边和右边分别放在了中间的左边和右边的位置；会遮挡中间部分内容；这是给外层container加padding: 0 右边宽度 0 左边宽度；这时中间左右会有空白，接下来我们只需要给左右 position: relative;定位，然后左边left:自己的宽度；右边right: 自己的宽度就可以了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout</title>
<style>
*{
margin: 0;
padding: 0;
}
header{width: 100%;height: 40px;background-color: darkseagreen;}
.container{
overflow: hidden;
padding: 0 200px 0 150px;
}
.middle{
float: left;
height: 200px;
width: 100%;
background-color: darkcyan;
}
.left{
position: relative;
left: -150px;
float: left;
height: 200px;
width: 150px;
margin-left: -100%;
background-color: darkgoldenrod;
}
.right{
position: relative;
right: -200px;
width: 200px;
float: left;
margin-left: -200px;
height: 200px;
background-color:darkorange;
}
footer{width: 100%; height: 30px;background-color: darkslategray;}
</style>
</head>
<body>
<header><h4>Header内容区</h4></header>
<div class="container">
<div class="middle"><h4>中间弹性区</h4></div>
<div class="left"><h4>左边栏</h4></div>
<div class="right"><h4>右边栏</h4></div>
</div>
<footer><h4>Footer内容区</h4></footer>
</body>
</html>
微信图片_20211011213530.png
