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="data:images/img1.png"></div>

        <div class="child flex2"><img src="data:images/img2.png"></div>

        <div class="child flex3"><img src="data:images/img3.png"></div>

        <div class="child flex4"><img src="data: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="data:images/img1.png" ></div>

        <div class="flex"><img src="data:images/img2.png" ></div>

    </div>

</body>

</html>

效果如下：

css3中的盒子模型的更多相关文章

  1. css中的盒子模型

    css中的盒子模型 css中的盒子模型,有两种,一种是“标准 W3C 盒子模型”,另外一种是IE盒子模型.   1.w3c盒子模型 从图中可以看出:w3c盒子模型的范围包括了:margin,borde ...

  2. js中的盒子模型

    说到盒子模型,你第一时间会想到css盒子模型,css中的盒子模型包括(内容区+内边距+边框).那在js中怎么去获取这些属性值呢?下面一起来学习js中的盒子模型. css样式 body { margin ...

  3. CSS学习系列1 - CSS中的盒子模型 box model

    css中有一个盒子模型的概念. 主要是用来告诉浏览器如何来计算页面元素的宽度和高度, 比如该元素的宽度/高度 是否包括内边距,边框,外边距.  盒子模型有一个属性box-sizing属性来说明是否包括 ...

  4. CSS中的盒子模型与 box-sizing 属性

    盒子模型是css中一个重要的概念,是开发网页必须要用的布局方法.盒子模型有两种,分别是标准 w3c 盒子模型和 ie 盒子模型. 标准 w3c 盒子模型:包括 magin(外边距).border(边框 ...

  5. css中的盒子模型是什么?

    什么是CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周 ...

  6. CSS中的盒子模型详解

    很多人对盒子模型搞晕头了,下面通过一个简单的代码来分析盒子模型的结构! 为了方便方便观看!在第一个div中画了一个表格,并将其尺寸设置成与div内容大小一样!且设置body的margin和paddin ...

  7. css3中 弹性盒模型布局之box-flex

    box-flex:也就是让子容器针对父容器的宽高属性依照一定的规则来划分 Eg: html代码: <div class="wrap"> <div class=&q ...

  8. CSS3 中弹性盒模型--容器的属性

    1.display : flex | inline-flex注意,设为 Flex 布局以后,子元素的float.clear和vertical-align属性 将失效. 2.flex-direction ...

  9. CSS网页布局：盒子模型

    一.盒子模型 标准盒子模型(W3C盒子) 不论是标准盒模型还是IE盒子模型,都有content.padding.border.margin四个部分组成,但从上图也可以看出W3C盒子和IE盒子主要区别在 ...

随机推荐

  1. vim替换字符串

    1. s 命令来替换字符串 :s/vivian/sky/ #替换当前行第一个 vivian 为 sky :s/vivian/sky/g #替换当前行所有 vivian 为 sky :n,$s/vivi ...

  2. 4 Android可执行文件

    APK是Android Package缩写,使用zip解压文件即可打开.每个APK文件中都包含一个class.dex文件(odex过的APK文件除外).class.dex文件就是Android系统Da ...

  3. PostgreSQL 基本数据类型及常用SQL 函数操作

    数据类型 名字 别名 描述 bigint int8 有符号的8字节整数 bigserial serial8 自动增长的8字节整数 bit [ (n) ]   定长位串 bit varying [ (n ...

  4. Flink Time深度解析（转）

    Flink 的 API 大体上可以划分为三个层次:处于最底层的 ProcessFunction.中间一层的 DataStream API 和最上层的 SQL/Table API,这三层中的每一层都非常 ...

  5. 【Mysql异常】[HY000][1030] Got error 28 from storage engine

    原因: 应该是磁盘空间不足导致 可通过 df -h 查看部署mysql的服务磁盘空间使用情况

  6. Cleaning Robot POJ - 2688

    题目链接:https://vjudge.net/problem/POJ-2688 题意:在一个地面上,有一个扫地机器人,有一些障碍物,有一些脏的地砖,问,机器热能不能清扫所有的地砖, (机器人不能越过 ...

  7. 【使用DIV+CSS重写网站首页案例】CSS盒子模型

    CSS盒子模型 取值问题: 默认情况,padding.border.margin都为0: 设定区域内容的width和height,是区域内容框的尺寸: 如果设定padding/border/margi ...

  8. 纯数据结构Java实现(10/11)(2-3树&红黑树)

    欢迎访问我的自建博客: CH-YK Blog.

  9. Codeforces I. Producing Snow（优先队列）

    题目描述: C. Producing Snow time limit per test 1 second memory limit per test 256 megabytes input stand ...

  10. crontab每小时运行一次（转）

    https://blog.csdn.net/liu0808/article/details/80668705 先给出crontab的语法格式 对于网上很多给出的每小时定时任务写法,可以说绝大多数都是错 ...