被废了的display:box弹性盒模型

　　这几天在研究弹性布局，看书中写的是display:box，结果在chrome浏览器中是正常的，想着移动端大部分浏览器也是webkit内核的应该也没啥问题，结果确实没问题，但仔细一看，高度呢？好吧，严重的bug，高度不起作用了（特殊情况）。再查查资料原来w3c已经废了display:box;换成display:flex了，只好重新学过了，以后还是看这个吧http://www.w3schools.com/国外站请自备神器。

　　UC啥的浏览器用的还是display:box最新的是display:flex，所以移动端还得写两份。当然你也可以使用flex.css库它已经帮你解决兼容性了，但项目小的话还是自己写吧。

下面是写的小dome。

使用box-align需要配合box-orient使用
box-align属性是在相反方向的轴线上发生作用的。如果box-orient设置为horizontal，box-align就会把空间分配在垂直轴上，反之亦然。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>弹性盒模型</title>

    <link rel="stylesheet" href="box-dome.css">

</head>

<body>

    <!-- display:box; -->

    <section id="test_1">

        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>

        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>

        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>

    </section>

    <!-- 平分 -->

    <section id="test_2">

        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>

        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>

        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>

    </section>

    <!-- 左右1份中间3份 -->

    <section id="test_3">

        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>

        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>

        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>

    </section>

    <!-- 第一个固定，其他自适应 -->

    <section id="test_4">

        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>

        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>

        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>

    </section>

    <!-- box-orient:vertical; -->

    <section id="test_5">

        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>

        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>

        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>

    </section>

    <!-- box-orient:horizontal; -->

    <section id="test_6">

        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>

        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>

        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>

    </section>

    <!-- box-direction:reverse; -->

    <section id="test_7">

        <p>1 另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>

        <p>2 另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>

        <p>3 另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>

    </section>

    <!-- box-ordinal-group:number; -->

    <section id="test_8">

        <p>1 另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>

        <p>2 另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>

        <p>3 另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>

    </section>

    <!-- 使用box-align需要配合box-orient使用 -->

    <!-- orient-horizontal -- align-end -->

    <section id="test_9">

        <p>1 另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>

    </section>

    <!-- orient-horizontal -- align-center -->

    <section id="test_10">

        <p>另外要注意的事情</p>

    </section>

    <!-- orient-vertical -- align-center -->

    <section id="test_11">

        <p>另外要注意的事情</p>

    </section>

    <!-- orient-vertical -- align-center -->

    <section id="test_12">

        <p>另外要注意的事情</p>

    </section>

    <!-- 水平垂直居中 -->

    <section id="test_13">

        <div>

            <p>另外要注意的事情</p>

        </div>

    </section>

</body>

</html>

/* webkit-box */

#test_1{

    display:-webkit-box;

    width:600px;

}

#test_1>p{

    width:200px;

    margin:0 10px;

    text-align:justify;

}

#test_1>p::after{

    content:'';

    display:inline-block;

    width:100%;

}

/* 平分 */

#test_2{

    display:-webkit-box;

    outline:1px solid #ccc;

}

#test_2>p{

    -webkit-box-flex:;

    margin:10px;

    border-right:1px solid #ccc;

}

/* 左右1份中间3份 */

#test_3{

    display:-webkit-box;

    outline:1px solid #ccc;

}

#test_3>p{

    -webkit-box-flex:;

    width:100px;

    margin:10px;

    border-right:1px solid #ccc;

}

#test_3>p:first-child+p{

    -webkit-box-flex:;

}

/* 第一个固定，其他自适应 */

#test_4{

    display:-webkit-box;

    outline:1px solid #ccc;

}

#test_4>p{

    -webkit-box-flex:;

    margin:10px;

    border-right:1px solid #ccc;

}

#test_4>p:first-child{

    -webkit-box-flex:;

    width:100px;

}

/* box-orient:vertical; */

#test_5{

    display:-webkit-box;

    -webkit-box-orient:vertical;

    width:500px;

    outline:1px solid #ccc;

}

#test_5>p{

    -webkit-box-flex:;

    margin:10px;

    border-right:1px solid #ccc;

}

/* box-orient:horizontal;水平 */

#test_6{

    display:-webkit-box;

    -webkit-box-orient:horizontal;

    width:500px;

    outline:1px solid #ccc;

}

#test_6>p{

    -webkit-box-flex:;

    margin:10px;

    border-right:1px solid #ccc;

}

/* box-direction:reverse;垂直 */

#test_7{

    display:-webkit-box;

    -webkit-box-direction:reverse;

    width:500px;

    outline:1px solid #ccc;

}

#test_7>p{

    -webkit-box-flex:;

    margin:10px;

    border-right:1px solid #ccc;

}

/* box-ordinal-group:number; */

#test_8{

    display:-webkit-box;

    width:500px;

    outline:1px solid #ccc;

}

#test_8>p{

    -webkit-box-flex:;

    margin:10px;

    border-right:1px solid #ccc;

}

#test_8>p:first-child{

    -webkit-box-ordinal-group:;

}

#test_8>p:first-child+p{

    -webkit-box-ordinal-group:;

}

#test_8>p:last-child{

    -webkit-box-ordinal-group:;

}

/* 使用box-align需要配合box-orient使用 */

/* orient-horizontal -- align-end */

#test_9{

    display:-webkit-box;

    -webkit-box-orient:horizontal;

    -webkit-box-align:end;

    height:100px;

    outline:1px solid #ccc;

}

