被废了的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的缩写,一般称之 ...

随机推荐

CentOS 6 中安装Node.js 4.0 版本或以上
如果想在CentOS 6 中安装Node.js >4.0,如果通过以往的方式安装: wget http://nodejs.org/dist/v4.0.0/node-v4.0.0.tar.gz t ...
[spark案例学习] 单词计数
数据准备数据下载:<莎士比亚全集> 我们先来看看原始数据:首先将数据加载到RDD,然后显示数据框的前15行. shakespeareDF = sqlContext.read.text(f ...
IOS中CoreData浅析
CoreData简介: 什么是CoreData? Core Data是iOS5之后才出现的一个框架,它提供了对象-关系映射(ORM)的功能,即能够将OC对象转化成数据,保存在SQLite数据库文件中, ...
利用GBDT模型构造新特征
[本文链接:http://www.cnblogs.com/breezedeus/p/4109480.html,转载请注明出处] 我的博客主营地迁至github,欢迎朋友们有空去看看:http://br ...
day10---multiprocess 多进程
multiprocess Queue \ Pipe 只是实现进程间数据的传递 Manager 实现了进程间数据的共享,即多个进程可以修改同一份数据进程模块 multiprocessing #! ...
wangEditor ie9 表单上传图片
wangEditor ie9 表单上传图片弹框无法消失 var resultText = $.trim(iframeWindow.document.body.innerHTML); result ...
SSIS 错误
[OLE DB 源 [1]] 错误: SSIS 错误代码 DTS_E_OLEDBERROR.出现 OLE DB 错误.错误代码: 0x80040E14.已获得 OLE DB 记录.源:"Or ...
jq判断复选框是否被选中亲测可用
var shortName = $('#shortName').is(':checked')?1:0;
Replication的犄角旮旯（九）-- sp_setsubscriptionxactseqno，赋予订阅活力的工具
<Replication的犄角旮旯>系列导读 Replication的犄角旮旯(一)--变更订阅端表名的应用场景 Replication的犄角旮旯(二)--寻找订阅端丢失的记录 Repli ...
Actor的原理
先从著名的c10k问题谈起.有一个叫Dan Kegel的人在网上(http://www.kegel.com/c10k.html)提出:现在的硬件应该能够让一台机器支持10000个并发的client.然 ...

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

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

随机推荐

热门专题