CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制
float: left|right; 可以自動(dòng)排列自動(dòng)折行, 但需要clear來配合清除浮動(dòng);
display: inline-block; 有些時(shí)候可以替代float實(shí)現(xiàn)相同的效果.
position: absolute|relative; 要配合top,left等定位;
position: absolute會(huì)導(dǎo)致元素脫離文檔流,被定位的元素等于在文檔中不占據(jù)任何位置,在另一個(gè)層呈現(xiàn),可以設(shè)置z-index。PS的圖層效果就是position: absolute。
float也會(huì)導(dǎo)致元素脫離文檔流,但還在文檔或容器中占據(jù)位置,把文檔流和其它float元素向左或向右擠,并可能導(dǎo)致?lián)Q行。圖片的文字環(huán)繞布局效果就是float。
display的inline-block不脫離文檔流,將block元素當(dāng)作大型字符嵌入文檔流內(nèi),類似于img或者input默認(rèn)效果。
===================================================
補(bǔ)充,其實(shí)這個(gè)答案完全沒有回答問題,因?yàn)樘釂栒哒f:
不用解釋每個(gè)的概念,僅談應(yīng)用上的區(qū)別。
應(yīng)用范圍是?或者說在什么情況下優(yōu)先使用哪個(gè)?
盡管都能實(shí)現(xiàn)某一效果
但是我想回答的是,這三種方式產(chǎn)生的排版效果是截然不同的,只有充分理解了他們的排版效果,才能作出最好的決定。
position
float
????(((不想脫離出去講清理浮動(dòng)- -||,還是少說些。。。
display
定位機(jī)制
?????隨便扯一些居中布局:
?
positon 與 display 的相互關(guān)系???
???元素分為內(nèi)聯(lián)元素和區(qū)塊元素兩類(當(dāng)然也有其它的),在內(nèi)聯(lián)元素中有個(gè)非常重要的常識(shí),即內(nèi)兩元素是不可以設(shè)置區(qū)塊元素所具有的樣式,例如:width | height。
relative : 原來是什么類型的依舊是什么類型。?
absolute | fixed : 元素就被重置為了區(qū)塊元素,例如:打算為span元素指定大小,并絕對(duì)定位?
????<span style=”position:absolute; width:100px; height:50px;”>span</span>這是完全正確的,?
????<span style=”position:absolute; display:block; width:100px; height:100px;”>span</span>,這里的display:block就是多余的了。
?
position 與 float 的相互關(guān)系
???一個(gè)元素若設(shè)置了?position:absolute | fixed; 則該元素就不能設(shè)置float。這是一個(gè)常識(shí)性的知識(shí)點(diǎn),因?yàn)檫@是兩個(gè)不同的流,一個(gè)是浮動(dòng)流,另一個(gè)是“定位流(這是自己起的名字,呵呵)”。
但是 relative 卻可以。因?yàn)樗舅嫉目臻g仍然占據(jù)文檔流。
position: relative和position: absolute 都可以改變?cè)卦谖臋n中的位置,設(shè)置position: relative 或 position: absolute都可以讓元素激活left、top、right、bottom 和 z-index 屬性。
網(wǎng)頁雖然看起來是平面的二維結(jié)構(gòu),但它其實(shí)是有z軸的,z軸的大小由z-index 控制,默認(rèn)情況下,所有元素都是在z-index: 0 這一層的,這就是文檔流。設(shè)置position: relative 或 position: absolute會(huì)讓元素浮起來(就像游戲中的概念-多層圖層),也就是z-index大于0,它會(huì)改變正常情況下的文檔流。不同的是position: relative 會(huì)保留自己在z-index:0 層的位置,但是它的實(shí)際位置可能因?yàn)樵O(shè)置了left、top、right、bottom值而偏離原來在文檔流中的位 置,但對(duì)其他仍然在z-index:0層的元素位置不會(huì)造成影響。而position: absolute會(huì)完全脫離文檔流,不再在z-index:0層保留占位符,其left、top、right、bottom 值是相對(duì)于自己最近的一個(gè)位置–設(shè)置了position: relative 或 position: absolute的祖先元素的,如果祖先元素都沒有設(shè)置position: relative 或 position: absolute,那么就相對(duì)于body元素。
除了position: relative 和 position: absolute,float也能改變文檔流,不同的是,float屬性不會(huì)讓元素“上浮”到另一個(gè)z-index層,它仍然讓元素在z-index:0 層排列,float不像position: relative 和 position: absolute那樣,它不能通過left、top、right、bottom屬性精確地控制元素的坐標(biāo),它只能通過float:left 和 float:right 來控制元素在同層里“左浮”和“右浮”。float會(huì)改變正常的文檔流排列,影響到周圍元素。
另一個(gè)有趣的現(xiàn)象是position: absolute 和 float會(huì)隱式地改變display類型,不論之前什么類型的元素(display:none除外),只要設(shè)置了position: absolute 或 float中任意一個(gè),都會(huì)讓元素以display:inline-block的方式顯示:可以設(shè)置長寬,默認(rèn)寬度并不占滿父元素。就算我們顯式地設(shè)置 display:inline或者display:block,也仍然無效(float在IE6 下的雙倍邊距bug就是利用添加display:inline來解決的)。值得注意的是,position: relative卻不改變display的類型。
1、position?對(duì)?float?的影響:float?可以說是定義同輩元素之間的位置關(guān)系,浮動(dòng)元素相對(duì)于父元素,其位置的定義是確定不變的的:基于position:static/relative時(shí)的位置,向左側(cè)或右側(cè)靠近(一個(gè)可能的錯(cuò)誤的認(rèn)識(shí)是,浮動(dòng)元素會(huì)向左上角或右上角浮動(dòng)),
因此,position:static?和?position:relative?與?float?的效果可以疊加,?
但?position:absolute、position:fixed?這兩個(gè)定位屬性依賴于自身元素之外的參照,將使?float?的效果無法表現(xiàn)出來。
?
2、浮動(dòng)元素對(duì)文本的影響:浮動(dòng)概念的基礎(chǔ)是圖文混排,因此同輩元素的在排版時(shí)如果浮動(dòng)元素與非浮動(dòng)元素之間發(fā)生覆蓋,無論是誰覆蓋誰,非浮動(dòng)的元素內(nèi)的文字將會(huì)被擠走,如下例:
.elm{?width:100px;?height:50px;background:green;?border:1px?solid?red;???}
.lf{float:left;?}
?
float
no?float,被擠走?
?
3、浮動(dòng)元素對(duì)父元素的影響:浮動(dòng)元素的父元素丟失?block?高度,即使定義了高度,也無法影響其同輩浮動(dòng)元素及其浮動(dòng)的子元素的布局,默認(rèn)情況下,如果父元素沒有定義高度,則父元素的內(nèi)容會(huì)撐開父元素,達(dá)到自適應(yīng)?block?高度的效果,浮動(dòng)元素?zé)o法撐開其父元素的block?高度。
?
4、浮動(dòng)元素對(duì)自身的影響:浮動(dòng)元素將按?inline-block?形式布局(haslayout),即使將他設(shè)置為?display:inline;,因此,默認(rèn)寬度自動(dòng)擴(kuò)展為100%的元素浮動(dòng)之后,寬度由元素內(nèi)容撐大,原來沒有高寬屬性的元素也變得可以定義高寬;如果出現(xiàn)重疊,浮動(dòng)元素將疊加在非浮動(dòng)的同輩元素之上(像是具有更大的z-index值);
?
5、display, position, float 之間的相互關(guān)系: 1. 如果display等于none,則用戶端必須忽略position和float。在這種情況下,元素不產(chǎn)生盒子。 2. 否則,如果position等于absolute,則display與float皆強(qiáng)制為none(list-item保持不變)。盒子的位置由邊界偏移量確定。 3. 否則,如果float不等于none或該元素是根元素,則display強(qiáng)制為block(list-item保持不變)。 4. 否則,使用指定的display屬性。 1、絕對(duì)定位完全脫離普通流,因此絕對(duì)定位元素?zé)o法跟普通流搭建交互關(guān)系(普通流能影響絕對(duì)定位,絕對(duì)定位不影響普通流),這樣來說,在一些自適應(yīng)布局場(chǎng) 景中,絕對(duì)定位就存在一些缺陷(需要更多的限制因素,非常不靈活)。如果希望用絕對(duì)定位實(shí)現(xiàn)你說的 float 或 inline-block 同樣的效果,這個(gè)時(shí)候一般是不推薦用 絕對(duì)定位。2、對(duì)于浮動(dòng),這個(gè)屬性一般不是用來做布局的(偏向于排版),但是CSS2.1好像也就這個(gè)屬性 能夠滿足一些特定需求,所有才有了浮動(dòng)布局。浮動(dòng)相對(duì)絕對(duì)定位好處是,它默認(rèn)可以影響行內(nèi)布局,通過 clear 清除浮動(dòng)也可以影響 塊布局,可以與普通流建立良好的交互。 而且浮動(dòng)本身是脫離普通流的,在元素的水平定位上相比于 inline-block 更加靈活多變, 而 inline-block 的水平定位則更加有序。
3、inline-block,這個(gè)屬性也不是用來布局的(偏向于排版),但是在 CSS3 普及之前,它的用處也很大。該元素的盒子在行框中進(jìn)行格式化,其順序與源HTML中的順序一一對(duì)應(yīng)。 同時(shí)該元素不脫離普通流,這比浮動(dòng)來說有更大的優(yōu)勢(shì),它可以跟普通流自然交互,而不必要借助去其他屬性。而且相比浮動(dòng),相鄰元素間的垂直對(duì)齊方 式,inline-block 比 float 更加靈活, float 格式化時(shí)有一條規(guī)則,就是越高越好(因此常常表現(xiàn)為頂端對(duì)齊),而 inline-block 在行內(nèi)格式化,擁有更靈活的垂直對(duì)齊方式。應(yīng)用:
如果使用了浮動(dòng),清除浮動(dòng)就會(huì)成為你的副作用,而且如果你沒有良好的HTML/CSS 結(jié)構(gòu)的話,清除浮動(dòng)是一個(gè)很復(fù)雜的事情。
inline-block 雖然避免了清除浮動(dòng)的事情,但是會(huì)有另一個(gè)副作用,即空白符問題。這個(gè)問題的解決方案也令人十分蛋疼,因?yàn)楫吘?inline-block 不是布局屬性,它僅僅是 行內(nèi)級(jí)塊容器盒子。 同時(shí),作為IFC環(huán)境中的格式化問題,垂直居中、行高等問題也有可能是一個(gè)副作用。 其他:
其實(shí)在 CSS2.1中,利用表格 table 布局也是非常強(qiáng)大的方法。表格布局在等高,同列等寬對(duì)齊,垂直居中對(duì)齊上面的優(yōu)勢(shì)是其他方法很難媲美的。甚至于在自適應(yīng)場(chǎng)景中,表格布局的靈活性也非常出眾。 float: left|right; 可以自動(dòng)排列自動(dòng)折行, 但需要clear來配合清除浮動(dòng);
display: inline-block; 有些時(shí)候可以替代float實(shí)現(xiàn)相同的效果.
position: absolute|relative; 要配合top,left等定位;舉例:
<html>
<body>
<style type=”text/css”>
div {border: 1px solid red; margin: 1px;}
div div {border: 1px solid blue;}
</style>
<div>
<div style=”float: right;”>Float 1</div>
<div style=”float: right;”>Float 2</div>
<div style=”clear: both; border: 0;”></div>
</div>
<div style=”text-align: right;”>
<div style=”display: inline-block;”>Inline Block 1</div>
<div style=”display: inline-block;”>Inline Block 2</div>
</div>
<div style=”position: relative;”>
<div style=”position: absolute; right: 0px;”>Position 1</div>
<div style=”position: absolute; right: 50px;”>Position 2</div>
</div>
</body>
</html>表現(xiàn):
上面的是float, 中間的是inline-block, 下面的是position, 可以看出:
1. 當(dāng)居右(右浮動(dòng))時(shí), float是按先后順序來的, 先寫的排子右邊; 而inline-block則保持左右順序不變.
2. 在部分瀏覽器中(以上是在的firefox中), 空行或空格會(huì)影響到inline-block, 卻不會(huì)影響到float的block.
3. position只能配合left,right來定位, 如果去掉則重疊在一起; 不能借助clear等自動(dòng)擴(kuò)展容器.
4. 他們都有共同點(diǎn), 如果包裹的是行級(jí)元素, 則寬度可以按內(nèi)容寬度自適應(yīng).
?
使用場(chǎng)景:
照片墻, 選項(xiàng)卡, 導(dǎo)航條等可以使用inline-block或float, 推薦inline-block, 但需要注意瀏覽器兼容, 用float記得習(xí)慣性的使用clear.
Tip等提示, 懸浮窗, 遮罩等, 建議使用position.
轉(zhuǎn)載于:https://www.cnblogs.com/eaysun/p/4052079.html
總結(jié)
以上是生活随笔為你收集整理的CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: POJ 2955 (区间DP)
- 下一篇: C#以post方式调用struts re