zoukankan      html  css  js  c++  java
  • css3中的盒子模型

    1、示例一

    实现左右布局,左侧宽度200px,右侧自适配

    代码如下:

    <!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 Edge

    display: -ms-flexbox;  适用于IE10、IE11,我试了IE8,IE9,都支持不了

    效果如下:

    2、示例二

    实现左中右布局,左中右比例为:200px:1:2

    代码如下:

    <!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>

    效果如下:

    3、示例三

    在示例二的基础上,使用-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浏览器上可以支持。

    4、示例四

    使用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>

    效果如下:

  • 相关阅读:
    [转]Angular4首页加载慢优化之路
    [转]angular 禁止缓存
    微服务之分布式跟踪系统(springboot+pinpoint)
    分布式追踪系统设计与实现
    QLExpress 规则引擎使用介绍
    几个常见规则引擎的简单介绍和演示
    大数据对账
    美团配送资金安全治理之对账体系建设
    美的支付-对账系统实现
    redis实现对账(集合比较)功能
  • 原文地址:https://www.cnblogs.com/modou/p/10922882.html
Copyright © 2011-2022 走看看