1.BFC
BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個區(qū)域外部毫不相干。
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.瀏覽器最小字體，如何實現(xiàn)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結(jié)構(gòu)發(fā)生改變就會觸發(fā)重排；重排一定會觸發(fā)重繪；改變背景顏色會觸發(fā)重繪
7.CSS3 : 和 :: 的區(qū)別
1.單冒號(:)用于CSS3偽類，雙冒號(::)用于CSS3偽元素。
2.::before就是以一個子元素的存在，定義在元素主體內(nèi)容之前的一個偽元素。并不存在于dom之中，只存在在頁面之中。
:before 和 :after 這兩個偽元素，是在CSS2.1里新出現(xiàn)的。起初，偽元素的前綴使用的是單冒號語法，但隨著Web的進(jìn)化，在CSS3的規(guī)范里，偽元素的語法被修改成使用雙冒號，成為::before ::after
8.漸進(jìn)增強(qiáng)和優(yōu)雅降級
9.盒模型
box-sizing: border-box; // width = content + padding + border
box-sizing: content-box; // width = content
10.sass和less的區(qū)別
11.飛翼布局，圣杯布局
思路：統(tǒng)一向左浮動，中間的放在最前面浮動順序中間->左邊->右邊，浮動后因為中間的寬度為100%；所有中間的占據(jù)一行；
左邊的和右邊的按順序排列在下面；如果中間的不為100%的話，三者應(yīng)該在同一條線上，向讓左邊的移動到中間的左邊上面去可以給左邊的加margin-left: 負(fù)中間的寬度的值；因為左邊已經(jīng)移動到中間的左邊了，所以中間的右邊緊挨著右邊的；然后右邊的在中間的右邊的話只需要給右邊margin-left:負(fù)右邊自己的寬度的值；這樣就把左邊和右邊分別放在了中間的左邊和右邊的位置；會遮擋中間部分內(nèi)容；這是給外層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內(nèi)容區(qū)</h4></header>
<div class="container">
<div class="middle"><h4>中間彈性區(qū)</h4></div>
<div class="left"><h4>左邊欄</h4></div>
<div class="right"><h4>右邊欄</h4></div>
</div>
<footer><h4>Footer內(nèi)容區(qū)</h4></footer>
</body>
</html>
