CSS3盒模型display:box详解

时间:2022-12-11 14:20:13

display:box;box-flexcss3新添加的盒子模型属性,它的出现可以解决们通过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;
}

展示效果:
CSS3盒模型display:box详解
说明:
必须给父容器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;
}

展示效果:
CSS3盒模型display:box详解
说明:
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;
}

展示效果:
CSS3盒模型display:box详解
说明:
父容器的宽度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;
}

展示效果:
CSS3盒模型display:box详解
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;
}

展示效果:
CSS3盒模型display:box详解
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;
}

展示效果:
CSS3盒模型display:box详解
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;
}

展示效果:
CSS3盒模型display:box详解
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表示居顶对齐,如下图所示
CSS3盒模型display:box详解
end
在box-align表示居底对齐,如下图所示
CSS3盒模型display:box详解
center
在box-align表示居中对齐,如下图所示
CSS3盒模型display:box详解
stretch
在box-align表示拉伸,拉伸到与父容器等高
CSS3盒模型display:box详解
3、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表示水平居左对齐,如下图所示
CSS3盒模型display:box详解
end
在box-pack表示水平居右对齐,如下图所示
CSS3盒模型display:box详解
center
在box-pack表示水平居中对齐,如下图所示
CSS3盒模型display:box详解
justify
在box-pack表示水平等分父容器宽度(唯一遗憾的是,firefox与opera暂时不支持,只有safari、chrome支持)
CSS3盒模型display:box详解

转载自WEB前端开发(www.css119.com)-关注常见的WEB前端开发问题、最新的WEB前端开发技术(webApp开发、移动网站开发)、最好的WEB前端开发工具和最全的WEB前端开发w3cschool手册

本文链接地址: WEB前端开发(www.css119.com)–CSS3盒模型display:box详解

CSS3盒模型display:box详解的更多相关文章

  1. &lbrack;转&rsqb;CSS3盒模型display&colon;box详解

    时间:2014-02-25来源:网络作者:未知编辑:RGB display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布 ...

  2. CSS3盒模型display&colon;box&semi;box-flex&colon;3&semi;

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  3. CSS3盒模型display&colon;box简述

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

  4. CSS3&period;0盒模型display&colon;box&semi;的使用

    CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂 ...

  5. 转&colon; css3&colon; display&colon;box详解

    示例见:  css3: flexbox (BTW: blog不能包含iframe script真不方便啊~~) display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决 ...

  6. CSS3弹性盒模型 display&colon;box

    刚开始做网页时就有一个困惑,为什么display:block只能垂直排列,如果要水平排列就要使用float:left等方式.这种方法最难受的当然是当子元素的数量改变时,需要去修改子元素的宽度使重新适应 ...

  7. CSS3盒模型display初探(display&colon;box&sol;display&colon;flex)

    可以实现水平等分切割等.日后在研究,做个记录. 首先要声明:display:box,像谷歌浏览器要加前缀识别码:display:-webkit-box; 然后才开始使用其属性,同时也是要带上前缀识别码 ...

  8. 弹性盒布局display&colon;flex详解

    一:弹性盒子 随着响应式设计的流行,网站开发者在设计网页布局时往往要考虑到页面在适配不同分辨率的浏览器时其内部组件位置大小都会产生变化,因此需要设计者根据窗口尺寸来调整布局,从而改变组件的尺寸和位置, ...

  9. CSS3盒模型display&colon;-webkit-box&semi;的使用

    box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box-flex属性还没有得到 ...

随机推荐

  1. Bittorrent Protocol Specification v1&period;0 中文

    翻译:小马哥 日期:2004-5-22 BitTorrent 是一种分发文件的协议.它通过URL来识别内容,并且可以无缝的和web进行交互.它基于HTTP协议,它的优势是:如果有多个下载者并发的下载同 ...

  2. 最喜欢的算法(们) - Levenshtein distance

    String Matching: Levenshtein distance Purpose: to use as little effort to convert one string into th ...

  3. 接触Matlab10年后的一个总结,随时使用Matlab要掌握的一些要点

    不记得上一次写超过20行的matlab程序是什么时候了,大概是2013年吧,那个时候写过2篇文章,实际用到了 一些matlab的内容,超过200行的matlab程序应该要追溯到2011年了,最近为了帮 ...

  4. CSS background 属性

    CSS 参考手册 实例 如何在一个声明中设置所有背景属性: body { background: #00FF00 url(bgimage.gif) no-repeat fixed top; } 亲自试 ...

  5. &OpenCurlyDoubleQuote;我爱淘”冲刺阶段Scrum站立会议10

    完成任务: 完成了webservice的配置与测试,可以将数据库中的内容解析出来. 计划任务: 在客户端通过查询可以得到想要的书籍内容. 遇到问题: 客户端的内容获取还没有实现.

  6. ajax相关体会

    参考原文: 例子:http://blog.csdn.net/beijiguangyong/article/details/7725596 原理讲解:http://www.cnblogs.com/min ...

  7. 拖拽加点ui吧

    有一段时间没写东西了,真的是静下心来不容易的事情. 把之前的代码再翻看下,想想要加点ui什么的. 2d  塔防ui之前 我看过,但放到3d上做,其实难度是很大的. 不过,这不算什么,关键是 合理的 布 ...

  8. &lbrack;Swift&rsqb;LeetCode401&period; 二进制手表 &vert; Binary Watch

    A binary watch has 4 LEDs on the top which represent the hours (0-11), and the 6 LEDs on the bottom ...

  9. 我的第一个python web开发框架(35)——权限数据库结构设计

    接下来要做的是权限系统的数据库结构设计,在上一章我们了解了权限系统是通过什么来管理好权限的,我们选用其中比较常用的权限系统来实现当前项目管理要求. 下面是我们选择的权限系统关系模型: 从以上关系可以看 ...

  10. Python-基础函数与常用模块考核

    第二模块考核(2019/ 03/ 03) ### 第一模块内容1.请写出 “路飞学城alex” 分别用utf - 8和gbk编码所占的位数(口述) ➜ ~ python3 >>> b ...