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

随机推荐

使用OFBIZ 时，使用的键入提示。
对商品的键入提示 ,效果如图(当输入关键字时,会提示出相应的数据) 首先要引入相应的插件页面字段 js方法
java学习笔记六——数组
数组类型数组是一种常见的数据结构,可用于存放多个数据,每一个数组元素存放一个数据,通常可以通过下标进行访问其元素. Java数组要求所有数组元素具有相同的数据类型.因此,数组元素的数据类型是唯一的. ...
java基础4_字符串
一字符串 Java字符串关键字是String,是一个类,创建新的字符串即创建一个新的对象. 1.字符串的声明及初始化. String str; //只做声明 String str1="aa ...
hdu 5720
考虑三个树枝:a,b,c若c是将要抛出的树枝,那么形成三角形的条件是a+b>c and a-b<c 可以写成 c属于开区间(a-b,a+b)对于每个C和许许多多的其他边,如何保证C不构成三 ...
01 选择 Help > Install New Software，在出现的对话框里，点击Add按钮，在对话框的name一栏输入“ADT”，点击Archive...选择离线的ADT文件，contact all update ....千万不要勾选点击Add按钮，在对话框的name一栏输入“ADT”，点击Archive...选择离线的ADT文件，contact all update ....千万不要勾
引言好久没碰过android,今天重新搭建了一次环境,遇到的问题记录下载.共以后使用. 安装软件的软件有jdk+eclipse+adt+sdk 主要记录安装adt和sdk的过程,注意,adt和sd ...
java jinfo命令详解
jinfo (configuration info): 功能:输出Java进程的系统信息与jvm参数. 摘要: jinfo [ option ] pid jinfo [ option ] execut ...
JFinal 1.5 发布,JAVA极速WEB+ORM框架
JFinal 爱好者一直都在问 JFinal 何时再次升级?JFinal 1.5 何时发布?以往升级都保持在每月近两次的频率,为何本次五个月过去了新版本还不出?由于作者暂时阔别码坛已有半年时间,一直无 ...
TCPDF 6.0.036 发布，PHP 的 PDF 操作包
TCPDF 6.0.036 包含对注册色彩的支持. TCPDF是一个用于快速生成PDF文件的PHP5函数包.TCPDF基于FPDF进行扩展和改进.支持UTF-8,Unicode,HTML和XHTML.
JavaScript很牛
几年前,我从来没有想过现在的JavaScript竟然会变得几乎无处不在.下面是几个要关注JavaScript的原因. 首先,我认为JavaScript能够得到普及的主要原因之一是,JavaScript ...
Java多线程系列--“JUC锁”07之 LockSupport
概述本章介绍JUC(java.util.concurrent)包中的LockSupport.内容包括:LockSupport介绍LockSupport函数列表LockSupport参考代码(基于JD ...

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

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

随机推荐

热门专题