CSS3 display:box详解

最新推荐文章于 2021-08-03 20:23:24 发布
最新推荐文章于 2021-08-03 20:23:24 发布
阅读量445 收藏
点赞数
分类专栏： CSS

CSS3 display:box详解


display:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。

目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。

一、box-flex属性

box-flex主要让子容器针对父容器的宽度按一定规则进行划分

html代码：

<article>
    <section>01</section>
    <section>02</section>
    <section>03</section>
</article>

CSS代码：

.wrap{
    width:600px;
    height:200px;
    display:-moz-box;
    display:-webkit-box;
    display:box;
}
.sectionOne{
    background:orange;
    -moz-box-flex:3;
    -webkit-box-flex:3;
    box-flex:3;
}
.sectionTwo{
    background:purple;
    -moz-box-flex:2;
    -webkit-box-flex:2;
    box-flex:2;
}
.sectionThree{
    -moz-box-flex:1;
    -webkit-box-flex:1;
    box-flex:1;
    background:green;
}

展示效果：

说明：

必须给父容器wrap定义css属性display:box其子容器才可以进行划分(如果定了display:box则该容器则定义为了内联元素，使用margin:0px auto让其居中是无效的，要想使其居中只能通过它的父容器的text-align:center);分别给sectionOne、sectionTwo、sectionThree的box-flex设置了3、2、1，也就是说这三个子容器将父容器wrap的宽度600px分为6份，sectionOne占居父结构宽度的3/6即300px，sectionOne占居父结构宽度的2/6即200px，sectionThree占居父结构宽度的1/6即100px。

以上是按比例数进行划分分配的，如果其中一个子容器或多个子容器设置了固定宽度又会怎样划分那？

如果其中一个子容器或多个子容器设置了固定宽度，其它子容器没有设置，其计算方式是这样的：子容器如果设置了固定宽度值，该子容器则直接应用设置的宽度值，其它没有设置的则再父容器的宽度基础上减去子容器设置的固定宽度，在剩下的宽度基础上按一定比例进行划分分配。请看下面代码:

HTML代码：

<article>
    <section>01</section>
    <section>02</section>
    <section>03</section>
</article>

CSS代码：

.wrap{
    width:600px;
    height:200px;
    display:-moz-box;
    display:-webkit-box;
    display:box;
}
.sectionOne{
    background:orange;
    -moz-box-flex:3;
    -webkit-box-flex:3;
    box-flex:3;
}
.sectionTwo{
    background:purple;
    -moz-box-flex:1;
    -webkit-box-flex:1;
    box-flex:1;
}
.sectionThree{
    width:200px;//设置固定宽度
    background:green;
}

展示效果：

说明：

sectionThree设置了固定宽度为200px，父容器的宽度600px减去改子容器的200px还剩下400px，这400px宽度值则按box-flex设置的值进行划分，sectionOne占居3/4即300px,sectionTwo占居1/4即100px。

在以上代码的基础上给sectionTwo子容器添加margin:0px 50px使子容器之间产生一定的间隔其宽度又如何进行分配划分的那？接着看

CSS代码：

.wrap{
    width:600px;
    height:200px;
    display:-moz-box;
    display:-webkit-box;
    display:box;
}
.sectionOne{
    background:orange;
    -moz-box-flex:3;
    -webkit-box-flex:3;
    box-flex:3;
}
.sectionTwo{
    background:purple;
    -moz-box-flex:1;
    -webkit-box-flex:1;
    box-flex:1;
        margin:0px 50px;//添加margin属性
}
.sectionThree{
    width:200px;
    background:green;
}

展示效果：

说明：

父容器的宽度600px减去设置了子容器的200px基础上再减去100px(2×50)剩下300px，这300px宽度值则按box-flex设置的值进行划分，sectionOne占居3/4即225px,sectionTwo占居1/4即75px。

二、box属性

上面”css3弹性盒子模型之box-flex”将box-flex如何对父容器的宽度进行划分分配讲解完毕，下面在看一下父容器里面的box属性包括哪些box属性，具体属性如下代码所示：

box-orient | box-direction | box-align | box-pack | box-lines

1、box-orient

box-orient(orient译为排列更准确)用来确定父容器里子容器的排列方式，是水平还是垂直。可选属性如下所示：

horizontal | vertical | inline-axis | block-axis | inherit

horizontal、inline-axis说明：

