css裡的浮動布局

2021-10-07 02:12:49 字數 676 閱讀 3083

float浮動

none 預設值不浮動

left

right

inherit 繼承父元素的float

block(塊)元素的特點:

①總是在新行上開始;

②高度,行高以及外邊距和內邊距都可控制;

③寬度預設是它的容器的100%,除非設定乙個寬度。

④它可以容納內聯元素和其他塊元素

塊級元素不設定寬度之後使用浮動

就會根據內容進行自動調整

設定浮動元素會脫離正常的文件流

設定浮動之後在y \ z 軸上就會浮動起來

父元素的高度就會變為0

浮動的元素脫離了文件流

但是裡面的內容仍然佔據空間

會根據相對位置進行布局

清除浮動

clear:both //清除兩側的浮動

定位position:

static 預設屬性

relative 可以通過設定偏移量和z-index來控制相對於其正常位置進行的便宜

absolute 相對上乙個不為static的父元素進行絕對定位,如果不指定父元素的position,將相對於整個html文件進行絕對定位

fixed 生成絕對定位的元素,相對於瀏覽器視窗進行定位,不論網頁如何滾動,該元素始終停留在螢幕的某個位置上

inherit 繼承父元素的定位屬性

css浮動布局

float 是 css 的定位屬性。在傳統的印刷布局中,文字可以按照需要圍繞。一般把這種方式稱為 文字環繞 在網頁設計中,應用了css的float屬性的頁面元素就像在印刷布局裡面的被文字包圍的一樣。浮動的元素仍然是網頁流的一部分。這與使用絕對 定位的頁面元素相比是乙個明顯的不同。絕對定位的頁面元素被...

css浮動布局

清除浮動 形狀浮動 使用浮動可以控制相鄰元素間的排列關係。float left 向左浮動 float right 向右浮動 float none 不浮動 沒有設定浮動的塊元素是獨佔一行的。浮動是對後面元素的影響,第二個元素設定浮動對第乙個元素沒有影響。表示第乙個元素div.first of type...

CSS浮動布局

預設文件流就是對頁面布局不加任何修飾,元素自動的布局方式,其特點有 1 元素在頁面中的顯示順序與元素在 現的順序是一致的。2 塊級元素獨佔一行空間,寬度預設為父級的100 高度由其內容高度所決定。3 行內元素與其他元素共享一行空間,寬高由其內容所決定。但是預設文件流往往不能滿足我們的布局需求,我們可...