當(dāng)前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS布局 ——从display，position， float属性谈起

發(fā)布時(shí)間：2025/6/15 CSS 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS布局 ——从display，position， float属性谈起小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

頁面布局，或者是在頁面上做些小效果的時(shí)候經(jīng)常會(huì)用到 display,position和float 屬性，如果對它們不是很了解的話，很容易出現(xiàn)一些莫名其妙的效果，痛定思痛讀了《CSS Mastery》后總結(jié)一下。

讓我們從基礎(chǔ)的CSS知識(shí)談起，相信很多初學(xué)者和小弟一樣不明白CSS原理，一味追求效果，結(jié)果頁面漏洞百出，錯(cuò)誤匪夷所思，關(guān)于盒模型我就不多說了，網(wǎng)上很多，注意一下IE和其他瀏覽器（W3C規(guī)范）的區(qū)別就好了。

塊級元素與行內(nèi)元素

首先談?wù)勅藗兘?jīng)常提及的塊級元素和行內(nèi)(內(nèi)聯(lián))元素

p, ul, form, div等元素被稱為塊級元素，這些元素顯示為一塊兒內(nèi)容（會(huì)自動(dòng)換行），span, input 等元素稱為行內(nèi)元素，這兩者主要區(qū)別就是塊級元素會(huì)從上到下一個(gè)個(gè)垂直排列，每個(gè)自占一行，如下即使兩個(gè)div之間沒任何元素，綠色的div仍然會(huì)顯示在hongsediv下方，而不是右方

而行內(nèi)元素在一行中水平排列，行內(nèi)元素的高度由其內(nèi)容撐開，不可顯示的設(shè)置其高度，這就是為什么我們一次次的在span上設(shè)置height屬性不好使的原因。

簡單了解了這些知識(shí)，讓我們看看display常用的幾個(gè)屬性，一些不太常用的我也不明白，就不說了

值	描述
none	此元素不會(huì)被顯示。
block	此元素將顯示為塊級元素，此元素前后會(huì)帶有換行符。
inline	此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。
inline-block	行內(nèi)塊元素。（CSS2.1 新增的值）

我們在顯示隱藏元素的時(shí)候經(jīng)常會(huì)用到把display設(shè)為none或者’’，設(shè)為none效果很明顯，就是讓元素脫離文檔流，不顯示，不占文檔空間，而設(shè)為’’其實(shí)就是設(shè)置為元素默認(rèn)屬性block或inline，inline-block屬性是CSS2.1新加值，IE8以上及其他主流瀏覽器都已經(jīng)支持，它可以使元素像行內(nèi)元素那樣水平一次排列，但是框的內(nèi)容符合塊級元素行為，能夠顯示設(shè)置寬，高，內(nèi)外邊距。很有意思。

還有一點(diǎn)兒很有意思，可以通過不同的賦值改變元素生成框的類型，也就是說，通過將display屬性設(shè)置為block，可以使行內(nèi)元素表現(xiàn)的想塊級元素一樣，反之亦然。

定位

要想了解CSS元素定位就需要了解position屬性了，position屬性有幾個(gè)常用值如下

值	屬性
inhert	規(guī)定應(yīng)該從父元素繼承 position 屬性的值。
static	默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
relative	生成相對定位的元素，相對于元素本身正常位置進(jìn)行定位。因此，"left:20" 會(huì)向元素的 LEFT 位置添加 20 像素。
absolute	生成絕對定位的元素，相對于 static 定位以外的第一個(gè)祖先元素進(jìn)行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。
fixed	生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。

CSS有三種基本的定位機(jī)制：普通流，浮動(dòng)和絕對定位

普通流是默認(rèn)定位方式，在普通流中元素框的位置由元素在html中的位置決定，元素position屬性為static或繼承來的static時(shí)就會(huì)按照普通流定位，這也是我們最常見的方式。

相對定位比較簡單，對應(yīng)position屬性的relative值，如果對一個(gè)元素進(jìn)行相對定位，它將出現(xiàn)在他所在的位置上，然后可以通過設(shè)置垂直或水平位置，讓這個(gè)元素相對于它自己移動(dòng)，在使用相對定位時(shí)，無論元素是否移動(dòng)，元素在文檔流中占據(jù)原來空間，只是表現(xiàn)會(huì)改變。

