close
文章出處

使用float屬性或position屬性布局的缺點

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        div {
            width: 20em;
            float: left;
        }

        #div1 {
            margin-right: 2em;
        }

        #div3 {
            width: 100%;
            background-color: yellow;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="div1">
        <p>
            
            示例文字。相對來說比較長的示例文字。
        示例文字。相對來說比較長的示例文字。
        示例文字。相對來說比較長的示例文字。
        示例文字。相對來說比較長的示例文字。
        示例文字。相對來說比較長的示例文字。
        示例文字。相對來說比較長的示例文字。
        示例文字。相對來說比較長的示例文字。
        示例文字。相對來說比較長的示例文字。
        示例文字。相對來說比較長的示例文字。
        </p>
    </div>
    <div id="div2">
        <p>
            示例文字。相對來說比較長的示例文字。
        示例文字。相對來說比較長的示例文字。
        示例文字。相對來說比較長的示例文字。
        示例文字。相對來說比較長的示例文字。
        示例文字。相對來說比較長的示例文字。
        示例文字。相對來說比較長的示例文字。
        示例文字。相對來說比較長的示例文字。
        示例文字。相對來說比較長的示例文字。
        示例文字。相對來說比較長的示例文字。
        </p>
    </div>
    <div id="div3">
        頁面中其它內容
    </div>

</body>
</html>
View Code

使用上面代碼頁面顯示如下所示：

但是當上面示例中div1和div2中任何一個元素中添加了一點不一樣的東西，比如說增加一個圖片

那么顯示的頁面效果就會如下所示，（也就是說無法實現兩個元素的詢問對齊）

那么該怎么樣解決這個問題呢

css3中加入多欄布局，使用多欄布局可以將一個元素中的內容分成多欄顯示，并且確保各欄中內容底部對齊。主要可以使用如下屬性

column-count：要顯示的列數

column-width：當前列顯示的寬度（通過指定每欄的最小寬度，讓瀏覽器自動計算分欄的數量）

column-gap:多欄之間的間隔距離

column-rule:在欄與欄之間增加一條間隔線，并設置該間隔線的寬度顏色等

一般性盒布局

一般性頁面布局都是分成左中右，像如下的例子一樣的

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        #left-sidebar {
            float: left;
            width: 200px;
            padding: 20px;
            background-color: orange;
        }

        #contents {
            float: left;
            width: 300px;
            padding: 20px;
            background-color: yellow;
        }

        #right-sidebar {
            float: left;
            width: 200px;
            padding: 20px;
            background-color: limegreen;
        }

        #left-sidebar, #contents, #right-sidebar {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="left-sidebar">
            <h2>左側邊欄</h2>
            <ul>
                <li><a href="#">超鏈接</a></li>
                <li><a href="#">超鏈接</a></li>
                <li><a href="#">超鏈接</a></li>
                <li><a href="#">超鏈接</a></li>
                <li><a href="#">超鏈接</a></li>
            </ul>
        </div>
        <div id="contents">
            <h2>內容</h2>
            <p>
                示例文字。相對來說比較長的示例文字。
        示例文字。相對來說比較長的示例文字。
        示例文字。相對來說比較長的示例文字。
        示例文字。相對來說比較長的示例文字。
        示例文字。相對來說比較長的示例文字。
        示例文字。相對來說比較長的示例文字。
        示例文字。相對來說比較長的示例文字。
        示例文字。相對來說比較長的示例文字。
        示例文字。相對來說比較長的示例文字。
            </p>
        </div>
        <div id="right-sidebar">
            <h2>右側邊欄</h2>
            <ul>
                <li><a href="#">超鏈接</a></li>
                <li><a href="#">超鏈接</a></li>
                <li><a href="#">超鏈接</a></li>

            </ul>
        </div>
    </div>
</body>
</html>
View Code

代碼運行后的界面效果如下所示：

可以看到使用float屬性或position屬性，左右兩側或多欄中div元素的底部并沒有對齊

使用盒布局

