1. 什么是css盒子模型
盒子的構(gòu)成由margin border padding content決定
分為邊框盒子和內(nèi)容盒子
谷歌默認(rèn)為內(nèi)容盒子 IE為邊框盒子
內(nèi)容盒子：寬度和高度決定了內(nèi)容的大小 盒子的大小需要計算
邊框盒子：寬度和高度決定了盒子自身的大小 內(nèi)容的大小需要計算
習(xí)慣使用邊框盒子拥坛，為了兼容IE
2.? ? css選擇器的作用秦忿？常用的有哪些？css3新增的有哪些抢肛？
1作用是選中html進(jìn)行樣式設(shè)置
2 class id *
3 偽類選擇器 :hover? ? :focus? ? :nth-type-of? :checked
3.? ? css樣式的權(quán)重如何計算
1 首先看選擇器的優(yōu)先級*<元素選擇器<class<id<!import
2 相同權(quán)重的選擇器看順序顿仇，用下面的樣式
3 利用權(quán)重和代碼的執(zhí)行順序解決樣式覆蓋的問題
4.? ? css單位分類铁追？哪些單位可以實現(xiàn)響應(yīng)式布局？
em與rem的區(qū)別是什么冷离？
em ex px 的區(qū)別是什么挠说？
單位分為 相對單位和絕對單位
相對單位可以實現(xiàn)響應(yīng)式布局
? ? ? ? % 相對父元素澡谭，最大視圖的大小
? ? ? ? Em 相對于祖籍元素中的大小
? ? ? ? rem 相對于根元素的大小
? ? ? ? vw vh 相對于瀏覽器視圖窗口
? ? ex 相對字母‘x’大小 默認(rèn)為瀏覽器默認(rèn)‘x‘的大小
絕對單位
? ? ? ? px
如何讓谷歌瀏覽器字體小于12px?
transform 縮放 讓字體大小小于12px
5.? ? 如何實現(xiàn)多行文本省略？
text-overflow ellipsis
css 中哪些屬性可以繼承损俭？
文本屬性：font-size? color? font-family? ? font-weight
布局屬性不能繼承
6.? ? 如何去除inline-block默認(rèn)縫隙
1.? ? 壓縮代碼蛙奖，不讓元素間有縫隙
2.? ? 用html注釋，連接兩個元素
3.? ? 給父元素設(shè)置font-size 0
7.? ? 如何實現(xiàn)垂直居中撩炊？
1.? ? 通過絕對定位外永，2d平移實現(xiàn)垂直居中
2.? ? 通過絕對定位 四個值為0? margin：auto 實現(xiàn)
3.? ? 父容器彈性布局
8.? display:none 與 visibility:hidden 區(qū)別是什么崎脉？
visibility屬性的collapse屬性值拧咳，在不同瀏覽器下有什么區(qū)別?
1 display:none 不占據(jù)元素空間? visibility：hidden 占據(jù)元素空間
2 谷歌保留位置，ie沒有位置
外邊距一般用于拉開相鄰兄弟元素的距離
內(nèi)邊距一般用于拉開父子元素之間的距離
9.? ? rgba 與 opacity
rgba 漸變 屬性不能繼承 一般用來寫遮罩層
opacity 屬性會被繼承
10.? 絕對定位與相對單位的區(qū)別囚灼？
絕對定位是相對與祖籍元素中具有position relative 的元素進(jìn)行定位
特點：脫離文檔流 位置移動幅度大 元素由block 轉(zhuǎn)化為inline-block
優(yōu)點：可以實現(xiàn)通用布局骆膝，兼容低版本的IE
缺點：觸發(fā)重排祭衩，消耗瀏覽器的性能，不容易實現(xiàn)復(fù)雜的布局
====適合要求兼容低版本的IE 常用的布局
相對定位是相對于元素自身進(jìn)行移動
特點：定位后不會脫離文檔流阅签，會占據(jù)位置掐暮，元素保留自身特點
優(yōu)點：不會觸發(fā)重排
缺點：定位后會占據(jù)位置
==== 只適合小范圍的微調(diào)
絕對定位和固定定位的區(qū)別是什么？
固定定位是基于瀏覽器的視圖進(jìn)行定位
特點：定位后脫離文檔流政钟，位置被其他元素占據(jù)路克，塊元素變成inline-block
缺點：會觸發(fā)重排
====適用于 廣告和固定導(dǎo)航等
如何清除浮動？
有多種方案养交，常用的是
.clear::after
content’ ’;
display:block;
clear:both;
}
11.? 移動端布局
移動端：ios android 應(yīng)用
混合app 開發(fā) uniapp weex react-nactive tora ionic
移動端：微信公眾號嵌入網(wǎng)頁
移動端css樣式：
1.? ? 彈性布局
2.? ? rem設(shè)計方案
3.? ? 媒體查詢
===響應(yīng)式
4.? ? 圣杯布局
5.? ? 雙飛翼布局
圣杯布局：為了讓中間div內(nèi)容不被遮擋精算，為中間的div設(shè)置了左右padding之后，將左右兩個div 用position：relative分別配合right和left屬性碎连，以便左右兩欄div移動后不遮擋中間的div
雙飛翼布局：為了讓中間div內(nèi)容不被遮擋灰羽，直接在div內(nèi)部創(chuàng)建子div用來放置內(nèi)容
在該div里用margin-left 和margin-right為左右兩欄div空出位置
12.? 左右定寬中間自適應(yīng)
1.? ? 給左右兩邊元素定寬
2.? ? 給父元素設(shè)置彈性布局
3.? ? 中間子項目設(shè)置flow-grow：1；
13.? 中間自適應(yīng)高度鱼辙，上下定高
1.? 上下定高
2.? 父元素設(shè)置彈性布局廉嚼，并改變主軸方向 flex-direction
3.? 中間子元素設(shè)置 flow-grow：1；
14.? css性能優(yōu)化方案：
1.? ? 圖片是加載的資源倒戏，通過使用精靈圖減少加載圖片次數(shù)
2.? ? 能使用字體圖標(biāo)不使用圖片
3.? ? 盡量減少重排和重繪怠噪。重排一定會觸發(fā)重繪，重繪不一定觸發(fā)重排
4.? ? 避免書寫多余命名空間
5.? ? 提取公共樣式杜跷，提高樣式的可復(fù)用性
15.? 瀏覽器是怎么樣解析css選擇器的舰绘？
css選擇器的解析是從右往左解析的。若從左往右的匹配葱椭，發(fā)現(xiàn)不符合規(guī)矩捂寿，則需要進(jìn)行回溯，會損失很多性能孵运。
若從右向左匹配秦陋，先找到所有的最右節(jié)點，對于每一個節(jié)點治笨，向上尋找其父節(jié)點直到找到根元素或滿足條件的匹配規(guī)則驳概，則結(jié)束這個分支的遍歷。
兩種匹配規(guī)則的性能差別很大旷赖，是因為從右向左的匹配在第一步顺又，就篩選掉了大量的不符合條件的最右節(jié)點（葉子節(jié)點）而從左往右的匹配規(guī)則的性能都浪費在失敗的查找上面。
而在css解析完畢后等孵，需要將解析的結(jié)果與DOM Tree 的內(nèi)容 一起進(jìn)行分析建立一棵Render Tree稚照，最終用來進(jìn)行繪圖。
在建立Render Tree時（webkit 中的[Attachment]過程），瀏覽器就要為每個 DOM Tree 中的元素根據(jù) CSS 的解析結(jié)果（Style Rules）來確定生成怎樣的 Render Tree果录。
