您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)css如何實(shí)現(xiàn)元素水平排列,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
第一種:display:inline-block
首先得先了解塊級元素(blockelements)和行內(nèi)元素(inlineelements)
塊級元素:塊級元素包含widthheight,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,為什么它確實(shí)行內(nèi)元素呢?”其實(shí)html元素主要有兩種劃分方式,分別是“塊級元素與行內(nèi)元素”,“替換元素與不可替換元素”。上面介紹了第一種劃分方式,下面介紹一下第二種劃分方式:
替換元素:通俗的理解就是具有width和height屬性的元素。替換元素類似于display:inline-block元素,可以設(shè)置高寬與內(nèi)外邊距,主要包括img,input,textarea,select,object,audio和canvas在某些特定情形下為替換元素。
不可替換元素:除了替換元素剩下的都是不可替換元素(O(∩_∩)O)
扯了一大堆,我們知道display:inline-block可以讓元素橫向排列,但是這種布局可能會存在一點(diǎn)點(diǎn)小問題,舉栗子:
<style>
div{
display:inline-block;width:200px;height:200px;
}
.div1{
background:green;
}
.div2{
background:red;
}
</style>
<divclass="div1">左邊</div>
<divclass="div2">右邊</div>
這是我們發(fā)現(xiàn)兩個(gè)div之間存在一個(gè)空隙,這是為什么呢?
瀏覽器會將換行符,縮進(jìn)符,以及空格當(dāng)做一個(gè)空格來處理,即使暗戀兩次空格,或者一個(gè)換行加一個(gè)空格,等等都會解析成一個(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)行水平排列。
這種方式可以說是用的最多的,但是有個(gè)問題,在自適應(yīng)布局中一般不會固定元素的高寬,會根據(jù)內(nèi)容大小來自動(dòng)調(diào)整,這是如果子元素都是浮動(dòng)元素的話就會存在高度塌陷。
舉栗子
<style>
span{
float:left;width:200px;height:200px;
}
.box1{
background:green;
}
.box2{
background:red;
}
</style>
<div>
<spanclass="box1">左邊</span>
<spanclass="box2">右邊</span>
</div>
這里將上一個(gè)栗子中的子元素div故意改成了span,其實(shí)想表達(dá)float可以將元素隱式的轉(zhuǎn)換成block元素(position:absolute/fixed亦可),所以自然就可以設(shè)置寬度和高度。
那么盒子水平排列之后存在什么問題呢?沒錯(cuò)!父容器高度塌陷。這時(shí)父容器div的高度為0,因?yàn)楦?dòng)元素會脫離常規(guī)文檔流,它的父容器計(jì)算高度時(shí)會忽略它。這是我們不想看到的,因?yàn)檫@個(gè)高度塌陷的DIV后面如果還有其它常規(guī)流標(biāo)簽的話,那么頁面就會出現(xiàn)錯(cuò)亂等不想看到的結(jié)果。
解決辦法自然就是清除浮動(dòng),主要通過兩種方式清除浮動(dòng):
1.clear:left/right/both,專門用來清除浮動(dòng)的CSS。
2.BFC,因?yàn)锽FC有一條規(guī)則“計(jì)算BFC的高度時(shí),浮動(dòng)元素也參與計(jì)算”。
說一下用clear清除浮動(dòng)的幾種方法:
1.最后一個(gè)子元素后面加一個(gè)空標(biāo)簽,然后設(shè)置其樣式clear:both。
2.在最后一個(gè)浮動(dòng)子元素中,利用偽元素::after,添加clear樣式清除浮動(dòng)
第三種:table布局
這種布局方式其實(shí)不常用,因?yàn)樗嬖诜N種問題。
渲染速度較慢
增加html代碼量,不易維護(hù)
標(biāo)簽的名字不符合html語義化,table本來就是做表格用的,拿來布局甚是不妥
標(biāo)簽結(jié)構(gòu)較死,后期修改成本較高
等等,此處不作過多闡述。總之,盡量用table布局
第四種:絕對定位
這種方式日常開發(fā)中用的也較多,前面提到float可以讓元素脫離常規(guī)文檔流,這里position:absolute/fixed也具有同樣的效果,處理辦法在float布局中已經(jīng)提到了,這里搬來即可。
這里要說一下position:absolute絕對定位,以它的第一個(gè)父級并且是position:absolute/relative/fixed等飛static定位的元素為基點(diǎn)進(jìn)行定位,如果找不到則以根元素為基準(zhǔn)進(jìn)行定位。一般都是采用父元素position:ralative,子元素position:absolute結(jié)合使用。
第五種:css3的彈性布局
彈性布局因?yàn)槠浼嫒菪运赃€沒有得到廣泛的認(rèn)可,不過我覺得以后它肯定會獨(dú)占鰲頭,就跟我看好html的視頻播放器一樣,早晚都會干敗flash,只是時(shí)間問題?。?!
第六種:transform:translate
CSS3中用于動(dòng)畫的一個(gè)樣式,但是他可是讓兩個(gè)元素橫向排列,這里不多說直接上代碼,請用谷歌瀏覽器運(yùn)行一下:
<style>
div{
width:200px;height:200px;
}
.box1{
background:green;
}
.box2{
transform:translateX(200px)translateY(-200px);
background:red;
}
</style>
<div>
<divclass="box1">左邊</div>
<divclass="box2">右邊</div>
</div>
關(guān)于“css如何實(shí)現(xiàn)元素水平排列”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯(cuò),請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。