本文為大家分享CSS3定位和浮動的基礎(chǔ)概念，與使用方法，供大家參考，具體內(nèi)容如下

一、定位

1、 css定位：

改變元素在頁面上的位置

2、 css定位機制：

普通流：

浮動：

絕對布局：

3、 css定位的屬性:

position 把元素放在一個靜態(tài)的，相對的，絕對的，或者固定的位置中
top/left/right/botom 元素向上/左/右/下的偏移量
overflow 設(shè)置元素溢出其區(qū)域發(fā)生的事情
clip 設(shè)置元素顯示的形狀
vertical-align 設(shè)置元素顯示的對其方式
z-index 設(shè)置元素的堆疊順序/用來設(shè)置元素的堆疊順序，越大越在上方/

position的屬性
static 靜態(tài)的（默認）
relative 相對布局（默認的）
absolute 絕對布局 （和其他的標簽無關(guān)聯(lián)）
fixed 固定的（不會隨著頁面的滾動而動）

實例代碼：

二、浮動

float屬性可用的值:
left/right/none/inherit: 向左、右，不浮動，從父級繼承。
* float

1.浮動后，脫離正常流，在浮動流中排列。任何元素都是作為塊元素來顯示，可設(shè)置寬高，內(nèi)容撐開寬度。
2.很多浮動塊在一起的時候，他們總是找與自己最近的、浮動方向相同的塊來確定自己的位置，如果被迫換行，則以這個最近的元素的高度為基準起新行

clear屬性： 去掉浮動屬性（包括繼承來的）
意思和上面對應(yīng)的一樣

需要清浮動的情況：

子標簽浮動后，父標簽的高度無法被撐開，所以需要清浮動；
新加入的標簽，希望不受之前浮動元素的影響，則需要清浮動；

1.clear:both; height:0; overflow:hidden;
2.overflow:hidden; 觸發(fā)layout 常用于清楚內(nèi)浮動；
3.after 偽對象：給當前對象設(shè)置
.aa:after {content:”.”}
.aa {display:inline-block;}
.aa {display:block;}
想辦法 觸發(fā)ie6的layout渲染機制，靠運氣解決了很多bug，zoom：1可以觸發(fā)?。?！
inline-block對內(nèi)塊 對外行；
4.父標簽一起浮動；
5.position:absolute；清除浮動

display
display：block 以塊元素顯示；
display：none 內(nèi)容消失，不占空間；
display：inline 以行內(nèi)元素顯示，可解決IE6的雙倍BUG；
display：inline-block 對內(nèi)塊，對外行。

visibility：none
隱藏，但是依舊占用空間，影響布局

以上就是關(guān)于CSS3定位和浮動的全部內(nèi)容，希望對大家的學習有所幫助。

最新評論