建站
咨詢
售后
建站咨詢
新聞中心
這篇文章將為大家詳細(xì)講解有關(guān)css如何實(shí)現(xiàn)元素水平排列，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),蘿北企業(yè)網(wǎng)站建設(shè),蘿北品牌網(wǎng)站建設(shè),網(wǎng)站定制,蘿北網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,蘿北網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
第一種：display：inline-block
首先得先了解塊級(jí)元素（blockelements）和行內(nèi)元素（inlineelements）
塊級(jí)元素：塊級(jí)元素包含widthheight,padding,border與margin，他們的排列方式是從上到下排列，常見的塊級(jí)元素有div,p,form,ul等等。
行內(nèi)元素：高度和寬度由內(nèi)容決定，自身沒(méi)法設(shè)定固定的大小，不存在垂直方向的margin和padding，排列方式是水平排列,行內(nèi)元素在html所有元素占大多數(shù)，比如a,span,label,button,img,input......
這里可能有人會(huì)產(chǎn)生疑問(wèn)，“button和img以及input等標(biāo)簽可以設(shè)置寬度和高度也可以設(shè)置margin與padding，為什么它確實(shí)行內(nèi)元素呢？”其實(shí)html元素主要有兩種劃分方式，分別是“塊級(jí)元素與行內(nèi)元素”，“替換元素與不可替換元素”。上面介紹了第一種劃分方式，下面介紹一下第二種劃分方式：
替換元素：通俗的理解就是具有width和height屬性的元素。替換元素類似于display:inline-block元素，可以設(shè)置高寬與內(nèi)外邊距，主要包括img,input,textarea,select,object,audio和canvas在某些特定情形下為替換元素。
不可替換元素：除了替換元素剩下的都是不可替換元素（O(∩_∩)O）
扯了一大堆，我們知道display：inline-block可以讓元素橫向排列，但是這種布局可能會(huì)存在一點(diǎn)點(diǎn)小問(wèn)題，舉栗子：
這是我們發(fā)現(xiàn)兩個(gè)div之間存在一個(gè)空隙，這是為什么呢？
瀏覽器會(huì)將換行符，縮進(jìn)符，以及空格當(dāng)做一個(gè)空格來(lái)處理，即使暗戀兩次空格，或者一個(gè)換行加一個(gè)空格，等等都會(huì)解析成一個(gè)空格使用。這個(gè)空格的大小則是font-size/2大小。去除這個(gè)空隙有很多辦法。
1.設(shè)置div2的margin-left:-font-size/2
2.設(shè)置兩個(gè)div的父標(biāo)簽的font-size:0
3.設(shè)置負(fù)的word-spacing
第二種：float：left/right
float屬性可以讓元素脫離常規(guī)文檔流，沿著容器的左側(cè)或者右側(cè)進(jìn)行水平排列。
這種方式可以說(shuō)是用的最多的，但是有個(gè)問(wèn)題，在自適應(yīng)布局中一般不會(huì)固定元素的高寬，會(huì)根據(jù)內(nèi)容大小來(lái)自動(dòng)調(diào)整，這是如果子元素都是浮動(dòng)元素的話就會(huì)存在高度塌陷。
舉栗子
這里將上一個(gè)栗子中的子元素div故意改成了span,其實(shí)想表達(dá)float可以將元素隱式的轉(zhuǎn)換成block元素（position:absolute/fixed亦可），所以自然就可以設(shè)置寬度和高度。
那么盒子水平排列之后存在什么問(wèn)題呢？沒(méi)錯(cuò)！父容器高度塌陷。這時(shí)父容器div的高度為0，因?yàn)楦?dòng)元素會(huì)脫離常規(guī)文檔流，它的父容器計(jì)算高度時(shí)會(huì)忽略它。這是我們不想看到的，因?yàn)檫@個(gè)高度塌陷的DIV后面如果還有其它常規(guī)流標(biāo)簽的話，那么頁(yè)面就會(huì)出現(xiàn)錯(cuò)亂等不想看到的結(jié)果。
解決辦法自然就是清除浮動(dòng)，主要通過(guò)兩種方式清除浮動(dòng)：
1.clear:left/right/both，專門用來(lái)清除浮動(dòng)的CSS。
2.BFC，因?yàn)锽FC有一條規(guī)則“計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算”。
說(shuō)一下用clear清除浮動(dòng)的幾種方法：
1.最后一個(gè)子元素后面加一個(gè)空標(biāo)簽，然后設(shè)置其樣式clear:both。
2.在最后一個(gè)浮動(dòng)子元素中，利用偽元素::after，添加clear樣式清除浮動(dòng)
第三種：table布局
這種布局方式其實(shí)不常用，因?yàn)樗嬖诜N種問(wèn)題。
渲染速度較慢
增加html代碼量，不易維護(hù)
標(biāo)簽的名字不符合html語(yǔ)義化，table本來(lái)就是做表格用的，拿來(lái)布局甚是不妥
標(biāo)簽結(jié)構(gòu)較死，后期修改成本較高
等等，此處不作過(guò)多闡述?？傊?，盡量用table布局
第四種：絕對(duì)定位
這種方式日常開發(fā)中用的也較多，前面提到float可以讓元素脫離常規(guī)文檔流，這里position:absolute/fixed也具有同樣的效果，處理辦法在float布局中已經(jīng)提到了，這里搬來(lái)即可。
這里要說(shuō)一下position:absolute絕對(duì)定位，以它的第一個(gè)父級(jí)并且是position:absolute/relative/fixed等飛static定位的元素為基點(diǎn)進(jìn)行定位，如果找不到則以根元素為基準(zhǔn)進(jìn)行定位。一般都是采用父元素position:ralative，子元素position:absolute結(jié)合使用。
第五種：css3的彈性布局
彈性布局因?yàn)槠浼嫒菪运赃€沒(méi)有得到廣泛的認(rèn)可，不過(guò)我覺得以后它肯定會(huì)獨(dú)占鰲頭，就跟我看好html的視頻播放器一樣，早晚都會(huì)干敗flash，只是時(shí)間問(wèn)題！?。?/p>
第六種：transform:translate
CSS3中用于動(dòng)畫的一個(gè)樣式，但是他可是讓兩個(gè)元素橫向排列，這里不多說(shuō)直接上代碼，請(qǐng)用谷歌瀏覽器運(yùn)行一下：
關(guān)于“css如何實(shí)現(xiàn)元素水平排列”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。
新聞標(biāo)題：css如何實(shí)現(xiàn)元素水平排列
本文地址：http://fisionsoft.com.cn/article/goepcs.html
