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. MES实施可能会遇到的问题，这里都帮你解决

    MES系统选型关键技术的发展已日趋成熟,开发MES系统技术并不是问题,困难的是如何确定系统的功能.规格,如何成功地使用MES系统,以充分发挥其作用,下面给大家分析这两大块内容. 实施MES系统选型的困 ...

  2. springboot如何读取配置文件中的参数（例如：application-consts.properties） 又结合maven读取配置文件的顺序

    1.启动项目后,会读取pom.xml中的配置文件,例如现在读取的是本地配置 2.找到对应的配置文件  会读取uri地址下的配置.注:如果为springboot启动无需加config项目的名称,应该本身 ...

  3. 【恢复】Redo日志文件丢失的恢复

    第一章 Redo文件丢失的恢复 1.1  online redolog file 丢失 联机Redo日志是Oracle数据库中比较核心的文件,当Redo日志文件异常之后,数据库就无法正常启动,而且有丢 ...

  4. Request和Response。

    复习点:1.重定向问题  2.输出字符串到浏览器.3.文件下载需求:1. 页面显示超链接2. 点击超链接后弹出下载提示框3. 完成图片文件下载 Request和Response Request: 1. ...

  5. Linux普通用户登录后，命令行提示：-bash-4.1$ ，原因分析及解决

    原文 有时候在使用用户登陆Linux系统时会发现,命令行提示符成了:-bash-4.1$,不显示用户名,路径信息. 原因:用户家目录里面与环境变量有关的文件被删除所导致的 也就是这俩文件:.bash_ ...

  6. C++学习（6）—— 引用

    1. 引用的基本使用 作用:给变量起别名 语法:数据类型 &别名 = 原名 #include<iostream> using namespace std; int main(){ ...

  7. django项目中使用邮箱找回密码功能

    本文使用qq邮箱,需要登录邮箱,在设置-账户里面开启SMTP服务,要记下授权码 前端html {#找回密码的表单#} <form action="" method=" ...

  8. URI与URL详解

    URL 与 URI 很多人会混淆这两个名词. URL:(Uniform/Universal Resource Locator 的缩写,统一资源定位符). URI:(Uniform Resource I ...

  9. 如何显示隐藏的文件在win7系统中

    点左下角“开始”菜单,再点击“计算机”. 点击窗口顶部靠左位置的“组织”菜单,选择其中的“文件夹和搜索选项”. 在弹出的窗口里点击切换到“查看”选项卡.   在窗口中部位置下拉滚动条,找到“显示隐藏的 ...

  10. python基础语法14 面向对象

    面向对象 1.什么是面向对象? 面向对象是一门编程思想! - 面向过程编程思想: 核心是 “过程” 二字,过程指的是解决问题的步骤,即先干什么再干什么! 基于该编程思想编写程序,就好比在设计一条工厂流 ...