常見的瀏覽器內(nèi)核
| 內(nèi)核 | 描述 |
|---|---|
| Trident(IE內(nèi)核) | 主要用在window系統(tǒng)中的IE瀏覽器中，由微軟研發(fā)并投入使用 |
| Gecko(Firefox內(nèi)核) | 主要用于Firefox瀏覽器中，特點(diǎn)是代碼完全公開，開發(fā)程度高 |
| Webkit(Safari內(nèi)核) | 蘋果產(chǎn)品中的safari瀏覽器使用的就是webkit內(nèi)核，其特點(diǎn)是不受ie，firefox等內(nèi)核的約束，比較安全。 |
| Chromium（谷歌瀏覽器） | 基于WebKit的,chrome由Chromium開發(fā)而來。這個(gè)內(nèi)核是國內(nèi)眾多瀏覽器所使用的內(nèi)核，比如哦360，獵豹，騰訊 |
| Blink | 由谷歌和Opera SoftWare 開發(fā)的瀏覽器渲染引擎，其前身是webkit的分支。Blink相對(duì)于webKit有更高的渲染引擎，并提供了許多改進(jìn)和新功能 |
CSS選擇器優(yōu)先級(jí)
瀏覽器通過優(yōu)先級(jí)來判斷哪些屬性值與一個(gè)元素最為相關(guān)，從而在該元素身上應(yīng)用這些屬性值。優(yōu)先級(jí)是基于不同種類的選擇器組成的匹配規(guī)則
優(yōu)先級(jí)就是分配給指定css聲明的一個(gè)權(quán)重，它匹配的選擇器重每一張選擇器類型的數(shù)值決定。
而當(dāng)優(yōu)先級(jí)與多個(gè)css聲明重任意一個(gè)聲明的優(yōu)先級(jí)相等的時(shí)候。css中最后的那個(gè)聲明將會(huì)被應(yīng)用到元素上
| 選擇器 | 格式 | 優(yōu)先級(jí)權(quán)重 |
|---|---|---|
| ID選擇器 | #id | 100 |
| 類選擇器/偽類選擇器 | .xxx :xx | 10 |
| 屬性選擇器 | E[attr=“value”] | 10 |
| 標(biāo)簽選擇器 | div | 1 |
| 通配符選擇器 | * | 0 |
當(dāng)在一個(gè)樣式中聲明使用一個(gè)!important規(guī)則時(shí)，此聲明將覆蓋任何其他聲明。和權(quán)重沒有關(guān)系。
樣式的來源不同時(shí)，優(yōu)先級(jí)順序?yàn)?內(nèi)聯(lián)>內(nèi)部>外部>瀏覽器用戶自定義樣式>瀏覽器默認(rèn)樣式
盒子模型
W3C標(biāo)準(zhǔn)盒子模型：寬+左右內(nèi)邊距+左右邊框 +左右外邊距 （寬度等于 高度一樣）
怪異盒模型:寬+左右外邊距(寬度等于 高度一樣）
box-sizing: 屬性設(shè)置
1.content-box：標(biāo)準(zhǔn)盒子模型
2.border-box 怪異盒子模型
他倆的區(qū)別就是一個(gè)往外撐一個(gè)往里擠的區(qū)別吧
CSS硬件加速
瀏覽器在處理下面的css的時(shí)候會(huì)使用GPU渲染
1.transform (當(dāng)3D變換的樣式出現(xiàn)時(shí)會(huì)使用GPU加速)
2.opacity
3.filter
4.will-change
層爆炸，由于某些原因?qū)е麓罅坎辉陬A(yù)期內(nèi)的合成層，雖然有瀏覽器的層壓縮機(jī)制，但是也有跟多無法進(jìn)行壓縮的情況。這就肯定會(huì)出現(xiàn)層爆炸的現(xiàn)象。很多不需要提升為合成層的元素因?yàn)槟承┎划?dāng)操作成為了合成層。解決層爆炸的問題，最佳方案是打破overlap的條件，也就是說讓其他元素不要和合成層元素重疊。簡單直接的方式：使用3D硬件加速提升動(dòng)畫性能時(shí)候，最后給元素增加一個(gè)z-index屬性，人為干擾合成層的順序，可以有效的減少創(chuàng)建不必要的合成層，提升渲染性能。（移動(dòng)端優(yōu)化效果顯著）
CSS擴(kuò)展
一· 左右兩邊固定寬度（左邊固定右邊自適應(yīng)布局）中間自適應(yīng)布局實(shí)現(xiàn)
圣杯布局：指兩邊盒子寬度固定，中間盒子自適應(yīng)，其中，中間欄放到文檔流前面，保證先進(jìn)行渲染。（會(huì)變形）
雙飛翼布局：為了中間div內(nèi)容不被遮擋，直接在中間div內(nèi)部創(chuàng)建子div用于放置內(nèi)容，在該子div里用margin-left和margin-right為左右兩欄div留出位置（放大瀏覽器不會(huì)變形）
寬度計(jì)算：中間寬等于width:cacl(100% - 兩邊寬度的和)
彈性盒子布局:兩邊寬度固定 父盒子設(shè)置彈性盒子不允許換行 中間盒子flex:1 (建議)
二,9宮格實(shí)現(xiàn)方式
1.通過彈性盒子實(shí)現(xiàn)（推薦）
2.通過grid布局
3.通過table實(shí)現(xiàn)(不推薦 不累述）
4.通過float實(shí)現(xiàn)(不推薦 不累述）文章來源：http://www.zghlxwxcb.cn/news/detail-822828.html
三，子元素上下左右垂直居中
1.彈性盒子 父盒子設(shè)置彈性，子盒子justifiy-content 和align-item屬性設(shè)置center.
2.margin 實(shí)現(xiàn)
3.padding實(shí)現(xiàn)
4.子絕父相實(shí)現(xiàn)文章來源地址http://www.zghlxwxcb.cn/news/detail-822828.html
到了這里，關(guān)于前端面試題-(瀏覽器內(nèi)核，CSS選擇器優(yōu)先級(jí)，盒子模型，CSS硬件加速，CSS擴(kuò)展）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
