首頁 >web前端 >css教學 >實現元素水平排列的六種方法

實現元素水平排列的六種方法

yulia
yulia原創
2018-09-25 11:49:1815910瀏覽

眾所周知,區塊級元素預設是垂直排列的,行內元素是水平排列的,而在佈局時基本上都是用區塊級元素,如div等常用區塊級標籤,那麼如何讓區塊級元素也進行水平排列呢?這篇文章為大家介紹六中方式,實現塊級元素的水平排列。

第一種:display:inline-block

#首先得先了解區塊級元素(block elements)和行內元素(inline elements)

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

行內元素:高度和寬度由內容決定,本身沒法設定固定的大小,不存在垂直方向的margin和padding,排列方式是水平排列,行內元素在html所有元素佔大多數,例如a,span,label,button,img,input......

這裡可能有人會產生疑問,「button和img以及input等標籤可以設定寬度和高度也可以設定margin與padding ,為什麼它確實行內元素呢?”其實html元素主要有兩種劃分方式,分別是“塊級元素與行內元素”,“替換元素與不可替換元素”。上面介紹了第一種劃分方式,以下介紹第二種劃分方式:

替換元素:通俗的理解就是具有width和height屬性的元素。替換元素類似display:inline-block元素,可以設定高寬與內外邊距,主要包括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>

這是我們發現兩個div之間存在一個空隙,這是為什麼呢?

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

1.設定div2的margin-left:-font-size/2

#2.設定兩個div的父標籤的font-size:0

3.設定負的word-spacing

第二種:float:left/right

float屬性可以讓元素脫離常規文件流,沿著容器的左側或者右側進行水平排列。

這種方式可以說是用的最多的,但是有個問題,在自適應佈局中一般不會固定元素的高寬,會根據內容大小來自動調整,這是如果子元素都是浮動元素的話就會有高度塌陷。

舉栗子

<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,其實想表達float可以將元素隱式的轉換成block元素(position:absolute/ fixed亦可),所以自然就可以設定寬度和高度。

那麼盒子水平排列之後又有什麼問題呢?沒錯!父容器高度塌陷。這時父容器div的高度為0,因為浮動元素會脫離常規文件流,它的父容器計算高度時會忽略它。這是我們不想看到的,因為這個高度塌陷的DIV後面如果還有其它常規流標籤的話,那麼頁面就會出現錯亂等不想看到的結果。

解決方法自然就是清除浮動,主要透過兩種方式清除浮動:

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

2.BFC,因為BFC有一條規則「計算BFC的高度時,浮動元素也會參與計算」。

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

1.最後一個子元素後面加一個空標籤,然後設定其樣式clear:both。

2.在最後一個浮動子元素中,利用偽元素::after,加入clear樣式清除浮動

##第三種:table佈局

這種佈局方式其實不常用,因為它有種種問題。

渲染速度​​較慢

增加html程式碼量,不易維護

標籤的名字不符合html語意化,table本來就是做表格用的,拿來佈局甚是不妥

標籤結構較死,後期修改成本較高

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

第四種:絕對定位

這種方式日常開發中用的也較多,前面提到float可以讓元素脫離常規文件流,這裡position:absolute/fixed也具有同樣的效果,處理辦法在float佈局中已經提到了,這裡搬來即可。

這裡要說一下position:absolute絕對定位,以它的第一個父級並且是position:absolute/relative/fixed等飛static定位的元素為基點進行定位,如果找不到則以根元素為基準進行定位。一般都是採用父元素position:ralative,子元素position:absolute結合使用。

第五種:css3的彈性佈局#

弹性布局因为其兼容性所以还没有得到广泛的认可,不过我觉得以后它肯定会独占鳌头,就跟我看好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>

效果和前几种方式一样。

以上就是我说分享实现横向布局的六种方式,其实每种方式都有很多大学问,我解释描述了冰山一角,并且没有过多的考虑浏览器的兼容性,不过还是希望对你有所帮助。

以上是實現元素水平排列的六種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

相關文章

看更多