普通流： <div style="border: solid 1px #0e0; width:200px;"><div style="height: 100px; width: 100px; background-color: Red;"></div><div style="height: 100px; width: 100px; background-color: Green;"></div><div style="height: 100px; width: 100px; background-color: Red;"></div></div>

相對定位： <div style="border: solid 1px #0e0; width:200px;"><div style="height: 100px; width: 100px; background-color: Red;"></div><div style="height: 100px; width: 100px; background-color: Green; position:relative; top:20px; left:20px;"></div><div style="height: 100px; width: 100px; background-color: Red;"></div></div>

上面例子可以看出，對綠色div進(jìn)行相對定位，分別右移，下移20px后第二個(gè)紅色div位置并沒有相應(yīng)變化，而是在原位置，綠色div遮擋住了部分紅色div。

相對定位可以看作特殊的普通流定位，元素位置是相對于他在普通流中位置發(fā)生變化，而絕對定位使元素的位置與文檔流無關(guān)，也不占據(jù)文檔流空間，普通流中的元素布局就像絕對定位元素不存在一樣。

絕對定位的元素的位置是相對于距離他最近的非static祖先元素位置決定的。如果元素沒有已定位的祖先元素，那么他的位置就相對于初始包含塊兒（body或html神馬的）元素。

因?yàn)榻^對定位與文檔流無關(guān)，所以絕對定位的元素可以覆蓋頁面上的其他元素，可以通過z-index屬性控制疊放順序，z-index越高，元素位置越靠上。

還是剛才的例子，稍微改動(dòng)一下，讓綠色div絕對定位，為了清晰顯示，第二個(gè)紅色div改為黃色。

這時(shí)可以看出，綠色div是相對于父元素，也就是綠框div進(jìn)行的移位，而紅色和黃色div進(jìn)行布局時(shí)就像綠色div不存在一樣。

最后要說的就是fixed屬性了，應(yīng)用fixed也叫固定定位，固定定位是絕對定位的中，固定定位的元素也不包含在普通文檔流中，差異是苦丁元素的包含塊兒是視口（viewport），經(jīng)常見一些頁面的如人人網(wǎng)看在線好友那個(gè)模塊總在窗口右下角，估計(jì)用的是類似技術(shù)

固定定位： <div style="border: solid 1px #0e0; width:200px;"><div style="height: 100px; width: 100px; background-color: Red;"></div><div style="height: 100px; width: 100px; background-color: Green; position:fixed; bottom:20px; left:20px;"></div><div style="height: 100px; width: 100px; background-color: Yellow;"></div></div>

可見hongse和黃色div布局沒有受到綠色div影響，而無論是頁面縱向滾動(dòng)條在頁面頂端還是底端，綠色div總是在視口左下角

浮動(dòng)

首先介紹一些浮動(dòng)模型的基本知識(shí)：浮動(dòng)模型也是一種可視化格式模型，浮動(dòng)的框可以左右移動(dòng)（根據(jù)float屬性值而定），直到它的外邊緣碰到包含框或者另一個(gè)浮動(dòng)元素的框的邊緣。浮動(dòng)元素不在文檔的普通流中，文檔的普通流中的元素表現(xiàn)的就像浮動(dòng)元素不存在一樣.《CSS Mastery》里作者畫了幾個(gè)圖非常有意思，可以幫助我們理解浮動(dòng)的表現(xiàn)，我簡單的畫幾個(gè)。

不浮動(dòng) <div style="border: solid 5px #0e0; width:300px;"><div style="height: 100px; width: 100px; background-color: Red;"></div><div style="height: 100px; width: 100px; background-color: Green; "></div><div style="height: 100px; width: 100px; background-color: Yellow;"></div></div>

//紅向右浮動(dòng) <div style="border: solid 5px #0e0; width:300px;"><div style="height: 100px; width: 100px; background-color: Red; float:right;"></div><div style="height: 100px; width: 100px; background-color: Green; "></div><div style="height: 100px; width: 100px; background-color: Yellow;"></div></div>

//紅框左移,覆蓋綠框 <div style="border: solid 5px #0e0; width:300px;"><div style="height: 100px; width: 100px; background-color: Red; float:left;"></div><div style="height: 100px; width: 100px; background-color: Green;"></div><div style="height: 100px; width: 100px; background-color: Yellow;"></div></div>

