技術標籤：CSS3css3

網頁佈局

一、標準流

• 標籤按照規定好預設方式排列

二、浮動

div {
float: none; /*不浮動*/
float: left; /*向左浮動*/
float: right; /*向右浮動*/
}

1. 浮動特性

• 浮動元素會脫離標準流
  • 浮動的盒子不再保留原先的位置
• 浮動的元素會一行內顯示並且元素頂部對齊
• 浮動的元素會具有行內塊元素的特性
  • 如果塊級盒子沒有設定寬度，預設寬度和父級一樣寬，但是新增浮動後，它的大小根據內容來決定。
  • 浮動的盒子中間沒有縫隙
  • 行內元素同理

2. 清除浮動

2.1 清除浮動的本質

• 清除浮動的本質是清除浮動元素造成的影響
• 如果父盒子本身有高度，則不需要清除浮動
• 清除浮動之後，父級就會根據浮動的子盒子自動檢測高度

2.2 清除浮動的方法

div {
clear: both; /*同時清除左右*/
clear: left; /*清除左浮動*/
clear: right; /*清除浮動*/
}

2.2.1 額外標籤法

<div style="clear: both"></div>

• 在浮動元素末尾新增一個空的標籤
• 新的空標籤必須是塊級元素

2.2.2 父級新增 overflow 屬性

• 給父級元素新增 overflow 屬性，將其屬性值設定為 hidden、 auto 或 scroll

三、定位

1. 定位組成

• 定位 = 定位模式 + 邊偏移

1.1 定位模式

• 決定元素的定位方式，通過 position 屬性設定

1.1.1 靜態定位

• 元素的預設定位方式

1.1.2 相對定位

• 相對於自己原來的位置來移動
• 原來在標準流的位置繼續佔有，不脫離標準流

1.1.3 絕對定位

• 相對於祖先元素來移動
• 不再佔有原先的位置，脫離標準流
• 子級是絕對定位的話，父級要用相對定位

1.1.4 固定定位

• 以瀏覽器的可視視窗為參照點移動元素
  • 跟父元素沒有任何關係
  • 不隨滾動條滾動
• 不再佔有原先的位置，脫離標準流

1.1.5 粘滯定位

• 相對定位和固定定位的混合

 div { 
 position: sticky; 
 top: 10px; 
 }

• 特點
  • 以瀏覽器的可視視窗為參照點移動元素（固定定位特點）
  • 佔有原先的位置（相對定位特點）
  • 必須新增 top 、left、right、bottom 其中一個才有效

1.2 邊偏移

• 決定元素的最終位置
• 屬性：top bottom left right

2. 定位拓展知識

2.1 定位疊放次序 z-index

 div { z-index: 1; }

• 數值可以是正整數、負整數或 0, 預設是 auto，數值越大，盒子越靠上
• 如果屬性值相同，則按照書寫順序，後來居上
• 數字後面不能加單位
• 只有定位的盒子才有 z-index 屬性

2.2 絕對定位的盒子居中

• left: 50%;：讓盒子的左側移動到父級元素的水平中心位置
• margin-left: -100px;：讓盒子向左移動自身寬度的一半

元素的顯示與隱藏

一、display 屬性

• 設定一個元素應如何顯示

1. 隱藏

 div { display: none; }

• 隱藏元素後，不再佔有原來的位置

2. 顯示

 div { display: block; }

• 除了轉換為塊級元素之外，同時還有顯示元素的意思

二、visibility 可見性

• 指定一個元素應可見還是隱藏

1. 元素隱藏

 div { visibility: hidden ; }

• 隱藏元素後，繼續佔有原來的位置

2. 元素可視

 div { visibility: visible ; }

三、overflow 溢位

• 指定了如果內容溢位一個元素的框（超過其指定高度及寬度） 時，會發生什麼
• 只是對於溢位的部分處理