下面使用盒布局的方式來使得底部對齊，將上面的css改為如下所示：

        #container {
            display:-moz-box;
            display:-webkit-box;
        }
        #left-sidebar {          
            width: 200px;
            padding: 20px;
            background-color: orange;
        }

        #contents {           
            width: 300px;
            padding: 20px;
            background-color: yellow;
        }

        #right-sidebar {
            width: 200px;
            padding: 20px;
            background-color: limegreen;
        }

        #left-sidebar, #contents, #right-sidebar {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

其實也就是在最外層的div上使用了display:box,并去除了里面三個div的float:left的屬性，界面運行效果圖如下所示：

這里順便說一下，使用盒而已和多欄布局的區別：1、多欄布局每欄寬度必須相等2、使用多欄布局不可能具體指定什么欄顯示什么內容，也就是說多欄布局適合在使用顯示文章內容的時候而不適合用于安排整個網頁的各個元素的結構

使用自適應窗口的彈性盒布局

對于上面的例子，如果我們想讓這三個div的總寬度等于瀏覽器窗口的寬度，也就是說隨著瀏覽器窗口寬度的改變而改變，應該怎么做呢

事實上很簡單，只要在中間的div上增加-webkit-box-flex:1;-moz-box-flex:1; 這個屬性就可以了,css代碼如下所示：

        #container {
          display:-moz-box;
          display:-webkit-box;
        }
        #left-sidebar {          
            width: 200px;
            padding: 20px;
            background-color: orange;
        }

        #contents {    
            -webkit-box-flex:1;
            -moz-box-flex:1;       
            width: 300px;
            padding: 20px;
            background-color: yellow;
        }

        #right-sidebar {
            width: 200px;
            padding: 20px;
            background-color: limegreen;
        }

        #left-sidebar, #contents, #right-sidebar {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

界面運行效果如所示所示：

改變元素的顯示順序

那么我們怎樣改變元素的顯示順序呢，比如說我想讓左側欄在最右，內容欄在最左顯示，怎么辦？

css3提供了一個屬性box-ordinal-group屬性來改變各元素的顯示順序，大家看看我的css只是在里面的每個div增加了box-ordinal-group，就輕而易舉的改變了它們的顯示順序

        #container {
            display: -moz-box;
            display: -webkit-box;
        }

        #left-sidebar {
            -moz-box-ordinal-group: 3;
            -webkit-box-ordinal-group: 3;
            width: 200px;
            padding: 20px;
            background-color: orange;
        }

        #contents {
            -moz-box-ordinal-group: 1;
            -webkit-box-ordinal-group: 1;
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
            width: 300px;
            padding: 20px;
            background-color: yellow;
        }

        #right-sidebar {
            -moz-box-ordinal-group: 2;
            -webkit-box-ordinal-group: 2;
            width: 200px;
            padding: 20px;
            background-color: limegreen;
        }

        #left-sidebar, #contents, #right-sidebar {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

界面效果圖如下所示（是不是挺神奇的）：

改變元素的排列方向

那如果要改變元素的排列方向呢，在css3中可以使用box-orient來指定多個元素的排列方向。只需要在最外層的div上增加box-orient屬性就可以了。css代碼如下所示：

        #container {
            display: -moz-box;
            display: -webkit-box;
            -moz-box-orient:vertical;
            -webkit-box-orient:vertical;
        }

        #left-sidebar {
            -moz-box-ordinal-group: 3;
            -webkit-box-ordinal-group: 3;
            width: 200px;
            padding: 20px;
            background-color: orange;
        }

        #contents {
            -moz-box-ordinal-group: 1;
            -webkit-box-ordinal-group: 1;
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
            width: 300px;
            padding: 20px;
            background-color: yellow;
        }

        #right-sidebar {
            -moz-box-ordinal-group: 2;
            -webkit-box-ordinal-group: 2;
            width: 200px;
            padding: 20px;
            background-color: limegreen;
        }

        #left-sidebar, #contents, #right-sidebar {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

界面立馬就完全變了

元素寬度與高度的自適應

在使用盒布局時，元素的寬度與高度具有自適應性，也就是說元素的寬度與高度可以根據排列方向的改變而改變

