|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 眾所周知,塊級元素默認是垂直排列的,行內元素是水平排列的,而在布局時基本上都是用塊級元素,如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中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!