1. 盒模型
頁(yè)面渲染時(shí)蛾洛，dom 元素所采用的 布局模型温治》古樱可通過(guò)box-sizing進(jìn)行設(shè)置。根據(jù)計(jì)算寬高的區(qū)域可分為：
-
content-box(W3C 標(biāo)準(zhǔn)盒模型) ：設(shè)置元素的 height/width 屬性指的是content部分的高/寬 -
border-box：設(shè)置元素的height/width屬性指的是border + padding + content部分的高/寬 padding-box-
margin-box(瀏覽器未實(shí)現(xiàn))```
2. 彈性盒模型
Flexbox是整個(gè)模塊罐盔，而不是一個(gè)屬性但绕，它涉及很多東西，包括其整個(gè)組屬性。他們當(dāng)中一部分是容器（父元素捏顺，稱為“伸縮容器”）六孵，另一部分是子元素（稱為“伸縮項(xiàng)目”）。
3. CSS垂直居中與水平居中方案
(1) 行內(nèi)元素的水平居中：給其父元素設(shè)置 text-align:center,即可實(shí)現(xiàn)行內(nèi)元素水平居中幅骄。
(2) 塊元素居中：元素設(shè)置 margin:0 auto
- 使用flex
#dad {
display: flex;
justify-content: center;
align-items: center
}
- 絕對(duì)定位
.son1{
position:absolute;
width:固定;
left:0;
right:0;
margin:0 auto;
}
.son2{
position:absolute;
width:固定;
left:50%;
margin-left:-0.5寬度;
}
- 使用transform
.son{
position:absolute;
left:50%;
transform:translate(-50%,0);
}
(3) 垂直居中
單行文本：設(shè)置 line-height 等于父元素高度
行內(nèi)塊狀元素：
- 使用display: inline-block, vertical-align: middle和一個(gè)偽元素讓內(nèi)容塊處于容器中央
.parent::after, .son{
display:inline-block;
vertical-align:middle;
}
.parent::after{
content:'';
height:100%;
}
- 使用flex
- transform
- 絕對(duì)定位
4. BFC的理解劫窒？
BFC 可以簡(jiǎn)單的理解為某個(gè)元素的一個(gè) CSS 屬性，只不過(guò)這個(gè)屬性不能被開(kāi)發(fā)者顯式的修改拆座，擁有這個(gè)屬性的元素的內(nèi)部元素和外部元素會(huì)表現(xiàn)出下列特性主巍，這就是BFC。
BFC布局規(guī)則：
- 內(nèi)部的Box會(huì)在垂直方向挪凑，一個(gè)接一個(gè)地放置孕索。
- Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊
- 每個(gè)元素的margin box的左邊躏碳， 與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化搞旭，否則相反)。即使存在浮動(dòng)也是如此菇绵。
- BFC的區(qū)域不會(huì)與float box重疊肄渗。
- BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素咬最。反之也如此翎嫡。
- 計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算
5. 為什么會(huì)出現(xiàn)浮動(dòng)和什么時(shí)候需要清除浮動(dòng)永乌？清除浮動(dòng)的方式惑申？
浮動(dòng)會(huì)導(dǎo)致子元素脫離文檔流，所以父元素的塊框就表現(xiàn)得就像浮動(dòng)框不存在一樣翅雏，浮動(dòng)元素會(huì)漂浮在文檔流的塊框上硝桩。
浮動(dòng)帶來(lái)的問(wèn)題：
- 父元素的高度無(wú)法被撐開(kāi)，影響與父元素同級(jí)的元素
- 與浮動(dòng)元素同級(jí)的非浮動(dòng)元素（內(nèi)聯(lián)元素）會(huì)跟隨其后
- 如果第二個(gè)元素浮動(dòng)，則該元素之前的元素也需要浮動(dòng)，否則會(huì)影響頁(yè)面顯示的結(jié)構(gòu)颤霎。
清除浮動(dòng)的方式：
- 父級(jí)div定義height
- 父元素結(jié)束標(biāo)簽之前插入清除浮動(dòng)的塊級(jí)元素
// 省略基本的樣式
// 區(qū)別在這里
.clearfix:after {
content: '.';
height: 0;
display: block;
clear: both;
}
該樣式在clearfix茁帽，即父級(jí)元素的最后，添加了一個(gè):after偽元素，通過(guò)清除偽元素的浮動(dòng)，達(dá)到撐起父元素高度的目的。注意到該偽元素的display值為block矢劲，即，它是一個(gè)不可見(jiàn)的塊級(jí)元素（有的地方使用table慌随，因?yàn)閠able也是一個(gè)塊級(jí)元素）芬沉。
- 包含浮動(dòng)元素的父標(biāo)簽添加樣式overflow為hidden或auto躺同。（創(chuàng)建BFC）
6. CSS優(yōu)先級(jí)算法如何計(jì)算？
以下是權(quán)重的規(guī)則：
標(biāo)簽的權(quán)重為1丸逸，class的權(quán)重為10蹋艺，id的權(quán)重為100，以下例子是演示各種定義的權(quán)重值：
7.屏幕適配的方法黄刚？
- 設(shè)置viewport為設(shè)備寬度（這里不一定捎谨，但目前先這樣足矣）
- 將viewport分成10rem，并計(jì)算出1rem在當(dāng)前瀏覽器的像素值憔维，把它賦予html標(biāo)簽的font-size（分成10rem只是為了方便計(jì)算而已）
- 寫(xiě)CSS代碼時(shí)涛救，遇到要適配的地方，比如width业扒，margin检吆，padding等，就不要再用px了程储，改成用rem
var cssEl = document.createElement('style');
document.documentElement.firstElementChild.appendChild(cssEl);
function setPxPerRem(){
var dpr = 1;
//把viewport分成10份的rem咧栗，html標(biāo)簽的font-size設(shè)置為1rem的大小;
var pxPerRem = document.documentElement.clientWidth * dpr / 10;
cssEl.innerHTML = 'html{font-size:' + pxPerRem + 'px!important;}';
}
setPxPerRem();
8.flex布局