看下面的例子，整個html界面代碼如下所示：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        #container {
            display: -moz-box;
            display: -webkit-box;
            border: 5px solid blue;
            -moz-box-orient: horizontal;
            -webkit-box-orient: horizontal;
            width: 500px;
            height: 300px;
        }

        #text-a {
            background-color: orange;
        }

        #text-b {
            background-color: yellow;
        }

        #text-c {
            background-color: limegreen;
        }

        #text-a, #text-b, #text-c {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="text-a">示例文字A</div>
        <div id="text-b">示例文字B</div>
        <div id="text-c">示例文字C</div>
    </div>
</body>
</html>
View Code

界面效果如下所示：

當我們改變上述代碼container里面的css如下所示（也就是改變排列方式為垂直方向）：

        #container {
            display: -moz-box;
            display: -webkit-box;
            border: 5px solid blue;
            -moz-box-orient: vertical;
            -webkit-box-orient: vertical;
            width: 500px;
            height: 300px;
        }

則界面效果圖如下所示：

 

使用彈性盒布局來消除空白

看了上面的效果圖，大家一定在想，容器中總還是留出一大片空白的區域，應該要怎樣來消除呢？其實可以使用css3中的彈性盒布局來解決，也就是使得多個參與排列的元素的總寬度與總高度始終等于容器的寬度與高度

下面我們來修改一下上述代碼（將排列方向設置為水平，在中間一個子div上加入box-flex屬性）

css樣式如下所示：

        #container {
            display: -moz-box;
            display: -webkit-box;
            border: 5px solid blue;
            -moz-box-orient: horizontal;
            -webkit-box-orient: horizontal;
            width: 500px;
            height: 300px;
        }

        #text-a {
            background-color: orange;
        }

        #text-b {
            background-color: yellow;
            -moz-box-flex:1;
            -webkit-box-flex:1;
        }

        #text-c {
            background-color: limegreen;
        }

        #text-a, #text-b, #text-c {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

界面顯示效果便如下所示了

當然你也可以設置排列方向為垂直，那么界面自然會顯示成如下這樣了

對多個元素使用box-flex屬性

現在我們不只對中間的子div加上box-flex，也對第一個子div加上box-flex，那么結果會怎么樣呢

        #container {
            display: -moz-box;
            display: -webkit-box;
            border: 5px solid blue;
            -moz-box-orient: vertical;
            -webkit-box-orient: vertical;
            width: 500px;
            height: 300px;
        }

        #text-a {
            background-color: orange;
            -moz-box-flex: 1;
            -webkit-box-flex: 1;
        }

        #text-b {
            background-color: yellow;
            -moz-box-flex: 1;
            -webkit-box-flex: 1;
        }

        #text-c {
            background-color: limegreen;
        }

        #text-a, #text-b, #text-c {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

如果三個子div都加上box-flex屬性，那么每個div高度等于容器的高度除以3，也就是效果圖所示所示：

其實box-flex:1就是讓其占據剛剛好的寬度，也就是說除去其它的部分，它剛好占滿全部

你動手去嘗試一下用box-flex:2，會發現box-flex:2并非box-flex:1的兩倍就是這個道理，1只是代表單位像素，也就是剛剛好的寬高，并非代表數值

指定水平方向與垂直方向的對齊方式

在css2中，如果想方案水平居中就只能用text-align:center，但是卻不能讓文字垂直居中，在css3中，只要讓div元素使用box-align屬性就行了。

示例代碼

        div {
            display: -moz-box;
            display: -webkit-box;
            -moz-box-align: center;
            -webkit-box-align: center;
            -moz-box-pack: center;
            -webkit-box-pack: center;
            width: 200px;
            height: 100px;
            background-color: pink;
        }

 

如果在div容器中放入“示例文字”這幾個字，界面運行效果就會如下所示：（同樣，如果我們在div里面放入圖像也是可以實現水平和垂直方向居中的）


不含病毒。www.avast.com
arrow
arrow
    全站熱搜

    AutoPoster 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