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. Cheat Engine 修改汇编指令

    打开游戏 扫描阳光 扫描过程就不讲了 找到阳光的地址 显示反汇编 找到使阳光减少的反汇编代码 空指令替换 将阳光减少汇编指令,用空指令替换.这样阳光就不再减少了 指令替换 也可以将汇编指令修改,减少变 ...

  2. Java集合学习(5)：LinkedHashMap

    一.概述 HashMap是无序的,HashMap在put的时候是根据key的hashcode进行hash然后放入对应的地方.所以在按照一定顺序put进HashMap中,然后遍历出HashMap的顺序跟 ...

  3. selenium登录简单的网站

    import time from selenium import webdriver from lxml import etree from selenium.webdriver import Act ...

  4. 揭秘MySQL主从数据不一致

    前言: 目前MySQL数据库最常用的是主从架构,大多数高可用架构也是通过主从架构演变而来.但是主从架构运行时间长久后容易出现数据不一致的情况,比如因从库可写造成的误操作或者复制bug等,本篇文章将会详 ...

  5. mac php Swoole入门

    一. swoole 扩展安装 安装前必须保证系统已经安装了下列软件 php-7.0 或更高版本 gcc-4.8 或更高版本 make autoconf pcre (CentOS系统可以执行命令:yum ...

  6. pip换源-换成国内的源

    PyPI使用国内源   通过几次 pip 的使用,对于默认的 pip 源的速度实在无法忍受,于是便搜集了一些国内的pip源,如下: 阿里云 http://mirrors.aliyun.com/pypi ...

  7. Beta冲刺第3次

    一.团队成员的学号姓名列表 学号 姓名 201731103226 翟仕佶 201731062517 曾中杰 201731062424 杨模 201731062632 邓高虎 201731062624 ...

  8. Btn 样式

    .btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: nor ...

  9. 硬币游戏1——打表&&记忆化搜索

    题目 Alice和Bo在玩这样一个游戏,给定 $k$ 个数字 $a_1, a_2,..,a_k$.一开始有 $x$ 枚硬币,Alice和Bob轮流取硬币.每次所取的硬币的枚数一定要在 $k$ 个数当中 ...

  10. PHP获取一年有多少周和每周开始和结束日期

    /*PHP获取当前日期是第几周和本周开始日期和本周结束日期*/ //$now = '2018-11-13';周二 public function getNowTimeInfo($now) { $str ...