#test_9>p{

    -webkit-box-flex:;

    margin:10px;

    border-right:1px solid #ccc;

}

/* orient-horizontal -- align-center */

#test_10{

    display:-webkit-box;

    -webkit-box-orient:horizontal;

    -webkit-box-align:center;

    height:100px;

    outline:1px solid #ccc;

}

#test_10>p{

    -webkit-box-flex:;

    margin:10px;

    border-right:1px solid #ccc;

}

/* orient-vertical -- align-center */

#test_11{

    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-box-align:end;

    height:100px;

    outline:1px solid #ccc;

}

#test_11>p{

    -webkit-box-flex:;

    margin:10px;

    border-right:1px solid #ccc;

}

/* orient-vertical -- align-center */

#test_12{

    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-box-align:center;

    height:100px;

    outline:1px solid #ccc;

}

#test_12>p{

    -webkit-box-flex:;

    margin:10px;

    border-right:1px solid #ccc;

}

/* 水平垂直居中 */

#test_13{

    display:-webkit-box;

    -webkit-box-orient:horizontal;

    -webkit-box-align:center;

    height:100px;

    outline:1px solid #ccc;

}

#test_13>div{

    -webkit-box-flex:;

    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-box-align:center;

    margin:10px;

    /*margin:0 auto;*/

}

被废了的display:box弹性盒模型的更多相关文章

display:box；display:flex；弹性盒模型
display:box:display:flex:弹性盒模型非常适用于移动端.PC端高级浏览器,效果也很好. display: -webkit-box; display: -moz-box; dis ...
box flex 弹性盒模型（转载）
css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML .GladeX ...
CSS弹性盒模型(flex box)
本文介绍的是 CSS3 规范中引入的新布局模型:弹性盒模型(flex box).随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率. 浏览器支持: 弹性盒布局的容器(fl ...
详细介绍弹性盒模型（display：flex）
弹性盒模型,即Flexbox,是css3中的新特性,其实弹性盒模型的原身是dispaly:box:这里,我们暂时不考虑旧的,我们只看新的. 为容器指定弹性盒子,只需在父元素(也就是容器)中设置:dis ...
弹性盒模型 flex box
弹性盒子模型布局方案传统的布局方案大多采用div+css+float+position+display来实现,但是随着css3中弹性盒子模型的推出,在前端布局方案中就又多出了一项彪悍的选项. 而因 ...
弹性盒模型display:flex
Flex布局意为"弹性布局",用来为盒模型提供更多灵活性.此外,Flex定义的容器可以对块级元素(display: flex;)或行内元素(display: inline-flex ...
（转）详解css3弹性盒模型（Flexbox)
今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...
css3弹性盒模型
一.简介 css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局. 目 ...
深入理解CSS弹性盒模型flex
× 目录 [1]版本更迭 [2]display [3]基本概念[4]伸缩容器[5]伸缩项目前面的话 CSS3引入了一种新的布局模型——flex布局.flex是flexible box的缩写,一般称之 ...

随机推荐

Build Android Webrtc Libjingle Library On Ubuntu
Our team is developing an app to help people solve problem face to face. We choose webrtc protocol a ...
vijos1909寻找道路
描述在有向图 G 中,每条边的长度均为 1,现给定起点和终点,请你在图中找一条从起点到终点的路径,该路径满足以下条件: 路径上的所有点的出边所指向的点都直接或间接与终点连通. 在满足条件 1 ...
[Leetcode][JAVA] Binary Tree Level Order Traversal
Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...
php数字补零的两种方法
在php中有两个函数——至少有两个是否有其他的我还不知道,能够实现数字补零,str_pad(),sprintf()详细如下 str_pad顾名思义这个函数是针对字符串来说的这个可以对指定的字符串填补任 ...
C# .NET 隐藏窗体
隐藏窗体,打开窗体后如果想让它隐藏,然后再显示出来,就判断是不是NULL或者有没有关闭,不然就NEW一个出来,否则就SHOW出来. 当然如果有隐藏的话退出的时候最好用Application.Exit( ...
js继承理解（有引用）
具体栗子:http://www.cnblogs.com/ayqy/p/4471638.html(地下为自己理解总结,可能晦涩,链接详细) 1.父类实例赋予子类原型. 2.利用子类函数引用父类.cal ...
播放一个视频并用滚动条控制进度-OpenCV应用学习笔记二
今天我们来做个有趣的程序实现:利用OpenCV读取本地文件夹的视频文件,并且在窗口中创建拖动控制条来显示并且控制视频文件的读取进度. 此程序调试花费了笔者近一天时间,其实大体程序都已经很快写出,结果执 ...
Revert R12.1.3 Homepage Layout to Link Style as in R12.1.1 or 11i
https://blogs.oracle.com/ptian/entry/revert_r12_1_3_homepage Oracle EBS 12.1.3主页的展示方式不太习惯,12.1.3为了展示 ...
开源库Magicodes.WeChat.SDK总体介绍
目录 1 概要 1 2 主要特点 2 3 架构图 8 3.1 构造器——WeChatSDKBuilder 8 3.2 函数管理器——WeChatF ...
phoenix 开发API系列（二）phoenix 各类 api 实现方式
概述上一篇已经提到如何安装以及利用 phoenix framework 来开发一个简单的 api. 接着上次的工程,下面演示如何通过 phoenix framework 来构建各种类型的 api 来 ...

被废了的display:box弹性盒模型

被废了的display:box弹性盒模型的更多相关文章

随机推荐

热门专题