CSS定位 層疊效果和浮動 04

2021-10-03 18:51:21 字數 825 閱讀 8130

1、絕對定位

2、相對定位

相對定位的位置是相對於元素自身的正常初始位置而言的。因此,即使是內容完全一樣的相對定位**作用於初始位置不同的多個元素上也僅能保證位移的方向一致,並不能代表這些元素最終將出現在相同的位置上。

3、層疊效果

在css中,除了定義在html元素在水平和垂直方向上的位置,還可以定義多個元素在一起疊放的層次。使用屬性z-index可以為元素規定層次順序,其屬性值為整數,並且該數值越大將疊放在越靠上的位置。

4、浮動

浮動效果float

在css中float屬性可以用於令元素向左或向右浮動。該屬性有四種屬性值:

left:向左浮動;

right:向右浮動;

none:不浮動;

inherit:繼承父元素的float屬性值

在對元素宣告浮動效果後,該浮動元素會自動生成乙個塊級框架,因此需要明確指定浮動元素的寬度,否則會被預設不佔空間。元素在進行浮動時會朝著指定的方向一直移動,直到碰到頁面的邊緣或者上乙個浮動框的邊緣才會停下來

2.清理浮動 clear

css中的clear屬性可以用於清理浮動效果,它可以規定元素的哪一側不允許出現浮動元素。該屬性有五種屬性值:

left:元素的左側不允許有浮動元素;

right:元素的右側不允許有浮動元素;

both:元素的兩側均不允許有浮動元素

none:表示允許浮動元素出現在左右兩側;

inherit:繼承父元素的clear屬性值

CSS 定位和浮動

css 為定位和浮動提供了一些屬性,利用這些屬性,可以建立列式布局,將布局的一部分與另一部分重疊,還可以完成多年來通常需要使用多個 才能完成的任務。定位的基本思想很簡單,它允許你定義元素框相對於其正常位置應該出現的位置,或者相對于父元素 另乙個元素甚至瀏覽器視窗本身的位置。顯然,這個功能非常強大,也...

CSS 定位和浮動

css 為定位和浮動提供了一些屬性,利用這些屬性,可以建立列式布局,將布局的一部分與另一部分重疊,還可以完成多年來通常需要使用多個 才能完成的任務。定位的基本思想很簡單,它允許你定義元素框相對於其正常位置應該出現的位置,或者相對于父元素 另乙個元素甚至瀏覽器視窗本身的位置。顯然,這個功能非常強大,也...

CSS定位和浮動

基本思想 允許定義元素框相對於其正常位置應該出現的位置,或者相對于父元素,另乙個元素和瀏覽器視窗的本身.一切皆為框 元素分為塊級元素和行級元素兩種 可以使用display屬性改變框的型別 display屬性值 詳解block 可以讓行元素表現得像塊級元素一樣 none 生成的元素沒有框,該框的內容不...