CSS基礎 浮動與定位

2021-09-28 14:31:31 字數 806 閱讀 2493

(1)浮動(float)

float:

引數:none:預設 無浮動

left:左浮動

right:右浮動

(2)清除浮動(clear)

clear:

引數none:無效果

left:清除右浮動

right:清除右浮動

both:擴充父元素

2.定位(position)

引數:

static:靜態定位

relative:相對定位

是以元素作為基準設定偏移量

absolute:絕對定位

預設以瀏覽器為基準

設定之後其他浮動元素以這個元素浮動

fixed:固定定位

以瀏覽器視窗

3.z-index

z-index屬性;調整重疊元素的上下位置,值大的位於值小的元素上方,預設是0,可以為正也可以為負,元素相同則保持原樣上下覆蓋關係
4.display

display屬性:

引數:none:預設

inline:行級元素

block:塊級元素

例1 工字型排版

頂部導航

left

right-上

right-下

ad_left

ad_center

ad_right

頁尾

CSS浮動與定位

浮動 如果希望塊元素在頁面中水平排列,使用float浮動元素,脫離文件流 可選值 none 預設,元素在文件流中排列 left 元素脫離文件流,向頁面左側浮動 right 元素脫離文件流,向頁面右側浮動 元素浮動後,下邊的元素會立即向上移動 a浮動後,b會直接頂到上面 元素浮動後不會超出父元素邊框和...

CSS浮動與定位

css浮動 clear 向哪邊浮動,清除哪邊 clear left 在左側不允許浮動元素。clear right 在右側不允許浮動元素。clear both 在左右兩側均不允許浮動元素 clear none 預設值。允許浮動元素出現在兩側。clear inherit 規定應該從父元素繼承 clear...

CSS浮動與定位

1.1浮動 浮動 是指設定了浮動屬性的元素會脫離標準標準流的控制,移動到其父元素中指定位置的過程。它可以讓任何盒子可以在一行排列,目的用來布局。在css中,通過float屬性來定義浮動,其基本語法格式如下 float none left right選擇器 屬性值描述 left 元素向左浮動 righ...