網頁布局

• 一、網頁布局發展
• 二、 float
• 三、position
• • 屬性值
  • • static：默認值
    • relative：
    • absolute
    • fixed
  • 堆疊順序
  • • z-index

---

一、網頁布局發展

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

二、 float

• 為了實現兩個塊級元素并列顯示
• 屬性：

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

• 文字環繞效果實現：圖片浮動，但文字不能被覆蓋而形成環繞
  （調整圖片和段落之間空白需要設置圖片的padding或margin）
  

• 浮動會導致父元素高度塌陷

  解決方案：

  在包含浮動元素的父元素上

• 設置偽類 :after 并添加 clear：both屬性 （清除浮動帶來的效果）

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

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

三、position

屬性值

static：默認值

relative：

• 保留自身位置

• 相對原來位置移動

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

absolute

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

fixed

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

堆疊順序

z-index

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。