1. 盒模型
頁面渲染時(shí)，dom 元素所采用的 布局模型?？赏ㄟ^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
}
- 絕對定位
.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
- 絕對定位
4. BFC的理解？
BFC 可以簡單的理解為某個(gè)元素的一個(gè) CSS 屬性，只不過這個(gè)屬性不能被開發(fā)者顯式的修改，擁有這個(gè)屬性的元素的內(nèi)部元素和外部元素會表現(xiàn)出下列特性，這就是BFC。
BFC布局規(guī)則：
- 內(nèi)部的Box會在垂直方向，一個(gè)接一個(gè)地放置。
- Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會發(fā)生重疊
- 每個(gè)元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
- BFC的區(qū)域不會與float box重疊。
- BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
- 計(jì)算BFC的高度時(shí)，浮動元素也參與計(jì)算
5. 為什么會出現(xiàn)浮動和什么時(shí)候需要清除浮動？清除浮動的方式？
浮動會導(dǎo)致子元素脫離文檔流，所以父元素的塊框就表現(xiàn)得就像浮動框不存在一樣，浮動元素會漂浮在文檔流的塊框上。
浮動帶來的問題：
- 父元素的高度無法被撐開，影響與父元素同級的元素
- 與浮動元素同級的非浮動元素（內(nèi)聯(lián)元素）會跟隨其后
- 如果第二個(gè)元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結(jié)構(gòu)。
清除浮動的方式：
- 父級div定義height
- 父元素結(jié)束標(biāo)簽之前插入清除浮動的塊級元素
// 省略基本的樣式
// 區(qū)別在這里
.clearfix:after {
content: '.';
height: 0;
display: block;
clear: both;
}
該樣式在clearfix，即父級元素的最后，添加了一個(gè):after偽元素，通過清除偽元素的浮動，達(dá)到撐起父元素高度的目的。注意到該偽元素的display值為block，即，它是一個(gè)不可見的塊級元素（有的地方使用table，因?yàn)閠able也是一個(gè)塊級元素）。
- 包含浮動元素的父標(biāo)簽添加樣式overflow為hidden或auto。（創(chuàng)建BFC）
6. CSS優(yōu)先級算法如何計(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ì)算而已）
- 寫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布局
屏幕快照 2019-04-10 下午8.31.07.png
