1踏堡、HTML文檔的渲染過程:
/**
先加載HTML代碼,搭建出骨架;
然后按照HTML文檔樹的樹形順序依次給每個元素渲染樣式屬性锅尘;
*/
2、每個元素渲染CSS屬性是如何渲染的:
/**
1布蔗、每個元素渲染的前提條件是:該元素的所有CSS屬性都必須有值(我們可能只指定部分CSS屬性藤违,
但是那些默認(rèn)的CSS屬性也必須有值);
2纵揍、屬性值計算過程:一個元素顿乒,從所有屬性都沒有值,到所有屬性都有值泽谨,瀏覽器會自動幫我們計算璧榄,
這個計算過程叫做屬性值計算過程;
*/
/**
1吧雹、確定聲明值:將樣式表(作者樣式表和瀏覽器默認(rèn)樣式表)中沒有沖突的樣式聲明骨杂,作為CSS屬性值;
2雄卷、層疊沖突:對于樣式表中有沖突的聲明使用層疊規(guī)則(比較重要性搓蚪、比較特殊性、比較源次序)丁鹉,
確定CSS屬性值陕凹;
3、使用繼承:對于執(zhí)行過前兩步仍然沒有值的屬性鳄炉,若可以繼承杜耙,則繼承父元素的值;
4拂盯、使用默認(rèn)值:對仍然沒有值的屬性佑女,使用默認(rèn)值;
執(zhí)行完這四個操作谈竿,這個元素的屬性值才全部有值团驱,元素可以進(jìn)行渲染;
*/
3空凸、一個例子:
div{
color:red;
font-size: 24px;
}
<div>
<a href="">這是a標(biāo)簽</a>
<p>這是p標(biāo)簽</p>
</div>
/**
原理:根據(jù)屬性值得計算過程嚎花,a標(biāo)簽首先使用的是瀏覽器默認(rèn)的字體顏色,所以沒有繼承父元素的字體顏色
但是由于沒有默認(rèn)的字體大小呀洲,所以繼承了父元素的字體大形裳 啼止;
*/
// 如何讓a元素繼承父類的字體顏色:
a{
color:inherit;
}
// inherit 屬性的意思是繼承父元素的對應(yīng)樣式;
4兵罢、兩個特殊的CSS屬性值:
inherit:手動(強(qiáng)制)繼承献烦,將父元素的值取出應(yīng)用到該元素;
initial:初始值卖词,將該屬性值設(shè)置為默認(rèn)值巩那;
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者