• 在移动端开发的时候,圣杯布局,弹性盒,是我们经常会用得到的,W3C很久以前就有一个display:box属性

display:-webkit-box;父元素设置该属性后,作用与display:flex类似,子元素可在一行显示,且实现自适应。

演示:

 <style>
*{
margin: 0;
padding: 0;
}
.parent{
width: 400px;
height: 600px;
display: -webkit-box;
-webkit-box-orient: vertical;/* 竖向排列 */
}
.child-one{
background: lightblue;
-webkit-box-flex: 1;
}
.child-two{
background: lightgray;
-webkit-box-flex: 2;
}
.child-three{
background: lightgreen;
/* 加了固定的高度和边距 */
height: 200px;
margin: 15px 0;
}
</style> <div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000">
<div class="parent">
<div class="child-one">1</div>
<div class="child-two">2</div>
<div class="child-three">3</div>
</div>
</div>

效果如下:

      

那么到这里有人会说,display:-webkit-box;与display:flex究竟有什么区别呢?

如果要说区别,display:box; 是老规范,要兼顾古董机子就加上它。
flexbox flex 是新规范,老机子不支持的

1.下面来属性对照俩者之间属性:

display:box; display:flex 说明
box-orient: horizontal | vertical | inherit flex-direction:row | column 该属性定义父元素的子元素是如何排列的。
box-direction:normal | reverse flex-direction:row-reverse | row-reverse 作用使改变子元素的排列顺序
box-pack: start | end | center | justify justify-content:flex-start | flex-end | center | space-between|space-around 该属性定义父元素的子元素是水平排列的
box-align: start | end | center | baseline | stretch align-items:flex-start | flex-end | center | baseline | stretch 该属性定义父元素的子元素是垂直排列的
box-flex:<number> flex:是flex-grow, flex-shrink 和 flex-basis的简写 该属性让子容器针对父容器的宽度按一定规则进行划分
box-ordinal-group:使用需加前缀 order:  <number>   子项目的排列顺序,数值越小排列越靠前
box-lines:已被淘汰 flex-wrap:nowrap | wrap | wrap-reverse 子项目在容器内的换行结果

此处有很多flex的属性尚未写到,可参考我的另一篇博文详解介绍了语法属性详解

tip:box属性基本上需加上不同的浏览器前缀方可正式使用

2.display:flex和display:box布局浏览器兼容性分析

可参考资料:https://www.cnblogs.com/walk-on-the-way/p/5997073.html

总的来说,不考虑IE浏览器的话,PC端上使用哪个都可以,一般使用display:flex;移动端的安卓的UC只支持display:box,iOS的UCdisplay:box和display:flex两个都支持。

在实际的测试中display:flex不能完全的替代display:box。display:flex的浏览器兼容性比较麻烦。

兼容性浏览器写法:

 .container{
    display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box; /* Firefox 17- */
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex; /* Firefox 18+ */
    display: -ms-flexbox; /* IE 10 */
    display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
}