//都向左浮動(dòng),父元素寬度為0<div style="border: solid 5px #0e0; width:300px;"><div style="height: 100px; width: 100px; background-color: Red; float:left;"></div><div style="height: 100px; width: 100px; background-color: Green; float:left;"></div><div style="height: 100px; width: 100px; background-color: Yellow; float:left;"></div></div>

如果包含塊兒太窄無法容納水平排列的三個(gè)浮動(dòng)元素,那么其它浮動(dòng)塊兒向下移動(dòng),,直到有足夠的扣減,如果浮動(dòng)元素的高度不同,那么下下移動(dòng)的時(shí)候可能被卡住

沒有足夠水平空間 <div style="border: solid 5px #0e0; width:250px;"><div style="height: 100px; width: 100px; background-color: Red; float:left;"></div><div style="height: 100px; width: 100px; background-color: Green; float:left;"></div><div style="height: 100px; width: 100px; background-color: Yellow; float:left;"></div></div>

卡住了 <div style="border: solid 5px #0e0; width:250px;"><div style="height: 120px; width: 100px; background-color: Red; float:left;"></div><div style="height: 100px; width: 100px; background-color: Green; float:left;"></div><div style="height: 100px; width: 100px; background-color: Yellow; float:left;"></div></div>

行框和清理

前面指出浮動(dòng)會(huì)讓元素脫離文檔流,不影響不浮動(dòng)元素.實(shí)際上并不完全如此,如果浮動(dòng)的元素后面有一個(gè)文檔流中元素,那么這個(gè)元素的框會(huì)表現(xiàn)的像浮動(dòng)元素不存在,但是框的文本內(nèi)容會(huì)受到浮動(dòng)元素的影響,會(huì)移動(dòng)以留出空間.用術(shù)語說就是浮動(dòng)元素旁邊的行框被縮短,從而給浮動(dòng)元素流出空間,因而行框圍繞浮動(dòng)框。

不浮動(dòng) <div style="border: solid 5px #0e0; width: 250px;"><div style="height: 50px; width: 50px; background-color: Red;"></div><div style="height: 100px; width: 100px; background-color: Green;">1111111111111111111111</div></div>

浮動(dòng)<div style="border: solid 5px #0e0; width: 250px;"><div style="height: 50px; width: 50px; background-color: Red; float:left;"></div><div style="height: 100px; width: 100px; background-color: Green;">1111111111111111111111</div></div>

可以看出浮動(dòng)后雖然綠色div布局不受浮動(dòng)影響，正常布局，但是文字部分卻被擠到了紅色浮動(dòng)div下邊。要想阻止行框圍繞在浮動(dòng)元素外邊，可以使用clear屬性，屬性的left，right，both，none表示框的哪些邊不挨著浮動(dòng)框。

對元素清理實(shí)際上為前面的浮動(dòng)元素留出了垂直空間,這樣可以解決我們之前的一個(gè)問題，看前面的圖片的時(shí)候我們發(fā)現(xiàn)div內(nèi)的所有元素浮動(dòng)的話就會(huì)不占據(jù)文檔空間，這樣父元素，高度為0，可能很多效果也不見了

如果我們想讓父元素在視覺上包圍浮動(dòng)元素可以向下面這樣處理

在最后添加一個(gè)空div，對它清理 <div style="border: solid 5px #0e0; width:300px;"><div style="height: 100px; width: 100px; background-color: Red; float:left;"></div><div style="height: 100px; width: 100px; background-color: Green; float:left;"></div><div style="height: 100px; width: 100px; background-color: Yellow; float:left;"></div><div style="clear:both;"></div></div>

當(dāng)然這樣做有很多缺點(diǎn)，有些javascript也可以做出類似效果，這里不細(xì)說，值得注意的是應(yīng)用值為hidden或auto的overflow屬性會(huì)有一個(gè)副作用：自動(dòng)清理包含的任何浮動(dòng)元素，所以說當(dāng)頁面出現(xiàn)相關(guān)問題時(shí)，可以看看是不是這個(gè)屬性搞的鬼。

這樣，有了這些基本知識(shí)后，我們應(yīng)用CSS的時(shí)候就可以解決很多以前很百思不得其解的問題了。

總結(jié)

以上是生活随笔為你收集整理的CSS布局 ——从display，position， float属性谈起的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。