div+css布局

• 表格布局 table布局
• div+css布局 浮動(dòng)布局

塊狀元素和行內(nèi)元素

• display: inline/block/none/inline-block

• 塊狀元素

  • 獨(dú)占一行，總是在新行開(kāi)始
  • 塊狀元素： 格式標(biāo)簽、列表標(biāo)簽、div、table、form、tr
  • 塊狀元素的內(nèi)部可以嵌套其他元素

• 行內(nèi)元素

  • 不會(huì)獨(dú)占一行
  • 行內(nèi)元素： 文本、span、a、img、td、input、select、textarea
  • 行內(nèi)元素可以被當(dāng)做文本處理 ， 文本屬性會(huì)對(duì)行內(nèi)元素生效
  • 行內(nèi)元素一般不需要再嵌套其他元素
  • 行內(nèi)設(shè)置設(shè)置 widht/height 不生效的，padding生效，margin只有左右兩邊生效

• 行內(nèi)元素 塊狀元素 轉(zhuǎn)換

  • display 值：block inline

• inline-block

  • 元素既有塊狀的特點(diǎn)，也有行內(nèi)的特顯
  • 可以設(shè)置 寬高，邊距
  • 文本修飾可以對(duì)其起作用
  • 不會(huì)獨(dú)占一行

盒子模型

• content 內(nèi)容
• padding 填充 內(nèi)邊距 補(bǔ)白
• border 邊框
• margin 外邊距 外補(bǔ)白
• 盒子的實(shí)際大小 = 內(nèi)容寬高+padding+border

Document樹(shù)

• 父元素
• 子元素
• 后代元素
• 祖先元素
• 兄弟元素（具有相同父元素）

盒子 在標(biāo)準(zhǔn)文檔流 中的點(diǎn)位原則

• 行內(nèi)元素（水平方向的兄弟元素） 水平margin （兩個(gè)兄弟元素之間的距離是margin之和）
• 塊狀元素 （margin塌陷） 上下兄弟元素的距離，margin比較大
• 給子元素設(shè)置margin-top，會(huì)作用在父元素上（margin塌陷）。 可以給父元素設(shè)置border，或者設(shè)置overflow

相關(guān)CSS屬性

布局樣式

• display: none/ block/ inline / inline-block
• position: static / relative / absolute / fixed

尺寸屬性

• width
• max-width
• min-width
• height
• max-height
• min-height

內(nèi)補(bǔ)白

• padding-left
• padding-right
• padding-top
• padding-bottom
• padding

外補(bǔ)白

• margin-left
• margin-right
• margin-top
• margin-bottom
• margin