网页布局——Box盒子的更多相关文章

  1. CSS网页布局:盒子模型

    一.盒子模型 标准盒子模型(W3C盒子) 不论是标准盒模型还是IE盒子模型,都有content.padding.border.margin四个部分组成,但从上图也可以看出W3C盒子和IE盒子主要区别在 ...

  2. [CSS属性设置,盒子模型,网页布局]

    [CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...

  3. 【css3网页布局】flex盒子模型

    1.0 前言 网页布局(layout)是CSS的一个重点应用. 经典布局类型: 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊 ...

  4. 在网页布局中合理使用inline formating context(IFC)

    引子:给大家出一个小小的考题,如何使用css来实现类似下面的在指定区域内,内容自适应的垂直居中.

  5. CSS布局(二) 盒子模型属性

    盒子模型的属性 宽高width/height 在CSS中,可以对任何块级元素设置显式高度. 如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效果,就好像有额外的内边距一样: 如果指定高度小于 ...

  6. Web开发系列【1】实用的网页布局(PC端)

    在熟悉那些常用的软件.工具后,我们正式开始开发,在前期准备工作之后,我们要做的事情是写页面,也就是网页布局.在w3c.菜鸟.慕课网等等网站上都有基础的 HTML+CSS 知识讲解,在初期学习中,跟着教 ...

  7. 《精通CSS网页布局》读书报告 ----2016-12-5补充

    第一章:CSS布局基础 1.CSS的精髓是布局,而不是样式哦!  (定要好好的研究布局哦,尤其配合html5) 2. html标签的语义性,要好好的看看哦! 3.DTD:文档类型定义. 4.内联--& ...

  8. PS网页设计教程XXVI——如何在PS中创建一个专业的网页布局

    作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...

  9. 一、HTML和CSS基础--网页布局--网页布局基础

    W3C标准: 由万维网联盟制定的一系列标准,包括: 结构化标准语言(HTML和XML) 表现标准语言(CSS) 行为标准语言(DOM和ECMAScript) 倡导结构.样式.行为分离. CSS 规定的 ...

随机推荐

  1. AOE工程实践-NCNN组件

    作者:杨科 NCNN是腾讯开源的一个为手机端极致优化的高性能神经网络前向计算框架.在AOE开源工程里,我们提供了NCNN组件,下面我们以SqueezeNet物体识别这个Sample为例,来讲一讲NCN ...

  2. 洛谷 P1980【计数问题】 题解(1)

    鉴于数据最高只有七位数,通过判断数位,逐位判断即可完成本题. (运行很快,打得手疼) //Stand up for the faith!#include<bits/stdc++.h> us ...

  3. python自学Day02(自学书籍python编程从入门到实践)

    第三章 列表简介 3.1 列表是什么 按特定顺序排列的元素组成. 元素类型可以是任意数据类型. 元素之间没有任何的关系. 在python中用中括号 [] 括起来并用 ,号隔开 3.1.1 访问列表元素 ...

  4. 如何将 JavaScript 代码添加到网页中,以及 <script> 标签的属性

    Hello, world! 本教程的这一部分内容是关于 JavaScript 语言本身的. 但是,我们需要一个工作环境来运行我们的脚本,由于本教程是在线的,所以浏览器是一个不错的选择.我们会尽可能少地 ...

  5. 【LeetCode】Two Sum II - Input array is sorted

    [Description] Given an array of integers that is already sorted in ascending order, find two numbers ...

  6. [1]尝试用Unity3d制作一个王者荣耀(持续更新)->AssetBundle管理器

    如果已经看过本章节:目录传送门:这是目录鸭~ 1.AssetBundleManager: 首先我们创建一个文件夹,叫AssetBundleManager,再创建Csharp(即C#)脚本,名为Asse ...

  7. 误删除系列一:linux的bin目录误删除后恢复操作

    感言:一失足成千古恨,一不小心就把/usr/bin下所有的命令都删除了,当你以为自己很熟练时,当你以为自己操作对时,可能就是失手的时候,还好这次只是一个测试环境....God 恢复过程:(以下是在vs ...

  8. windows安装mingw和LuaJIT

    1,安装mingw64 先下载mingw64压缩包(不建议下载exe安装包,在线安装太慢),地址如下: https://nchc.dl.sourceforge.net/project/mingw-w6 ...

  9. 过渡 - transition

    过渡 - transition 是变形transfrom其中一种效果,定义为一种状态过渡到另一种状态的过程,今天学习到css3动画,特此记录下过渡的使用和一些效果. 实例1: <div clas ...

  10. 使用CoordinatorLayout打造各种炫酷的效果

    使用CoordinatorLayout打造各种炫酷的效果 自定义Behavior -- 仿知乎,FloatActionButton隐藏与展示 NestedScrolling 机制深入解析 一步步带你读 ...