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. android中实现service动态更新UI界面

    案例:通过service向远程服务器发送请求,根据服务器返回的结果动态更新主程序UI界面,主程序可实时关闭或重启服务. 注册BroadcastReceiver 在主程序activity中注册一个Bro ...

  2. C/ C++ 快速上手

    C++ 快速上手 (一)https://www.cnblogs.com/cosmo89929/archive/2012/12/22/2828745.html C++ 快速上手 (二)https://w ...

  3. 阿里云ECS-使用putty产品psftp工具上传下载

    本人windows10,安装了winscp3,原本可以简单易用,但天空不作美,死活不让我连接,无奈,只能换命令行方式, 好在,putty提供了一个小工具,psftp,不过,需要去官网下载完整版才有哦, ...

  4. pyppeteer进阶技巧

    记录一下在使用pyppeteer过程中慢慢发现的一些稍微高级一点的用法. 一.拦截器简单用法 拦截器作用于单个Page,即浏览器中的一个标签页.每初始化一个Page都要添加一下拦截器.拦截器实际上是 ...

  5. JAVA自定义查询策略

    此文章为个人笔记,考虑之后工作用到,博客方便于查找,如果可以给他人提供参考价值,那再好不过 1.定义查询接口参数 package com.qy.code.generator.query; import ...

  6. php桥接模式(bridge pattern)

    有点通了 <?php /* The bridge pattern is used when we want to decouple a class or abstraction from its ...

  7. JS定时器实现函数节流和防抖 -简单实现对比 -适用地方

    如题 (总结要点) 防止重复点击! 最近项目中遇见这个"函数抖动"的问题!快速点击前端xx按钮,造成数据多次加载进页面里,正常只显示10条数据,结果显示了20条数据,异常! 出现原 ...

  8. Beta冲刺阶段博客集合

    Beta冲刺阶段博客集合 课程名称:软件工程1916|W(福州大学) 团队名称: 云打印 作业要求: 项目Beta冲刺(团队) 作业目标:作业集合 团队队员 队员学号 队员姓名 个人博客地址 备注 2 ...

  9. python应用-21根火柴游戏

    """ 21跟火柴 """ from random import randint def main(): total=21 while to ...

  10. 前端jsp fetch跨域调用　is not allowed by Access-Control-Allow-Origin.

    之前我在用json跨域调用时,遇到如图问题,后来查查是官方json不支持跨域调用,后来改用非官方的jsonp跨域调用后台方法,出现如下问题 Origin http://127.0.0.1:8080 i ...