一、 網(wǎng)頁的布局方式
1、 什么是網(wǎng)頁的布局方式？
- 網(wǎng)頁的布局方式就是指流浪器是如何對網(wǎng)頁的元素進(jìn)行排版的
2、 網(wǎng)頁的布局方式
2.1 標(biāo)準(zhǔn)流/文檔流/普通流排版方式
- 瀏覽器的默認(rèn)的排版方式就是標(biāo)準(zhǔn)流排版方式
- 在css中將元素分為三類，分別是塊級元素/行內(nèi)元素/行內(nèi)塊級元素。
- 在標(biāo)準(zhǔn)流中有兩種排版方式，一種是垂直排版，一種是水平排版。
垂直排版：如果是塊級元素，那么就是垂直排版。
水平排版：如果是行內(nèi)元素，那么就是水平排版。
2.2 浮動流排版方式
2.2.1 浮動流是一種“半脫離標(biāo)準(zhǔn)流”的排版方式
2.2.2 浮動流只有一種排版方式，就是水平排版，它只能設(shè)置某個元素在他的父元素中左對齊或者右對齊。
- 注意點：浮動流中沒有居中對齊，也就是沒有center取值。
- 注意點： 在浮動流中是不可以使用margin:0 auto的。
- 特點：在浮動流中是不區(qū)分塊級元素和行內(nèi)元素還是行內(nèi)塊級元素的，無論是塊級還是行內(nèi)還是行內(nèi)塊級元素。
- 特點：在浮動流中，無論是塊級元素/行內(nèi)元素/行內(nèi)塊級元素都可以設(shè)置寬高。
- 綜上所述：浮動流中的元素和標(biāo)準(zhǔn)流中的行內(nèi)塊級元素很像。
float:left;
二 ，浮動元素脫標(biāo)
- 什么是浮動元素脫標(biāo)？
- 脫標(biāo)：脫離標(biāo)準(zhǔn)流。所有元素都可以脫標(biāo)。
- 當(dāng)某一個元素浮動之后，那么這個元素看上去就像被從標(biāo)準(zhǔn)流中刪除了一樣，這個就是浮動元素的脫標(biāo)。
- 如果前面一個元素浮動了，而后面一個元素沒有浮動，那么這個時候前面的一個元素就會蓋住后面的一個元素。
三、浮動元素的排序規(guī)則
1、 相同方向上的浮動元素，先浮動的元素會顯示在前面，后浮動的元素會顯示在后面。
2、不同方向上的浮動元素，左浮動會找左浮動，右浮動會找右浮動。
3、浮動元素浮動之后的位置，由浮動元素浮動之前在標(biāo)準(zhǔn)流中的位置來確定。
貼靠原則
瀏覽器會讓所有的元素在父元素中完整展示，如果有覆蓋的情況，那么會觸發(fā)貼靠原則。也就是尋找要貼靠的元素的前一個元素，如果沒有，就尋找父元素進(jìn)行貼靠。
寫代碼思維方式
- 企業(yè)開發(fā)中什么時候使用標(biāo)準(zhǔn)流什么時候使用浮動流？
- 垂直方式使用標(biāo)準(zhǔn)流，水平方向使用浮動流
- 拿一個很復(fù)雜的界面如何入手？
- 從上到下布局
- 從外到內(nèi)布局
- 水平方向可以劃分為一左一右再對左邊或者右邊進(jìn)行一步布局
