網(wǎng)頁布局方式

• 網(wǎng)頁布局方式其實是指瀏覽器是如何對網(wǎng)頁中的元素進行排版的

• 定位流

• 標(biāo)準(zhǔn)流(文檔流/普通流)排版方式(默認(rèn))

  • 在css中標(biāo)簽分為三類 塊級 行內(nèi) 行內(nèi)塊級
  • 在標(biāo)準(zhǔn)流中有2種排版方式: 垂直排版/ 水平排版
    • 垂直排版: 如果元素是塊級元素 那么就會垂直排版
    • 水平排版 如果元素是行內(nèi)元素/ 行內(nèi)塊級 那么就水平排版

• 浮動流排版方式

  1. 浮動流是一種半脫離標(biāo)準(zhǔn)流的排版方式
  2. 浮動流只是一種排版方式 float:left或float:right 沒有居中設(shè)置
  3. 因此在浮動流中設(shè)置margin:0 auto;無效.
  • 特點:
    • 在浮動流中不區(qū)分塊級元素/ 行內(nèi)元素 / 行內(nèi)塊級
    • 無論是塊級元素/ 行內(nèi)元素/ 行內(nèi)塊級 都可以水平排版 并且可以設(shè)置寬高
    • 綜上所述, 浮動流中的元素和標(biāo)準(zhǔn)流中的行內(nèi)塊級元素很像
  4. 浮動元素脫標(biāo)
  • 什么是浮動元素脫標(biāo)?
    • 脫標(biāo): 脫離標(biāo)準(zhǔn)流
    • 當(dāng)某一元素浮動之后, 這個元素看上去就是從標(biāo)準(zhǔn)流中刪除了一樣, 這個就是浮動元素脫標(biāo)
  • 浮動元素脫標(biāo)后的影響?
    • 若前面的一個元素浮動了, 而后面的一個元素沒有浮動, 那么前面的一個元素會蓋住后面的元素
  5. 浮動元素的排序規(guī)則
  • 相同方向的浮動元素, 先浮動的元素會顯示在前面, 后浮動的元素會顯示在后面
  • 不同方向上的浮動元素, 左浮動靠左浮動, 右浮動靠右浮動
  • 浮動元素在標(biāo)準(zhǔn)流中的位置決定它在浮動流中的位置
  6. 浮動元素的貼靠現(xiàn)象
  • 如果父元素的寬度能夠顯示所有的浮動元素, 那么浮動的元素會并排顯示
  • 如果父元素的寬度不能顯示所有的浮動元素, 那么會從最后一個元素開始往前貼靠, 知道貼靠到父元素的左邊或右邊

box-sizing屬性(CSS3新增屬性)

• box-sizing：content-box(默認(rèn)值) | border-box

   //標(biāo)準(zhǔn)模式下的盒模型是content-box
   Element 寬高 = 內(nèi)容的寬高 (width | height)+ padding + border
   //怪異模式IE瀏覽器的盒模型是border-box
   Element 寬高 = 內(nèi)容的寬高 (width | height+ padding + border)