DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS3基礎 >> 13.2 盒子的布局方向box-orient屬性
13.2 盒子的布局方向box-orient屬性
編輯:CSS3基礎     

一、box-orient屬性

在CSS3彈性盒子模型中,我們可以使用box-orient屬性定義彈性盒子內部中“子元素”的排列方向。也就是盒子內部的子元素是橫著排,還是豎著走。

語法:

box-orient:取值;

說明:

box-orient屬性取值如下:

box-orient屬性取值 屬性值 說明 horizontal 彈性盒子“從左到右”在一條水平線上顯示它的“子元素” vertical 彈性盒子“從上到下”在一條垂直線上顯示它的“子元素” inline-axis 彈性盒子“沿著內聯軸”顯示它的“子元素”(默認值) block-axis 彈性盒子“沿著塊軸”顯示它的“子元素”

注意:在使用之前,用戶必須先把父元素的display屬性設置為box或者inline-box,彈性盒子模型才會生效。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
    <title>CSS3 box-orient屬性</title>
    <style type="text/css">
        body
        {
            display:-webkit-box;    /*定義元素為盒子顯示,注意書寫*/
            -webkit-box-orient:horizontal;   /*定義盒子元素內的元素從左到右流動顯示*/
        }
        div{height:100px;}
        #box1{background:red;}
        #box2{background:blue;}
        #box3{background:yellow;}
    </style>
</head>
<body>
    <div id="box1">盒子1</div>
    <div id="box2">盒子2</div>
    <div id="box3">盒子3</div>
</body>
</html>

在浏覽器預覽效果如下:

分析:

在CSS2.1中,HTML文檔流的方向為“從上到下”,但是使用彈性盒模型之後,我們可以重新定義文檔流的方向為“從左到右”。如果要開啟彈性盒子模型,我們必須要設置父元素的display屬性值為box(或inline-box)才行。

在傳統布局方式下,如果定義並列顯示的三個欄目塊顯示為行內塊狀(display:inline-block;)或者內聯元素(display:inline;),則也可以實現相同的設計效果,但是顯示技術卻完全不同。

“display:-webkit-box;”兼容webkit內核浏覽器,如果是moz內核浏覽器,則需要寫成“display:-moz-box;”。注意是“display: -moz-box;”,而不是“-moz-display: box;”。

這個例子中,彈性盒子內部的“子元素”的寬度是由內容撐開的。如果沒有內容,則“子元素”不會有寬度。當然,我們也可以給“子元素”定義一定的寬度。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved