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

随机推荐

转行IT行业的心路历程2
2011/07-2016/12 11年毕业之后阴差阳错的到了宁波慈星股份,学习了针织机械.当初的想法很简单从沈阳到南方,因为南方小厂多机会多,因为我的目标就是当老板(呵呵,大部分的人的目标都是吧,现在 ...
Core Audio（二）
用户模式音频组件在windows vista中,core audio apis充当用户模式音频子系统的基础,core audio apis作为用户模式系统组件的一个thin layer,它用来将用户 ...
NSIS（001）检测和结束进程是否运行？
配合插件:killer.dll 导入DLL:ReserveFile "${NSISDIR}\Plugins\killer.dll" 使用方法: ;可以检测和结束32位程序进程和64 ...
用wordpress搭建个人博客
一.安装WordPress所需的开发环境. 1.安装apache yum install httpd 2.安装mysql 可参照我的另一篇文章:http://www.cnblogs.com/kings ...
js 获取样式兼容方法
function getStyle(obj, attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return ...
[转]Navicat for MySQL快捷键
Navicat for MySQL快捷键 ctrl+q 打开查询窗口 ctrl+/ 注释sql语句 ctrl+shift +/ 解除注释 ctrl+r 运行查询窗口的sql语句 ctrl+shift+ ...
centos 清理内存缓存
读写文件时,Linux内核为了提高读写效率与速度,会将文件在内存中进行缓存,这就是Cache Memory(缓存内存).即使程序运行结束后,Cache Memory也不会自动释放.这就会导致程序频繁读 ...
Visual Studio 2010中的stdafx.h和targetver.h两个头文件是有什么用？
来自百度~stdafx.h中没有函数库,只是定义了一些环境参数,使得编译出来的程序能在32位的操作系统环境下运行. Windows和MFC的include文件都非常大,即使有一个快速的处理程序,编译程 ...
ENode 1.0 - 框架的总体目标
开源地址:https://github.com/tangxuehua/enode 本文想介绍一下enode框架要实现的目标以及部分实现分析思路剖析.总体来说enode框架是一个基于cqrs架构和消息驱 ...
《C#图解教程》读书笔记之六：接口和转换
本篇已收录至<C#图解教程>读书笔记目录贴,点击访问该目录可获取更多内容. 一.接口那点事儿 (1)什么是接口? 一组函数成员而未实现的引用类型.只有类和结构能实现接口. (2)从ICom ...

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

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

随机推荐

热门专题