網(wǎng)頁布局

• 一、網(wǎng)頁布局發(fā)展
• 二、 float
• 三、position
• • 屬性值
  • • static：默認(rèn)值
    • relative：
    • absolute
    • fixed
  • 堆疊順序
  • • z-index

---

一、網(wǎng)頁布局發(fā)展

• 原先：用table布局（工作量大，維護(hù)困難，但兼容性好）
• 現(xiàn)在：用div+css布局（除了兼容性，都好）

二、 float

• 為了實(shí)現(xiàn)兩個(gè)塊級元素并列顯示
• 屬性：

• 如果包含框太窄，浮動(dòng)塊向下移動(dòng)，能放下為止，如果浮動(dòng)元素的高度不同，浮動(dòng)塊會盡可能向上移動(dòng)
  

• 文字環(huán)繞效果實(shí)現(xiàn)：圖片浮動(dòng)，但文字不能被覆蓋而形成環(huán)繞
  （調(diào)整圖片和段落之間空白需要設(shè)置圖片的padding或margin）
  

• 浮動(dòng)會導(dǎo)致父元素高度塌陷

  解決方案：

  在包含浮動(dòng)元素的父元素上

• 設(shè)置偽類 :after 并添加 clear：both屬性 （清除浮動(dòng)帶來的效果）

• 添加 overflow：hidden （溢出處理）

• 注意：
  ? 浮動(dòng)元素距離父元素邊框的位置，是該側(cè)的父元素 padding +自身 margin
  的值
  ? 通常不會超過父元素的邊界
  ? 元素一旦浮動(dòng)就不屬于父元素了
  ? 浮動(dòng)元素不會相互重疊
  ? 不能上下浮動(dòng)
  ? 如果父元素寬度不夠，浮動(dòng)元素會另起一行顯示

三、position

屬性值

static：默認(rèn)值

relative：

• 保留自身位置

• 相對原來位置移動(dòng)

• 配合top，left，bottom，right 等使用

absolute

• 不保留自身位置
• 向上找已經(jīng)定位的父元素（就是設(shè)置了除了static以外的position屬性的元素），并相對于其移動(dòng)，若無，相對于body移動(dòng)
• 配合top，left，bottom，right 等使用

fixed

• 就是漂浮廣告
• 以瀏覽器窗口為參照物進(jìn)行定位
• 配合top，left，bottom，right 等使用

堆疊順序

z-index

• 類似于鋪床單
• 設(shè)置的屬性值越大，鋪床單越靠上
• 僅在定位元素上奏效

總結(jié)

以上是生活随笔為你收集整理的Web开发（一）·期末不挂之第六章·网页布局(浮动定位)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。