给box设置horizontal或inline-axis属性其效果似乎表现一致，都可将子容器水平排列，具体两者有什么实质差别暂时还没有搞清楚。如果父容器选择horizontal或inline-axis属性对子容器进行水平排列，其是对父容器的宽度进行分配划分。此时如果父容器定义了高度值，其子容器的高度值设置则无效状态，所有子容器的高度等于父容器的高度值；如果父容器不设置高度值，其子容器的高度值才有效并且取最大高度值的子容器的高度。

HTML代码：

<article>
    <section>01</section>
    <section>02</section>
    <section>03</section>
</article>

CSS代码：

.wrap{
	width:600px;
	height:200px;
	display:-moz-box;
	display:-webkit-box;
	display:box;
	-moz-box-orient:horizontal;
	-webkit-box-orient:horizontal;
	box-orient:horizontal;//水平排列
}
.sectionOne{
	background:orange;
	-moz-box-flex:1;
	-webkit-box-flex:1;
	box-flex:1;
}
.sectionTwo{
	background:purple;
	-moz-box-flex:2;
	-webkit-box-flex:2;
	box-flex:2;
}
.sectionThree{
	width:100px;
	background:green;
}

展示效果：

vertical、block-axis说明：

给box设置vertical或block-axis属性(此属性是默认值)其效果似乎表现一致，都可将子容器垂直排列，具体两者有什么实质差别暂时还没有搞清楚。如果父容器选择vertical或block-axis属性对子容器进行垂直排列，其是对父容器的高度进行分配划分。此时如果父容器定义了宽度值，其子容器的宽度值设置则无效状态；如果父容器不设置宽度值，其子容器的宽度值才有效并且取最大宽度值的子容器的宽度。

HTML代码：

<article>
    <section>01</section>
    <section>02</section>
    <section>03</section>
</article>

CSS代码：

.wrap{
	width:600px;
	height:200px;
	display:-moz-box;
	display:-webkit-box;
	display:box;
	-moz-box-orient:vertical;
	-webkit-box-orient:vertical;
	box-orient:vertical;//垂直排列
}
.sectionOne{
	background:orange;
	-moz-box-flex:1;
	-webkit-box-flex:1;
	box-flex:1;
}
.sectionTwo{
	background:purple;
	-moz-box-flex:2;
	-webkit-box-flex:2;
	box-flex:2;
}
.sectionThree{
	height:100px;
	background:green;
}

展示效果：

inherit说明：

inherit属性则是让子容器继承父容器的相关属性。

2、box-direction

box-direction用来确定父容器里的子容器排列顺序，具体属性如下代码所示：

normal | reverse | inherit

normal是默认值

按照HTML文档里结构的先后顺序依次展示。如下代码，如果box-direction设置为normal，则结构依次展示sectionOne、sectionTwo、sectionThree.

HTML代码：

<article>
    <section>01</section>
    <section>02</section>
    <section>03</section>
</article>

CSS代码：

.wrap{
	width:600px;
	height:200px;
	display:-moz-box;
	display:-webkit-box;
	display:box;
	-moz-box-direction:normal;//设置mormal默认值
	-webkit-box-direction:normal;//设置mormal默认值
	box-direction:normal;//设置mormal默认值
}
.sectionOne{
	background:orange;
	-moz-box-flex:1;
	-webkit-box-flex:1;
	box-flex:1;
}
.sectionTwo{
	background:purple;
	-moz-box-flex:2;
	-webkit-box-flex:2;
	box-flex:2;
}
.sectionThree{
	width:100px;
	background:green;
}

展示效果：

reverse表示反转:

如上面所示设置nomal其结构的排列顺序为sectionOne、sectionTwo、sectionThree；如果设置reverse反转，其结构的排列顺序为sectionThree、sectionTwo、sectionOne.

HTML代码：

<article>
    <section>01</section>
    <section>02</section>
    <section>03</section>
</article>

CSS代码：

.wrap{
	width:600px;
	height:200px;
	display:-moz-box;
	display:-webkit-box;
	display:box;
	-moz-box-direction:reverse;//设置为反转
	-webkit-box-direction:reverse;//设置为反转
	box-direction:reverse;//设置为反转
}
.sectionOne{
	background:orange;
	-moz-box-flex:1;
	-webkit-box-flex:1;
	box-flex:1;
}
.sectionTwo{
	background:purple;
	-moz-box-flex:2;
	-webkit-box-flex:2;
	box-flex:2;
}
.sectionThree{
	width:100px;
	background:green;
}

展示效果：

