布局的三種方式

一.常規流

以前沒有學布局的時候,屬於常規流

元素按照常規顯示方式顯示,塊級元素垂直排列、行內元素就是水平排列

二.浮動

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

CSS+DIV布局（二）