H5隨筆第二課

2021-08-07 01:58:17 字數 1740 閱讀 7448

今天學習的第二天,今天主要學習了盒模型、標籤的分類、css三種引入方式以及css選擇器

1.盒模型:

盒模型分為標準盒模型以及怪異盒模型。

標準盒模型的內容尺寸:width*height;盒子尺寸:(width+padding+border)*(height+padding+border);盒子的區域尺寸:(width+padding+margin+border)*          (height+padding+margin+border)。

怪異盒模型的內容尺寸:(width-padding-border)*(height-adding-border);盒子尺寸:width*height;盒子的區域尺寸:(margin+margin)*(height+margin)。

怪異的盒模型一般出現在ie6,ie7,ie8。

盒子與盒子之間盡量用margin,盒子內部用padding 盒子尺寸盡量用auto

2.標籤的分類

一般標籤分為block,inline,inline-block三類

2.1 block標籤的作用:獨佔一行,不與其他標籤同行排列,可以設定寬高,當沒有設定寬高時,他的寬會預設其父級的寬,高則由內容撐開

2.2 inline標籤的作用:可以和行級標籤以及行塊標籤同行排列,不能設定寬高,寬高由內容撐開;

2.3 inline-block標籤的作用:不會獨佔一行,可以和行級標籤以及行塊標籤同行排列,可以設定寬高,但是有個缺點,在同行排列時如果乙個有文字乙個沒有文字時,他會文字的底部 

和標籤的頭部同行排列,要設定基線對齊,或其他方式才能對齊,一般用在列表與結構相同的盒子中。

3.css的三種引入方式

行間樣式,內部樣式以及外部樣式

3.1行間樣式:寫在標籤內部,例如:

優點:不會產生額外的請求

缺點:會產生大量的**冗餘,導致文件體積變大;不利於維護;不符合樣式與結構分離的規範

3.2內部樣式:寫在head標籤裡面的,例如

缺點:**不能復用

3.3外部樣式,寫在外部的css裡面的,引入方式為:

優點:完全符合樣式與結構的分離;便於維護;**可以重複使用

缺點:會產生額外的請求(但後期我們會學習其他的可以去除這個缺點。

綜上所述,我們一般都會使用外部樣式。

4.css選擇器

選擇器分為基礎選擇器-統配選擇器,基礎選擇器-標籤選擇器(tags),基礎選擇器-群組選擇器,基礎選擇器-類選擇器 .類名稱以及後代選擇器

4.1統配選擇器(),使用方式:*{},作用於所有標籤,無論你有沒有寫,有沒有出現在文件中

4.2標籤選擇器(tags)作用於一類標籤,方式是通過標籤名稱,如 div{}

4.3群組選擇器,用於優化**,減少文件體積,如:div,.box,span,h1,h2,li,ul{}

4.4類選擇器 .類名稱,可以用於各種場景,是我們最常用的選擇器,class名可以多個,多個class名用空格隔開。

主要用於具有相同樣式的元素,如:

.box1

.box2

.box3

.li10

4.5後代選擇器  選擇器1 選擇器2 ...只作用於最後乙個選擇器,前面的選擇器只是過濾條件,幫助我們定位如:div div div span{}

通過一天的學習對知識點更加的鞏固與掌握,但是肯定也會有不足之處,我相信這總結的肯定會有很多漏洞,我相信通過日積月累肯定會彌補過來的。

5 第二課 大象喝水

時間限制 1000ms 記憶體限制 65536kb 乙隻大象口渴了,要喝20公升水才能解渴,但現在只有乙個深h厘公尺,底面半徑為r厘公尺的小圓桶 h和r都是整數 問大象至少要喝多少桶水才會解渴。乙隻大象口渴了,要喝20公升水才能解渴,但現在只有乙個深h厘公尺,底面半徑為r厘公尺的小圓桶 h和r都是整...

第二課 安裝PHP

為什麼要安裝php?php是伺服器端解析程式,一般執行在網路伺服器上。而編寫php語言的程式我們一般是在自己的個人電腦上完成,然後拿到伺服器上除錯。所以,學習php首先要讓我們的個人電腦模擬伺服器執行環境,讓php能象在伺服器上一樣在我們的個人電腦上執行。這就是為什麼要安裝配置php的原因。安裝配置...

csdn之旅 第二課

1.html標題的標籤 1 注意 只能到,在往後就沒有作用了。2 標籤特點 可以區別其他文字,比如可以加粗 效果圖如 笑對生活!笑對生活!笑對生活!笑對生活!改變字型大小 可以自動換行 2.html段落標記 用元素 注意 標籤和標籤之間的關係 可以巢狀使用 但不可以交叉 3.html常用標記 單標記...