浮動與定位

2021-08-21 13:23:58 字數 1997 閱讀 6239

1、元素的浮動屬性float的

基本的格式

選擇器一般他的值包過3個在內

屬性值                    描述

left                       元素會向左浮動

right                      向右

none                    不浮動

2、清除浮動

clear的屬性

選擇器屬性值                   描述

left                     不允許左側有浮動元素(清除左側浮動的影響)

right                   不允許右側有浮動元素(清除右側浮動的影響)

both                   同時清除的左右兩側的浮動的影響

3、使用after偽物件清除的浮動

使用after為物件也可以清除浮動,但是該方法只是適用於ie8瀏覽器以上的,使用after的為物件,需要注意兩點

(1)必須為需要清除浮動的元素為物件設定「height:0」樣式否則該元素會比其實實際高度高出若干畫素

(2)必須在為物件中設定content屬性,屬性值可以為空,如"content:「」"

4、overflow的屬性

當盒子的大小超過自身的大小是,內容就會溢位,這時如果想要規範溢位內容的,顯示方式,就需要使用css中的overflow屬性。

基本的語法格式如下

選擇器常用的屬性的值

屬性值                     描述

visible                  內容不會被修剪,會出現在元素之外的(預設值)

hidden                溢位內容會被修剪,並且被修剪的內容是不可見的

auto                    在需要時產生滾動條,級自適應所要顯示的內容

scroll                  溢位內容會被修剪,且瀏覽器會始終顯示滾動條

5、元素定位的屬性

(1)定位模式

在css中,position屬性時用於定義元素的定位模式,基本的語法格式如下

選擇器值                              描述

static                     自動定位

relative                 相對定位,相對於其原文件流的位置進行定位

absolute               絕對定位相對其上乙個已經定位的父元素進行定位

fixed                      固定定位,相對於瀏覽器視窗進行的定位。

(2)邊偏移的量

定位模式僅僅用於定義元素以哪種方式的定位,並不能確定元素的具體,通過邊偏移的屬性,top、bottom、left、right,來精確定義定位元素的位置,取值為不同的單位數值或百分比,

邊偏移的屬性                          描述

top                          頂端偏移量,定義元素相對於其父元素,上邊線的距離

bottom                 底部偏移量,定義元素相對父的,下

left                        左                                        左

right                      右                            右

(3)靜態的定位                   當position屬性的取值為static的時候             可以將元素定位於靜態位置。

(4)相對定位                     

當position屬性的取值為relative時,可以成為相對定位。

(5)絕對定位

當position屬性的取值為absolute時,可以成為相對定位。

(6)固定定位

當position屬性的取值為fixed時,可以成為相對定位。

定位 與浮動

1 區塊浮動 絕對定位 脫離正常的文件流,相當於飄起來 向 飄起來,於是就有了float 1,div 是塊級元素,他會自動換行 2,對元素使用 float 浮動的話,他會自動的把定位方式變為 絕對定位 如果絕對定位之後,這個元素下面還有元素,會頂上去 注釋 正常情況下,按照上下的順序正常顯示,當浮動...

浮動與定位

浮動 浮動元素會以某種方式從文件的正常流中刪除,再按照屬性值移動到制定的位置,浮動元素從某種意義上來說自成一派,但是他仍會對文件布局產生影響。注意事項 a.如果要對乙個非替換元素進行浮動,那麼必須為該元素宣告乙個寬度,否則,根據css規則,元素寬度近似為0,元素布局將會出現意想不到的結果。b.元素宣...

浮動與定位

定義 float是css樣式中的定位屬性,用於設定標籤物件 如標籤盒子 標籤等html標籤 的浮動布局,浮動也就是我們所說標籤物件浮動居左靠左 float left 和浮動居右靠右 float right 1 浮動元素會脫離正常的文件流,按照其外邊距指定的位置相對於它的上乙個塊級元素 或父元素 顯示...