CSS樣式(四) CSS定位

2021-08-28 06:17:40 字數 1133 閱讀 2135

css定位(positioning)屬性

允許定義元素框相對於其正常位置應該改出現的位置,或者相對于父元素、另乙個元素甚至瀏覽器視窗本身的位置。

一切皆為框

<1>塊級元素:div、h1或p標籤 即:顯示為一塊內容稱之為 「塊框「

<2>行內元素: span,strong,a等元素 即:內容顯示在行中稱 "行內框"

<3>使用display屬性改變成框的型別

即:display:block;讓行內元素設定為會計元素

display:block 公升級為塊級元素,和塊級元素的屬性一樣

display:inline-block 顯示為內聯元素,元素前後沒有換行符

如果對乙個元素進行相對定位,它將出現在它所在的位置上。

通過設定垂直或水平位置,讓這個元素「相對於」它的起點進行移動

.adv_relative

元素的位置相對於最近的已定位祖先元素,如果元素沒有已定位

的祖先元素,它的位置相對於最初的包含塊。

.adv_absolute

float 屬性定義元素在哪個方向浮動,在 css 中,任何元素都可以浮動

float屬性定義了向哪浮動

div不加高度使用了浮動,邊框就會不能將盒子包圍起來

所以就會用到清除浮動

比如:

如果這樣不加清除浮動的話,效果是這樣的

盒子不給高度用浮動效果這樣,顯然不行,而網頁中的布局經常有不給高度的情況,不定高可以隨著內容延伸,所以需要處理完之後清除浮動,有兩種方法,一種直接加

這個要單獨給個盒子,但是要和內容同級巢狀

第二種做成通用樣式

.clear

第二種更加常用,用到清除浮動的地方會很多,而乙個乙個的寫顯然浪費時間,同時也降低效率

加了清除浮動之後效果:

CSS樣式 定位

定位方式 偏移 static 所有不設定定位的元素,定位方式都是static 預設 1.不脫離標準流 2.偏移不起作用 top right bottom left 3.消除定位 實戰中的應用 relative 相對定位 1.不脫離標準流 2.偏移起作用 top right bottom left,起...

CSS樣式的定位

當元素沒有position定位屬性時,所有元素按照他們自己的定位標準進行定位,比如說 每乙個div標籤就佔一行。但是當元素我有了position屬性,那麼div原先占有一行的屬性就被覆蓋掉了 可以說沒有用了 例 控制代碼1控制代碼2 containr 控制代碼控制代碼cont 結果 現在來看看abs...

css複習整理 四 css定位

css有三種基本的定位機制 普通流 浮動和絕對定位。除非專門指定,否則所有框都在普通流中定位。也就是說,普通流中的元素的位置由元素在 x html 中的位置決定。塊級框從上到下乙個接乙個地排列,框之間的垂直距離是由框的垂直外邊距計算出來。行內框在一行中水平布置。可以使用水平內邊距 邊框和外邊距調整它...