CSS+DIV佈局(二)
佈局的三種方式
一.常規流
以前沒有學佈局的時候,屬於常規流
元素按照常規顯示方式顯示,塊級元素垂直排列、行內元素就是水平排列
二.浮動
float:left;
float:right:
float:none;
典型應用兩個div水平排列
**************************佈局步驟**************************************
一.畫效果圖
二.使用DIV進行分割
三.使用CSS來控制DIV進行佈局
遵循盒模型
四. 使用以上三步進行細分
**************************************浮動******************************************
1. 浮動以後 元素會脫離常規流,脫離元素的常規顯示方式
div常規顯示方式 垂直排列 ----->水平排列
兩個div的間距 常規(最大的)--------> 取兩個間距之和
2.第一個浮動元素會緊貼父容器的邊框,第二個元素會緊貼上一個浮動元素的邊框
浮動元素會讓出它的位置
**************************定位**************************************
1. 靜態定位
以前沒有學定位的時候 都是靜態定位,靜態定位的特點 元素會在它的最初位置靜止不動
position:static;
left:20px;/*距離左邊20px 但是怎麼寫都不動*/
2. 相對定位
相對於元素的最初位置
position:relative;
top:30px;/*向下移動30畫素 反向是正好相反的*/
3. 絕對定位
也是相對定位,只不過參照物不同, 參照的是已經定位的父容器 ,如果父容器沒有定位,參照的是最初的包含塊(body)
需求: 小的div跑到右上角
父容器使用相對定位,子容器用絕對定位
參照的是離它最近的已經定位的父容器
4.固定定位
也是相對定位, 它的參照物是瀏覽器的視窗
position:fixed;
top:100px;
************************************z-index (z-軸)***************************
用來調整元素的上下位置 預設值是0 值大的 在上面
注意: z-index 必須要加在已經定位的元素上才起作用
position:relative;
z-index:1;
************************************SuckFish 二級選單(純CSS實現)***************************
一.先隱藏li下的ul