實現(xiàn)元素水平排列的六種方法

第一種：display：inline-block

首先得先了解塊級元素（block elements）和行內(nèi)元素（inline elements）

塊級元素：塊級元素包含width height,padding,border與margin，他們的排列方式是從上到下排列，常見的塊級元素有div,p,form,ul等等。

行內(nèi)元素：高度和寬度由內(nèi)容決定，自身沒法設(shè)定固定的大小，不存在垂直方向的margin和padding，排列方式是水平排列,行內(nèi)元素在html所有元素占大多數(shù)，比如a,span,label,button,img,input......

這里可能有人會產(chǎn)生疑問，“button和img以及input等標(biāo)簽可以設(shè)置寬度和高度也可以設(shè)置margin與padding，為什么它確實行內(nèi)元素呢？”其實html元素主要有兩種劃分方式，分別是“塊級元素與行內(nèi)元素”，“替換元素與不可替換元素”。上面介紹了第一種劃分方式，下面介紹一下第二種劃分方式：

替換元素：通俗的理解就是具有width和height屬性的元素。替換元素類似于display:inline-block元素，可以設(shè)置高寬與內(nèi)外邊距，主要包括img , input , textarea , select , object,audio和canvas在某些特定情形下為替換元素。

不可替換元素：除了替換元素剩下的都是不可替換元素（O(∩_∩)O）

扯了一大堆，我們知道display：inline-block可以讓元素橫向排列，但是這種布局可能會存在一點點小問題，舉栗子：

<style>
 div{
 display:inline-block; width:200px; height:200px;
 }
 .div1{
 background:green;
 }
 .div2{
 background:red;
 }
</style>
<div class = "div1">左邊</div>
<div class = "div2">右邊</div>

這是我們發(fā)現(xiàn)兩個div之間存在一個空隙，這是為什么呢？

瀏覽器會將換行符，縮進(jìn)符，以及空格當(dāng)做一個空格來處理，即使暗戀兩次空格，或者一個換行加一個空格，等等都會解析成一個空格使用。這個空格的大小則是font-size/2大小。去除這個空隙有很多辦法。

1.設(shè)置div2的margin-left:-font-size/2

2.設(shè)置兩個div的父標(biāo)簽的font-size:0

3.設(shè)置負(fù)的word-spacing

第二種：float：left/right

float屬性可以讓元素脫離常規(guī)文檔流，沿著容器的左側(cè)或者右側(cè)進(jìn)行水平排列。

這種方式可以說是用的最多的，但是有個問題，在自適應(yīng)布局中一般不會固定元素的高寬，會根據(jù)內(nèi)容大小來自動調(diào)整，這是如果子元素都是浮動元素的話就會存在高度塌陷。

舉栗子

<style>
 span{
 float:left; width:200px; height:200px;
 }
 .box1{
 background:green;
 }
 .box2{
 background:red;
 }
</style>
<div>
 <span class = "box1">左邊</span>
 <span class = "box2">右邊</span>
</div>

這里將上一個栗子中的子元素div故意改成了span,其實想表達(dá)float可以將元素隱式的轉(zhuǎn)換成block元素（position:absolute/fixed亦可），所以自然就可以設(shè)置寬度和高度。

那么盒子水平排列之后存在什么問題呢？沒錯！父容器高度塌陷。這時父容器div的高度為0，因為浮動元素會脫離常規(guī)文檔流，它的父容器計算高度時會忽略它。這是我們不想看到的，因為這個高度塌陷的DIV后面如果還有其它常規(guī)流標(biāo)簽的話，那么頁面就會出現(xiàn)錯亂等不想看到的結(jié)果。

解決辦法自然就是清除浮動，主要通過兩種方式清除浮動：

1.clear:left/right/both，專門用來清除浮動的CSS。

2.BFC，因為BFC有一條規(guī)則“計算BFC的高度時，浮動元素也參與計算”。

說一下用clear清除浮動的幾種方法：

1.最后一個子元素后面加一個空標(biāo)簽，然后設(shè)置其樣式clear:both。

2.在最后一個浮動子元素中，利用偽元素::after，添加clear樣式清除浮動

第三種：table布局

這種布局方式其實不常用，因為它存在種種問題。

渲染速度較慢

增加html代碼量，不易維護(hù)

標(biāo)簽的名字不符合html語義化，table本來就是做表格用的，拿來布局甚是不妥

標(biāo)簽結(jié)構(gòu)較死，后期修改成本較高

等等，此處不作過多闡述。總之，盡量用table布局

第四種：絕對定位

這種方式日常開發(fā)中用的也較多，前面提到float可以讓元素脫離常規(guī)文檔流，這里position:absolute/fixed也具有同樣的效果，處理辦法在float布局中已經(jīng)提到了，這里搬來即可。

這里要說一下position:absolute絕對定位，以它的第一個父級并且是position:absolute/relative/fixed等飛static定位的元素為基點進(jìn)行定位，如果找不到則以根元素為基準(zhǔn)進(jìn)行定位。一般都是采用父元素position:ralative，子元素position:absolute結(jié)合使用。

第五種：css3的彈性布局

彈性布局因為其兼容性所以還沒有得到廣泛的認(rèn)可，不過我覺得以后它肯定會獨占鰲頭，就跟我看好html的視頻播放器一樣，早晚都會干敗flash，只是時間問題！！！

第六種：transform:translate

CSS3中用于動畫的一個樣式，但是他可是讓兩個元素橫向排列，這里不多說直接上代碼，請用谷歌瀏覽器運行一下：

<style>
 div{
 width:200px; height:200px;
 }
 .box1{
 background:green;
 }
 .box2{
 transform: translateX(200px) translateY(-200px);
 background:red;
 }
 </style>
<div>
 <div class = "box1">左邊</div>
 <div class = "box2">右邊</div>
</div>

效果和前幾種方式一樣。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com