CSS定位與佈局(display+visibility+position+z-index+float+清除浮動+溢出處理)

1.display屬性 （盒子模型的行爲方式）

display元素決定了盒模型的行爲方式。

• display: block

是佔用最大可用寬度的元素，前後都有換行符。

• display: inline

只佔用盡可能多的寬度，不強制換行。

注意事項
設置元素的display屬性，只會改變元素的顯示方式，不會改變元素的類型。帶有display：block內聯元素不允許在其中包含其他塊元素。

• display: none 隱藏元素

none 隱藏一個元素，因此不佔用任何空間，好像不曾來過這繁華且莫測的世界。

• 其他參數值： list-item、table、table-cell、table-column、grid。

2.visibility屬性

visibility:visible : 元素可見

visibility:hidden : 元素不可見

注意與display:none的區別

visibility:hidden;隱藏元素，但是仍然佔據與之前相同的空間，仍然影響頁面佈局。
display：none 隱藏一個元素，是不佔用空間的，且沒有爲該元素保留一個位置。

3.CSS position定位

功能：

• 定位元素
• 將元素放在另一個元素之後，並指定元素內容太大時應該發生的情況。

屬性值
使用top、bottom、left、right 屬性定位元素的時候，前提條件是position屬性進行初始化設置參數，只有這樣，纔可以起作用。

absolute絕對

參照物：爲具有非靜態定位屬性的第一個父 （長輩元素） 元素
特性：

1. 當使用絕對定位時，會使得元素脫離標準文檔流，換句話說，就是不佔用標準控件，會漂浮起來。

2. 通常body的一級子元素（親兒子）不使用絕對定位。

3. 可以重疊其他元素。

fixed固定

參照物：瀏覽器窗口（body）。
特性：

1. 不隨窗口的滾動而滾動,脫離標準文檔流。
2. fixed參數能把元素從正常的順序中拉出。可以無視其他元素的定位，設置了fixed的元素,可以重疊在其他元素上。
3. 通常固定定位是做懸浮塊用，比如固定頂部的導航，右下角的廣告等。

relative 相對

參照物：自身
特性：

1. 移動：移動位置，只改變顯示位置，不改變空間位置。

2. 不常用來改變上下方向的位置，通常用來改變左右位置；

3. 通常也可以專門用來作爲絕對定位需要的參照物來添加相對定位；

static 靜態定位（默認值）

靜態定位元素不受 top、bottom、left、right屬性的影響。

inherit 繼承父級元素的定位情況

4.z-index指定元素的堆棧順序

• 在製作鬧鐘案例的時候，秒針>分針>時針 就是用了這個屬性。
• 默認情況下，當元素堆疊的時候，最後一個元素會在其他元素上方出現。
  == z-index僅適用於定位元素（position:absolute，position:relative 或 position:fixed）。換句話說，爲了能使z-index能起作用，我們必須使用position屬性==

5.float浮動

功能
使用float屬性，可以使元素向左或者向右推，以便於允許其他元素環繞。
使用

• float通常與圖像一起使用，在處理頁面佈局的時候，也非常有用。

1. left 使元素向左浮動
2. right 使元素向右浮動
3. none 確保元素不進行浮動
   注意事項
   1.元素是水平浮動的，這意味着元素只能左右浮動，不能上下浮動。
   2.當幾個浮動的元素相鄰，如果空間(如寬度width)足夠，那麼它們會並排顯示

6.清除浮動 clear

元素設置浮動之後，會影響其後面的元素，以圍繞在其周圍。這是，我們清除浮動，可以消除這種影響。
clear屬性指定某個元素不受其他設置了float屬性的元素的影響。

clear: left;
clear: right;

clear: both; 清除來自任何一個方向的浮動。

7. overflow 溢出處理

指定內容溢出元素邊框時發生的行爲。
值

• visible 默認值
• scroll 阻擋內容移除，會增加水平和垂直方向兩個滾動條，拉動滾動條瀏覽所有內容。
• auto 如果內容溢出被限制，則會添加一個滾動條，使超出的內容可以通過滾動展示出來。。
• hidden 隱藏溢出部分，溢出的內容不可見。