1。盒子的顯隱

　　display:none      在頁面中不佔位，採用定位佈局後，顯示隱藏都不會影響其他標籤，不需要用動畫處理時，一般用這個

　　opacoity : 0        在頁面中佔位，採用定位佈局後，顯示隱藏都不會影響其他標籤，要用動畫處理時，一般用這個

　　一般顯隱操作的盒子都是採用定位佈局：

　　　　　懸浮父級，顯示子級。

2。相對定位佈局

　　　　設定定位屬性，要先開啟定位方位

position: relative;

通過定位方位完成佈局

top: 100px;

left: 100px;

bottom: 100px;

right: 100px;

　　　　結論：1.參考系：自身原有位置********，  right參考的就是原有位置的右邊界；

　　　　　　　2.top , bottom , left , right 都可以完成自身定位。left與right同時存在，只有left生效， 上下同時存在，只有top生效。

　　　　　　　3. left=  -right  　　top=  -bottom

　　　　　　　4.佈局後不影響自身原有位置

　　　　　　　5.不脫離文件流

3。絕對定位佈局

　　參考系: 最近的定位父級

　　position: absolute;  => 打開了四個定位方位

　　1.top|bottom|left|right都可以完成自身佈局, 上下取上,左右取左

　　2.父級必須自己設定寬高，絕對定位佈局一定存在父子關係

　　3.父級的高度不再依賴於子級，子級脫離文件流

　　絕對定位需要大家脫離文件流，相互不會影響佈局，每個都是獨立相對於父級進行佈局的個體

4。固定定位佈局

　　1參考系: 頁面視窗

　　2.position: fixed;  => 打開了四個定位方位

　　3.top|bottom|left|right都可以完成自身佈局, 上下取上,左右取左

　　4.相對於頁面視窗是靜止的

　　5.完全脫離文件流

5。z-index

　　修改顯示層級(在發生重疊時使用), 值取正整數, 值不需要排序隨意規定, 值大的顯示層級高

6。流式佈局思想

　　1. 百分比

　　2. vw | vh => max-width(height) | min-width(height)

　　3. em | rem

盒子的顯隱