1、元素隱藏：

display：none 隱藏不占用空間

visibility：hidden 隱藏但是占用空間

visibility：visible 元素可見 默認值

2、塊元素

display:block 塊元素是一個元素，占用了全部寬度，在前后都是換行符

display:inline 內聯(lián)元素只需要必要的寬度，不強制換行.

CSS position 屬性

static

元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內元素則會創(chuàng)建一個或多個行框，置于其父元素中。

relative

元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。

筆記

Relative相對定位
元素的位置相對于其正常位置
可以移動的相對定位元素的內
容和相互重疊的元素，它原本
所占的空間不會改變。

absolute

元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

fixed

元素框的表現(xiàn)類似于將 position 設置為 absolute，不過其包含塊是視窗本身。

筆記
Fixed定位：相當于元素與窗口的定位。
fixed定位的元素 不會占用正常的文檔流，
空間。
使用方法

position:fixed;
top:40px;
left:40px;
right:40px;
bottom:40px;

CSS相對定位

設置為相對定位的元素框會偏移某個距離。元素仍保持未定位前的形狀，它原本所占的空間仍保留。

如果將 top 設置為 20px，那么框將在原位置頂部下面 20 像素的地方。如果 left 設置為 30 像素，那么會在元素左邊創(chuàng)建 30 像素的空間，也就是將元素向右移動。

#box_relative {
    position: relative;
    left: 30px;
    top: 20px;
}

CSS絕對定位

絕對定位使元素的位置與文檔流無關，因此不占據(jù)空間。

#box_relative {
    position: absolute;
    left: 30px;
    top: 20px;
}

相對定位是“相對于”元素在文檔中的初始位置，而絕對定位是“相對于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相對于”最初的包含塊。

提示：因為絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其它元素。可以通過設置 z-index 屬性來控制這些框的堆放次序。

CSS浮動

1、把框 1 向右浮動時，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣：

2、框 1 向左浮動時，它脫離文檔流并且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，所以它不占據(jù)空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。

3、把所有三個框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。

4、如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間。

5、如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素“卡住”

CSS float屬性

left 元素向左浮動。

right 元素向右浮動。

none 默認值。元素不浮動，并會顯示在其在文本中出現(xiàn)的位置。

inherit 規(guī)定應該從父元素繼承 float 屬性的值。

CSS clear 屬性

clear 屬性規(guī)定元素的哪一側不允許其他浮動元素。
元素浮動之后，周圍的元素會重新
排列，為了避免使用float屬性。
clear屬性指定元素兩側不能出現(xiàn)
浮動元素。