尚矽谷web前端 CSS(二)

2021-10-08 19:24:53 字數 1445 閱讀 1889

css(二)

1、為元素設定的樣式,同時也會應用到它的後代元素

2、繼承是發生在祖先和後代元素之間,方便開發

3、利用繼承,可以將通用樣式放於共同的祖先標籤中,僅需設定一次

4、並不是所有樣式都會被繼承 如:背景相關,布局相關等

1、發生樣式衝突時,由選擇器的權重來決定優先顯示哪種樣式

2、內聯樣式(1,0,0,0) id選擇器(0,1,0,0),類和偽類選擇器(0,0,1,0),元素選擇器(0,0,0,1)

3、比較優先順序時,需將所有選擇器的優先順序進行相加,優先順序越高,越先顯示 分組選擇器是單獨計算

4、選擇器的累加不會超過最大的數量級 如:類選擇器無論怎麼加都不會高於id選擇器越具體的,優先順序越高

5、若優先順序相同,則優先使用靠下的樣式——下乙個樣式將上乙個覆蓋了

6、通配選擇器(0,0,0,0) 繼承的樣式沒有優先順序

看圖理解

開發的時候慎用,改起來麻煩

1、em是相對於元素的字型大小來計算的

2、1 em = 1 font-size

3、em會根據字型大小的改變而改變(自身字型)

4、rem是根據根元素的字型大小來計算(html)

1、網頁是乙個多層的結構,一層摞一層,文件流是網頁的基礎

2、建立的元素預設都是在文件流中進行排列的

3、塊元素:

4、行內元素:

1、css將頁面中的所有元素都設定為乙個矩形的盒子

2、組成:內容區(content)、邊框(border)、內邊距(padding)、外邊距(margin)

3、內容區(content):元素中所有子元素和文字內容均在此排列

內容區的大小由width和height來設定

4、邊框(border):至少要設定border-width,border-color,border-style,

簡寫:

6、乙個盒子的可見框大小由內容區,邊框,內邊距共同決定

7、外邊距(margin):不會影響盒子大小,會影響盒子的位置

1、元素在其父元素中水平方向的位置由以下幾個屬性共同決定:

margin-left、border-left,padding-left,width,padding-right,border-right,margin-right

2、水平方向布局必須滿足以下的等式:上述七個元素相加之和=其父元素的內容區寬度

1、子元素是在父元素的內容區中排列

2、若子元素大小超過了父元素,則子元素會從父元素中溢位

3、可選值:

1、相鄰的垂直方向外邊距會發生重疊現象

2、兄弟元素:

3、父子元素:

尚矽谷web前端 CSS(三)

css 三 1 行內元素不支援設定長寬 2 行內元素可以設定padding,border,margin,垂直方向不會影響頁面布局 3 display用來設定元素顯示型別 4 visibility用來設定元素顯示狀態 1 預設情況下,盒子可見框大小由內容區,內邊距和邊框共同決定 2 box sizin...

尚矽谷web前端工程師1000集學習筆記03

亂碼的問題 計算機是乙個非常笨的機器,它只認識兩個東西 0 1,在計算機中儲存的任何內容,最終都需要轉換為0 1這種二進位制編碼來儲存,包括網頁中的內容。比如 中國在計算機底層,可能需要轉換為 xx,在讀取內容時,需要將二進位制編碼,再轉換為正確的內容。編碼 依據一定的規則,將字元轉換為二進位制編碼...

尚矽谷web前端工程師1000集學習筆記36

在我的後園,可以看見牆外有兩株樹,一株是棗樹,還有一株也是棗樹。這上面的夜的天空,奇怪而高,我生平沒有見過這樣奇怪而高的天空。他彷彿要離開人間而去,使人們仰面不再看見。然而現在卻非常之藍,閃閃地 著幾十個星星的眼,冷眼。他的口角上現出微笑,似乎自以為大有深意,而將繁霜灑在我的園裡的野花草上。我不知道...