3、box-align

box-align表示父容器里面子容器的垂直对齐方式，可选参数如下所示：

start | end | center | baseline | stretch

HTML代码：

<article>
<section>01</section>
    <section>02</section>
    <section>03</section>
</article>

CSS代码：

.wrap{
	width:600px;
	height:108px;
	display:-moz-box;
	display:-webkit-box;
	display:box;
	-moz-box-align:stretch;
	-webkit-box-align:stretch;
	-o-box-align:stretch;
	box-align:stretch;
}
.wrap section{
	height:80px;
}
.wrap .sectionOne{
	background:orange;
	-moz-box-flex:1;
	-webkit-box-flex:1;
	box-flex:1;
}
.wrap .sectionTwo{
	background:purple;
	-moz-box-flex:2;
	-webkit-box-flex:2;
	box-flex:2;
	height:108px;
}
.wrap .sectionThree{
	width:100px;
	background:green;
}

start

在box-align表示居顶对齐，如下图所示

end

在box-align表示居底对齐，如下图所示

center

在box-align表示居中对齐，如下图所示

stretch

在box-align表示拉伸，拉伸到与父容器等高

4、box-pack

box-pack表示父容器里面子容器的水平对齐方式，可选参数如下所示：

start | end | center | justify

HTML代码：

<article>
    <section>01</section>
    <section>02</section>
    <section>03</section>
</article>

CSS代码：

.wrap{
	width:600px;
	height:108px;
	border:1px solid red;
	display:-moz-box;
	display:-webkit-box;
	display:box;
	-moz-box-pack:end;
	-webkit-box-pack:end;
	-o-box-pack:end;
	box-pack:end;
}
.wrap section{
	width:100px;
}
.wrap .sectionOne{
	background:orange;
}
.wrap .sectionTwo{
	background:purple;
}
.wrap .sectionThree{
	background:green;
}

start

在box-pack表示水平居左对齐，如下图所示

end

在box-pack表示水平居右对齐，如下图所示

center

在box-pack表示水平居中对齐，如下图所示

justify

在box-pack表示水平等分父容器宽度（唯一遗憾的是，firefox与opera暂时不支持，只有safari、chrome支持）



转自：http://www.warting.com/web/201402/68557.html

