css面試總結(jié)

SKYZACK 發(fā)布于2019-08-29 18:34 / 1401人閱讀

摘要：兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，折疊結(jié)果是兩者絕對(duì)值的較大值。兩個(gè)外邊距一正一負(fù)時(shí)，折疊結(jié)果是兩者的相加的和。

CSS知識(shí)點(diǎn)整理
瀏覽器兼容性問(wèn)題解決方案 · 總結(jié)

行內(nèi)樣式、內(nèi)嵌式、鏈接式以及導(dǎo)入式

在引用 CSS 上，分為四種形式：行內(nèi)樣式、內(nèi)嵌式、鏈接式以及導(dǎo)入式，下面介紹這四種模式。

1.行內(nèi)樣式

直接對(duì) HTML 的標(biāo)記使用 style 屬性，然后將 CSS 代碼直接寫(xiě)進(jìn)去：

2.內(nèi)嵌式

將 CSS 寫(xiě) 與之間，并且用標(biāo)記進(jìn)行聲明：

3.鏈接式

通過(guò)將

各種方式的優(yōu)先級(jí)
在優(yōu)先級(jí)上，行內(nèi)樣式 > 鏈接式 > 內(nèi)嵌式 > @import 導(dǎo)入式。

說(shuō)一下 css 的盒模型

盒模型分為標(biāo)準(zhǔn)模型和怪異盒模型（IE 盒模型）
標(biāo)準(zhǔn)盒模型：盒模型的寬高只是內(nèi)容（content）的寬高
怪異盒模型：盒模型的寬高是內(nèi)容(content)+填充(padding)+邊框(border)的總寬高

css 如何設(shè)置兩種模型

/ 標(biāo)準(zhǔn)模型 /
box-sizing:content-box;

/IE模型/
box-sizing:border-box;

圖片的請(qǐng)求

https://www.haorooms.com/post...

什么是外邊距重疊？重疊的結(jié)果是什么

外邊距重疊就是margin-collapse。
在CSS當(dāng)中，相鄰的兩個(gè)盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系）的外邊距可以結(jié)合成一個(gè)多帶帶的外邊距。這種合并外邊距的方式被稱(chēng)為折疊，并且因而所結(jié)合成的外邊距稱(chēng)為折疊外邊距。
折疊結(jié)果遵循下列計(jì)算規(guī)則：

兩個(gè)相鄰的外邊距都是正數(shù)時(shí)，折疊結(jié)果是它們兩者之間較大的值。
兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，折疊結(jié)果是兩者絕對(duì)值的較大值。
兩個(gè)外邊距一正一負(fù)時(shí)，折疊結(jié)果是兩者的相加的和。

rgba()和opacity的透明效果有什么不同

rgba()和opacity都能實(shí)現(xiàn)透明效果，但最大的不同是opacity作用于元素，以及元素內(nèi)的所有內(nèi)容的透明度，
而rgba()只作用于元素的顏色或其背景色。（設(shè)置rgba透明的元素的子元素不會(huì)繼承透明效果！）

link 與 @import 的區(qū)別

link功能較多，可以定義 RSS，定義 Rel 等作用，而@import只能用于加載 css
當(dāng)解析到link時(shí)，頁(yè)面會(huì)同步加載所引的 css，而@import所引用的 css 會(huì)等到頁(yè)面加載完才被加載
@import需要 IE5 以上才能使用
link可以使用 js 動(dòng)態(tài)引入，@import不行