css3中的盒子模型

時間 2019-11-06

標籤 css3 css 盒子模型欄目 CSS 简体版

原文原文鏈接

一、示例一html

實現左右佈局，左側寬度200px，右側自適配web

代碼以下：瀏覽器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .wrap {
            display: -webkit-box;
            display: -ms-flexbox;
            -webkit-box-orient: horizontal;
        }

        .child {
            border: 2px solid black;
            -webkit-box-align: center;
            margin: 10px;
            min-height: 200px;
            word-break: break-all;

        }

        .w200 {
            width: 200px;
        }

        .flex1 {
            -webkit-box-flex: 1;
            -ms-flex: 1;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="child w200">200px</div>
        <div class="child flex1">右側內容2</div>
    </div>
</body>

</html>

說明：佈局

display: -webkit-box; 適用於谷歌瀏覽器，火狐瀏覽器，IE Edgeflex

display: -ms-flexbox; 適用於IE十、IE11，我試了IE8,IE9，都支持不了ui

效果以下：flexbox

二、示例二spa

實現左中右佈局，左中右比例爲：200px:1:23d

代碼以下：code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .wrap {
            display: -webkit-box;
            display: -ms-flexbox;
            -webkit-box-orient: horizontal;
        }

        .child {
            border: 2px solid black;
            -webkit-box-align: center;
            margin: 10px;
            min-height: 200px;
            word-break: break-all;

        }

        .w200 {
            width: 200px;
        }

        .flex1 {
            -webkit-box-flex: 1;
            -ms-flex: 1;
        }

        .flex2 {
            -webkit-box-flex: 2;
            -ms-flex: 2;
        }        
    </style>
</head>

<body>
    <div class="wrap">
        <div class="child w200">200px</div>
        <div class="child flex1">中間內容</div>
        <div class="child flex2">右側內容</div>
    </div>
</body>

</html>

效果以下：

三、示例三

在示例二的基礎上，使用-webkit-box-direction修改佈局順序

代碼以下（黃色背景爲添加的代碼）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .wrap {
            display: -webkit-box;
            display: -ms-flexbox;
            -webkit-box-orient: horizontal; -webkit-box-direction: reverse;
        }

        .child {
            border: 2px solid black;
            -webkit-box-align: center;
            margin: 10px;
            min-height: 200px;
            word-break: break-all;

        }

        .w200 {
            width: 200px;
        }

        .flex1 {
            -webkit-box-flex: 1;
            -ms-flex: 1;
        }

        .flex2 {
            -webkit-box-flex: 2;
            -ms-flex: 2;
        }        
    </style>
</head>

<body>
    <div class="wrap">
        <div class="child w200">200px</div>
        <div class="child flex1">中間內容</div>
        <div class="child flex2">右側內容</div>
    </div>
</body>

</html>

經過指定-webkit-box-direction: reverse;顯示順序爲從右到左顯示。這個樣式即便最新的IE11也是不支持的，在IE Edge瀏覽器上能夠支持。

四、示例四

使用box-ordinal-group定義盒子佈局的位置

代碼以下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .wrap {
            display: -webkit-box;
            display: -ms-flexbox; /* IE10+ */
            -webkit-box-orient:vertical;
        }

        .child {
            border: 1px solid black;
            margin: 10px;
            min-height: 200px;
            width: 200px;

        }

        .flex1 {
            -webkit-box-ordinal-group: 4;
            -ms-flex-order:4; /* IE10+ */
        }

        .flex2 {
            -webkit-box-ordinal-group: 3;
            -ms-flex-order:3; /* IE10+ */
        }

        .flex3 {
            -webkit-box-ordinal-group: 2;
            -ms-flex-order:2; /* IE10+ */
        }

        .flex4 {
            -webkit-box-ordinal-group: 1;
            -ms-flex-order:1; /* IE10+ */
        }        
    </style>
</head>

<body>
    <div class="wrap">
        <div class="child flex1"><img src="images/img1.png"></div>
        <div class="child flex2"><img src="images/img2.png"></div>
        <div class="child flex3"><img src="images/img3.png"></div>
        <div class="child flex4"><img src="images/img4.png"></div>
    </div>
</body>

</html>

效果以下：

我本地的圖片：

示例五

本示例使用box-orient來指定盒子是橫向排列仍是豎向排列

使用box-pack來指定子容器在水平軸上的空間分配方式，是居左，居右，仍是居中

使用box-align來指定子容器在豎軸上的空間分配方式，是居上，居下，仍是居中

代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
        .wrap {
            min-height: 600px;
            display: -webkit-box;
            display: -ms-flexbox;
            -webkit-box-orient:vertical; /* 子容器豎向排列 */
            -ms-flex-direction: column; /* 子容器豎向排列，IE10+ */
            flex-direction: column; /* 子容器豎向排列，IE10+ */
            -webkit-box-pack: center; /* 子容器在水平軸上的空間分配方式，能夠是start、end或者center */
            -webkit-box-align: center; /* 子容器在豎軸上的空間分配方式，能夠是start、end或者center */
            -ms-flex-align: center; /* 子容器在豎軸上的空間分配方式，能夠是start、end或者center */
            -ms-flex-pack:center /* 子容器在水平軸上的空間分配方式，IE10+,能夠是start、end或者center */
        }

        .flex {
            border: 1px solid black;
            margin: 10px;
            width: 200px;
        }
</style>
<body>
    <div class="wrap">
        <div class="flex"><img src="images/img1.png" ></div>
        <div class="flex"><img src="images/img2.png" ></div>
    </div>
</body>
</html>