網頁布局方式

1. 網頁布局方式

   1.什麼是網頁的布局方式?

   網頁的布局方式其實就是指浏覽器是如何對網頁中的元素進行排版的

1.标準流(文檔流/普通流)排版方式

1.1其實浏覽器預設的排版方式就是标準流的排版方式

1.2在CSS中将元素分為三類, 分别是塊級元素/行内元素/行内塊級元素

1.3 在标準流中有兩種排版方式, 一種是垂直排版, 一種是水準排版

垂直排版, 如果元素是塊級元素, 那麼就會垂直排版

水準排版, 如果元素是行内元素/行内塊級元素, 那麼就會水準排版

2.浮動流排版方式

2.1浮動流是一種"半脫離标準流"的排版方式

2.2浮動流隻有一種排版方式, 就是水準排版. 它隻能設定某個元素左對齊或者右對齊

注意點:

1.浮動流中沒有居中對齊, 也就是沒有center這個取值

2.在浮動流中是不可以使用margin: 0 auto;

特點:

1.在浮動流中是不區分塊級元素/行内元素/行内塊級元素的

無論是級元素/行内元素/行内塊級元素都可以水準排版

2.在浮動流中無論是塊級元素/行内元素/行内塊級元素都可以設定寬高

3.綜上所述, 浮動流中的元素和标準流中的行内塊級元素很像

3.定位流排版方式

1. 浮動元素的脫标現象

   1.什麼是浮動元素的脫标?

   脫标: 脫離标準流

   當某一個元素浮動之後, 那麼這個元素看上去就像被從标準流中删除了一樣, 這個就是浮動元素的脫标

2.浮動元素脫标之後會有什麼影響?

如果前面一個元素浮動了, 而後面一個元素沒有浮動 , 那麼這個時候前面一個元就會蓋住後面一個元素

1.浮動元素排序規則

1.1相同方向上的浮動元素, 先浮動的元素會顯示在前面, 後浮動的元素會顯示在後面

1.2不同方向上的浮動元素, 左浮動會找左浮動, 右浮動會找右浮動

1.3浮動元素浮動之後的位置, 由浮動元素浮動之前在标準流中的位置來确定(這句話的意思就是:浮動之前标簽在标準流第一行,浮動之後就在浮動的第一行,浮動之前标簽在标準流的第二行,浮動之後就浮動在第二行)

1. 浮動元素的貼靠現象

   1.什麼是浮動元素貼靠現象?

   1.如果父元素的寬度能夠顯示所有浮動元素, 那麼浮動的元素會并排顯示

   2.如果父元素的寬度不能顯示所有浮動元素, 那麼會從最後一個元開始往前貼靠

   3.如果貼靠了前面所有浮動元素之後都不能顯示, 最終會貼靠到父元素的左邊或者右邊

2. 浮動元素字圍現象

   1.什麼是浮動元素字圍現象?

   浮動元素不會擋住沒有浮動元素中的文字, 沒有浮動的文字會自動給浮動的元素讓位置,這個就是浮動元素字圍現象

3. 浮動元素的高度問題

   1.在标準流中内容的高度可以撐起父元素的高度

   2.在浮動流中浮動的元素是不可以撐起父元素的高度的

4. 清除浮動的方式

   1.清除浮動的第一種方式

   給前面一個父元素設定高度

注意點:

在企業開發中, 我們能不寫高度就不寫高度, 是以這種方式用得很少

< div class=“box1”>

< p>我是文字1< /p>

< p>我是文字1< /p>

< p>我是文字1< /p>

< /div>

< div class=“box2”>

< p>我是文字2< /p>

< p>我是文字2< /p>

< p>我是文字2< /p>

< /div>

比如這樣一個例子,如果讓p元素都左浮動,那麼六個p元素都會顯示在一行,為了解決這個問題,就得在第一個div設定高度,這樣才不會顯示在一行裡面

1.清除浮動的第二種方式

給後面的盒子添加clear屬性

clear屬性取值:

none: 預設取值, 按照浮動元素的排序規則來排序(左浮動找左浮動, 右浮動找右浮動)

left: 不要找前面的左浮動元素

right: 不要找前面的右浮動元素

both: 不要找前面的左浮動元素和右浮動元素

注意點:

當我們給某個元素添加clear屬性之後, 那麼這個屬性的margin屬性就會失效

1.清除浮動的第三種方式

隔牆法

2.外牆法

2.1在兩個盒子中間添加一個額外的塊級元素

2.2給這個額外添加的塊級元素設定clear: both;屬性

注意點:

外牆法它可以讓第二個盒子使用margin-top屬性

外牆法不可以讓第一個盒子使用margin-bottom屬性

3.内牆法

3.1在第一個盒子中所有子元素最後添加一個額外的塊級元素

3.2給這個額外添加的塊級元素設定clear: both;屬性

注意點:

内牆法它可以讓第二個盒子使用margin-top屬性

内牆法它可以讓第一個盒子使用margin-bottom屬性

4.外牆法和内牆法差別?

外牆法不能撐起第一個盒子的高度, 而内牆法可以撐起第一個盒子的高度

5.在企業開發中不常用隔牆法來清除浮動

僞選擇器

1.什麼是僞元素選擇器?

僞元素選擇器作用就是給指定标簽的内容前面添加一個子元素或者給指定标簽的内容後面添加一個子元素

2.格式:

标簽名稱::before{

屬性名稱:值;

}

給指定标簽的内容前面添加一個子元素

标簽名稱::after{

屬性名稱:值;

}

給指定标簽的内容後面添加一個子元素

1.清除浮動的第四種方式

利用僞元素選擇器清除浮動

本質上就是内牆法, 隻不過是直接通過CSS代碼添加了内牆, 其它特性和内牆法都一樣