CSS定位使用方法

2022-07-28 19:15:13 字數 2099 閱讀 7677

對於網頁頁面布局來說,使用定位進行布局十分的方便。

絕對定位(使用絕對定位應當將父元素設定為相對定位,否則元素絕對定位的基準會一直尋找外層非靜態定位元素):

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>title

title

>

<

style

>

.box0

.box0-1,.box0-2

.box0-1

.box0-2

style

>

head

>

<

body

>

<

div

class

="box0"

>

<

div

class

="box0-1"

>0-1

div>

<

div

class

="box0-2"

>0-2

div>

div>

body

>

html

>

結果如下:

0-10-2

如果不使用定位,要實現這樣的效果,需要使用css屬性為:

.box0.box0-1,.box0-2.box0-1.box0-2

使用邊距和浮動是乙個計算的過程,需要把握好每乙個畫素之間的關係。而使用絕對定位就是單純的找位置,只要量得住,那就找的準,直接粗暴。需要注意的是,絕對定位的元素脫離了標準文件流,其本身的位置並不會保留,所以不能和浮動同時使用。並且也不建議和margin一起使用。

可以使用絕對定位將元素進行垂直方向的居中,需要配合css3的transform屬性。

div

translatey函式是在元素y方向上進行位移,使用百分比是是依照元素盒模型高度為100%的。這種定位可以用於元素高度不確定的情況,當然能使用彈性盒模型更加方便。

對於相對定位來說,由於元素本身的位置並不會消失,所以配合浮動更加好用,否則使用絕對定位更方便。

如下(便於觀察,兩個小塊設定100的上外邊距,此時原本位置應從下方3/4開始):

1-11-2

結果如下:

1-11-2

相對定位的相對,就是指沒有設定定位值,元素所在的位置,根據**順序,後者會對前者內容進行覆蓋。

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>title

title

>

<

style

>

.box2

.box2-1

.box2-1

style

>

head

>

<

body

>

<

div

class

="box2"

>

<

div

class

="box2-1"

>我被固定了

div>

div>

body

>

html

>

結果自己找吧:

我被固定了

總之,不同的定位方式有不同的作用,使用定位的目的是讓**簡潔直觀,所以具體使用哪一種應當根據實際情況而定。

css定位的型別和使用方法

css 定位屬性 css 定位屬性允許你對元素進行定位。屬性 描述 position 把元素放置到乙個靜態的 相對的 絕對的 或固定的位置中。top 定義了乙個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。right 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。bottom 定義了定位...

定位的使用方法

定位有著超出尋常的地位,它可以實現你想要在任何位置放置東西。定位的使用方法有很多,他可以讓你在排版不周的時候可以讓你強行任意移動任何到東西的位置。定位的乙個基礎用法,是不是每次都用a類包裹住b類,但是每次b類還是會被排擠出a類的範圍,這時候用浮動 外邊距和內邊距去排版,不用這麼麻煩。定位就可以搞定。...

css使用方法

1.css selector支援id class的定位 與html中css定位相同 號表id 定位有id的標籤方式更加簡潔 i1.代表class定位有id的標籤方式更加簡潔 c1class定位還提供了多個class定位通過連續.來縮小範圍 c1.c2.c3 2.css selector支援標籤定位沒...