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

随机推荐

CSS3多列
CSS3多列,通过创建列对页面内容进行布局,轻松实现类似Pinterest.花瓣的瀑布流式布局. 主要包含: column-count 列数 column-gap 列间宽度 column-r ...
[转] 多进程下数据库环境的恢复：DB_REGISTER
http://www.cnblogs.com/promise6522/archive/2012/05/09/2493542.html
javascript基础知识-函数
1.javascript中函数有两种定义方式: 函数语句定义和表达式定义 //函数有定义 function test(){ console.log("This is a function&q ...
loadRunner 负载机连接错误分析
错误信息: Error: Process "lr_bridge.exe" was not created on remote host "192.168.86.17&qu ...
一步一步安装hive
安装hive 1.下载hive-0.11.0.tar.gz,解压; 2.下载mysql-connector-java-5.1.29-bin.jar并放到hive/lib/下: 3.配置hive/con ...
TestNG参数化测试【转】
原文:http://www.yiibai.com/testng/20130916303.html 在TestNG的另一个有趣的功能是参数测试.在大多数情况下,你会遇到这样一个场景,业务逻辑需要一个巨大 ...
easyui的datagrid多次调用action的原因
今天碰见一个非常奇怪的问题,一个页面的datagrid正常,另一个页面的datagrid两次调用action代码,比较两个页面datagrid的使用方法,并没有不同.后经仔细debug,发现问题所在: ...
插入排序-java
排序-插入排序基本思想:将待排序表看作左右两部分,其中左边为有序区,右边为无序区, 整个排序过程就是将右边无序区中的元素逐个插入到左边的有序区中,以构成新的有序区. 平均时间:O(n2) 最好情况: ...
如何查看Android的Keystore文件的SHA1值
像使用百度地图api时候,一般需要获取keystore的SHA1值,这里就手把手教大家如何查看Android的keystore文件中的SHA1值. 第一步: 打开cmd,切换到keystore所在的文 ...
开源倾情奉献：基于.NET打造IP智能网络视频监控系统（一）开放源代码
本文为 Dennis Gao 原创技术文章,发表于博客园博客,未经作者本人允许禁止任何形式的转载. 开源倾情奉献系列链接开源倾情奉献:基于.NET打造IP智能网络视频监控系统(一)开放源代码开源倾 ...

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

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

随机推荐

热门专题