布局和檔案流(絕對定位和浮動在布局中的使用

2021-07-10 07:17:51 字數 1057 閱讀 3151

必須知道的是:

float和position:absolute會讓元素脫離檔案流

其他元素就像沒有看到這樣的元素一樣排列,(但是它可以看到其它元素

比如:

三列布局中,左邊向左浮動右邊向右浮動,中間沒有看到左邊,但是右邊看到了中間,所以右邊無法浮動在同一行,而是被擠下去,如果使用position:absolute;top:0;right:0就不會這樣,但是去掉了top:0就會這樣。

但是float的時候 其他元素(下面的元素)中的文字會看到float的元素,會為float元素讓出位置,不過position:absolute不會。

脫離檔案流也在dom樹中

布局有三種:

流式布局

浮動布局

絕對定位布局

流式布局 一列 居中

margin:0 auto;

浮動布局實現兩列:

左邊float:left

右邊:float:right

絕對定位實現兩列

左邊 position:absolute;left:0;

右邊 position:absolute;right:0

絕對定位實現三列布局:

左邊固定 右邊固定 中間自適應

左邊 position:absolute;left:0;width:200px;

右邊 position:absolute;right:0;width:300px;

中間 margin:0 300px 0 200px;

左右已經脫離文件流,所以中間當它倆不存在,跟它倆看起來是在同一行

元素會收到浮動影響,所以需要清除浮動

清除浮動的兩種方法:

①clear:both

②width:100%;overflow:hidden;

流式布局 浮動布局及絕對定位布局

知識點 1.掌握三大布局技巧 流式布局 浮動布局及絕對定位布局 2.精通標準文件流 盒子模型 float屬性以及position屬性等知識。w3c由全球資訊網聯盟制定的一系列標準 1.結構化標準語言 html和xml 2.表現標準語言 css 3.行為標準語言 dom和ecmascript css三...

常用布局(浮動布局 絕對定位布局 聖杯布局)

常用布局 1.流式布局 2.浮動布局 3.絕對定位布局 4.聖杯布局 body 浮動布局 header bd footer main leftside right 絕對定位布局 header bd footer leftside main right 聖杯布局 header main bd foot...

CSS教程 相對 絕對定位及布局和浮動

相對定位是乙個非常容易掌握的概念。如果對乙個元素進行相對定位,它將出現在它所在的位置上。然後,可以通過設定垂直或水平位置,讓這個元素 相對於 它的起點進行移動。如果將 top 設定為 20px,那麼框將在原位置頂部下面 20 畫素的地方。如果 left 設定為 30 畫素,那麼會在元素左邊建立 30...