ssisse
关注
专栏目录
详解css display:box 新属性
09-24
CSS的`display: box`属性是CSS3 Flexbox布局的一部分，它允许开发者更灵活地控制元素及其子元素的布局。这个属性在现代网页设计中已经被`display: flex`所取代，但理解`display: box`的工作原理可以帮助我们更好地...
一文掌握CSS 属性display:flow-root声明
11-20
【CSS属性`display:flow-root`详解】 在CSS布局中，`display:flow-root`是一个相对新的属性声明，它的引入为网页设计者提供了更精细的布局控制能力。这个属性最初可能由于兼容性问题而不被广泛使用，但随着浏览器对...
css3 display:box
li_shanshan_ok的专栏
03-30 723
display:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-web
css display:box 新属性
apl2015的博客
04-11 425
一、display:box; 　　在元素上设置该属性，可使其子代排列在同一水平上，类似display:inline-block;。 二、可在其子代设置如下属性 　　前提：使用如下属性，必须在父代设置display:box; 　　1.box-flex:number; 　　　　1）占父级元素宽度的number份 　　　　2）若子元素设置固定宽度，则该子元素应用固定宽度，其他未设置...
CSS3盒模型-display:box
weixin_30760895的博客
10-28 165
display:box;是css3新添加的盒子模型属性，经典的布局应用就是布局的垂直等高、水平均分、按比例划分。 目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。 一、box-flex属性 1.水平等宽盒子 代码： ...
display:box;
tangxiong0927的博客
09-18 833
记得要设置父节点的width CSS3.0盒模型display:-webkit-box;的使用   分类： 前端开发 |  标签：display:-webkit-box;  |举报|字号 订阅 box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典   的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 目前box-flex属
CSS3盒模型display:box详解
weixin_30599769的博客
04-10 166
display:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（...
CSS3网格布局：display:grid详解与示例
"这篇资源主要介绍了CSS3中的`display: grid`网格布局，以及与之相关的概念和属性。" 在CSS3中，`display: grid`是一个强大的布局工具，允许开发者将网页设计成二维的网格系统，从而实现更加灵活和复杂的页面布局。...
CSS3 display知识详解
09-24
7. run-in、box、inline-box：这些值属于CSS3，它们允许元素根据上下文来决定显示类型，从而提供更灵活的布局选项。 8. flexbox、inline-flexbox、flex、inline-flex：这些值属于CSS3弹性盒模型，它们使元素能够...
display：box 属性
慕白博客
07-22 2266
一、作用 在元素上设置该属性，可使其子代排列在同一水平上，类似 display:inlineblock;。 目前 box-flex 属性还没有得到 firefox、 Opera、 chrome 浏览器的完全支 持 ， 但 可 以 使 用 它 们 的 私 有 属 性 定 义 firefox(-moz-) 、 opera(-o-) 、 chrome/safari（-webkit-)。 二...
css3.0box,CSS3.0盒模型display: box;详解
weixin_33286064的博客
08-03 264
二、box属性以上将box-flex如何对父容器的宽度进行划分分配讲解完毕，下面在看一下父容器里面的box属性包括哪些。box属性如下所示box-orient, box-direction, box-align, box-pack, box-lines1、box-orientbox-orient(orient译为排列更准确)用来确定父容器里子容器的排列方式，是水平还是垂直。可选属性如下所示：hor...
CSS3 display:box 用法
ForeverCjl的专栏
05-12 2321
CSS3 display:box 用法css3 给display属性带来了box这个值，这个新值给开发带来了极大的方便。其中的一个场景如下：<div id='outer'> <div id='a1'></div> <div id='a2'></div> <div id='a3'></div> </div>假如我们想要使得内部的123元素水平以不同的比例分割outer所占的空间
内容溢出省略显示
A_TANG
05-28 177
<style> /* 单行文字末尾省略号显示 */ .div1{ height: 100px; width:100px; background:green; text-overflow: ellipsis; /* ellipsis:显示省略符号来代表被修剪的文本 string:使用给定的字符串来代表被修剪的文本*/.
display:box 和 display:flex
ribavnu的专栏
06-14 602
出处：https://segmentfault.com/q/1010000003497333 只是flex语法规范更新了几个版本: 前者display:box是2009年的语法版本，使用时需要加上浏览器的前缀，不过现在已经过时了。 后者display:flex是2012年最新修正的语法版本，浏览器支持较好，也将成为以后标准的语法。 中间2011年也提出了一个
CSS3中的display: box
u013742084的专栏
06-08 698
今天看源码时，看到了display: -webkit-box;display: box; 似乎是第一次见， 上网搜寻： display: box;的声明其实就是弹性盒子模型的声明，此声明下的子元素的行为与表现与CSS2中的传统盒子模型的表现是有显著的差异的。 毕竟属于CSS3的东西，目前而言，仅Firefox/Chrome/Safari浏览器支持弹性盒子模型（IE9不详，Opera尚
CSS3盒模型display:box简述
weixin_30681121的博客
05-04 74
display:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 box-flex属性box-flex主要让子容器针对父容器的宽度按一定规则进行划分 必须给父容器wrap定义css属性display:box其子容器才可以进行划分(如果定了display:box则该容器则...
CSS Display属性与盒模型
分享技术，共建开放平台
08-11 1952
因为HTML流式文档的特性，页面布局往往是新手最为头疼的问题之一。 每个HTML元素都会渲染为一个Box，可分为inline Box和block Box。 根据display属性的不同，Box的呈现方式又有所不同。 本文首先引入CSS盒模型，然后通过不同的display属性分别介绍Box常见的呈现方式。 Box Sizing：元素大小的计算方式 在HTML中，任何HTML元素都会被
【详解CSS3盒模型display:box】
sinat_35467715的博客
04-01 509
【详解CSS3盒模型display:box】 一、box-flex属性(2):如果其中一个子容器或多个子容器设置了固定宽度，其它子容器没有设置，其计算方式是这样的：子容器如果设置了固定宽度值，该子容器则直接应用设置的宽度值，其它没有设置的则再父容器的宽度基础上减去子容器设置的固定宽度，在剩下的宽度基础上按一定比例进行划分分配详解CSS3盒模型display:box详解CSS3盒模型display
display:box布局的详细介绍（图解）
热门推荐
AliceWu的博客
08-01 2万+
使用display:-webkit-box布局很久了，但是每次使用的时候都是现用现查，而且发现网上没有找到一篇非常全面的关于此布局的介绍，今天决定写一篇博客来记录这个自适应布局。 1、首先不同的浏览器要做不同的兼容：目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz)、opera(-0)、chrome/...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值