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 行內元素與其他元素共享一行空間,寬高由其內容所決定。但是預設文件流往往不能滿足我們的布局需求,我們可...