CSS3中的弹性流体盒模型技术详解
先回顾一下CSS1 和 CSS2中都已经定义了哪些布局方面的属性，这样也会增加我们理解弹性布局。
其实我们现在有很多一部分人，你们刚刚接触CSS层叠样式表，或者接触有一段时间了，但是却没有很好的去消化与理解。可能平时你们还一直在使用table，然后通过不断了合并单元格来实现网页布局。希望我今天的这篇文章能彻底改变大家的观念。
A：大家可以想一想，在现实生活中，如果我们拿一个盒子来装东西，那么盒子里面的东西是不是跟这个盒子之间会有空隙呢？站在里面物品的角度，则它们之间的间隙距离是不是就可以构成 物品到盒子的外边距。如果站在盒子的角度，则从盒子到物品的距离，是不是可以看出盒子的内边距呢。 当然，盒子还是会有宽和高的。外边距的英文就是margin，内边距的英文是padding，宽是width，高是height。下面是盒子模型的2D图：
CSS 1中定义了盒子模型的基本元素，详细属性请看下表：
| margin-top | 元素顶部外边距 |
| margin-right | 元素右侧外边距 |
| margin-bottom | 元素底部外边距 |
| margin-left | 元素左侧外边距 |
| margin | 这是一个复合属性，定义 元素 各个边的外边距， 属性值的顺序是: 上，右，下，左 |
| border-top | 元素上边框样式 |
| border-right | 元素右边框样式 |
| border-bottom | 元素下边框样式 |
| border-left | 元素左边框样式 |
| border-width | 元素边框宽度 |
| border-top-width | 元素上边框宽度 |
| border-right-width | 元素右边框宽度 |
| border-bottom-width | 元素下边框宽度 |
| border-left-width | 元素左边框宽度 |
| border | 复合属性，可以同时设置各个边框样式 |
| padding-top | 元素上侧内边距 |
| padding-right | 元素右侧内边距 |
| padding-bottom | 元素下侧内边距 |
| padding-left | 元素左侧内边距 |
| padding | 复合属性，同时设置各个边框内边距 |
| width | 设置元素的宽度 |
| height | 设置元素的高度 |
| float | 设置元素浮动显示 |
| clear | 清除元素的浮动效果 |
| border-color | 设置边框颜色 |
| border-style | 设置边框样式 |
CSS 2在以上基础上，又做了一些细化：
| border-top-color | 元素上边框颜色 |
| border-right-color | 元素右边框颜色 |
| border-bottom-color | 元素下边框颜色 |
| border-left-color | 元素左边框颜色 |
| border-top-style | 元素上边框样式 |
| border-right-style | 元素右边框样式 |
| border-bottom-style | 元素下边框样式 |
| border-left-style | 元素左边框样式 |
在CSS2的基础上，CSS3增加了弹性盒模型布局属性，这为我们开发适合现代移动浏览器提供了便利：
| box-align | 子元素在盒子内垂直方向上的空间分配 |
| box-pack | 子元素在盒子内水平方向的空间分配方式 |
| box-direction | 盒子的显示顺序 |
| box-flex | 元素在盒子内的自适应尺寸 |
| box-flex-group | 自适应子元素群组 |
| box-lines | 子元素分列显示 |
| box-ordinal-group | 子元素在盒子内的显示位置 |
| box-orient | 盒子分布的坐标轴 |
下面我将对CSS3中新增的弹性盒模型属性做详细介绍，并通过实际coding来带领大家深刻认识弹性布局的威力。
首先我们先创建一个html页面，代码如下所示：
|
<!DOCTYPE html>
|
接着我们给页面添加上基本的样式，如下所示：
|
*{ /*清除所有元素的默认外边距和内边距*/
margin:0;
padding:0;
}
.row{/*设置外围容器样式*/
margin:auto;
border:1px solid black;
width:600px;
height:400px;
margin-top:50px;
}
.sidebar{/*给侧边栏添加样式*/
}
.middle{/*给中间区域添加样式*/
}
.article{/*给主体内容添加样式*/
}
|
运行页面，查看一下目前样式的应用效果:
首先声明：要想运用CSS3的弹性布局，需要将父容器设置为display:box 或 display:inline-box，下面不在赘述。
box-orient 作用： box-orient属性规定了子元素应该是水平方向还是垂直方向显示。
box-orient 语法： box-orient: horizontal | vertical | inline-axis | block-axis | inherit;
语法解释: horizontal 和 inline-axis 规定了子元素以水平方向显示，两者的显示效果差不多，具体差异不清。vertical 和 block-axis 规定了子元素以垂直方向显示， 两者的显示效果差不多，具体差异不清 。
注意：由于此属性还处于测试当中，所以为了兼容webkit核心的浏览器，需要加上-webkit-前缀，Mozilla核心的浏览器，需要加上前缀-moz-。
示例：
修改样式表文件，添加如下样式代码：
|
.row{/*设置外围容器样式*/
margin:auto;
border:1px solid black;
width:600px;
height:400px;
margin-top:50px;
display:-webkit-box;/*兼容webkit或mozilla核心浏览器，启用弹性盒子模型*/
display:-moz-box;
display:box;
-webkit-box-orient:horizontal;/*水平方向显示，兼容webkit和mozilla核心浏览器*/
-moz-box-orient:horizontal;
box-orient:horizontal;
}
|
运行demo页面，效果如下：
通过以上效果图，大家可以发现div已经变成了水平布局，且宽度是正好包裹内容， css2.1如果需要实现此效果，就得通过float:left;来实现了。
我们再次修改代码，实现垂直方向上布局：
|
.row{/*设置外围容器样式*/
margin:auto;
border:1px solid black;
width:600px;
height:400px;
margin-top:50px;
display:-webkit-box;/*兼容webkit或mozilla核心浏览器，启用弹性盒子模型*/
display:-moz-box;
display:box;
-webkit-box-orient:vertical;/*垂直方向显示，兼容webkit和mozilla核心浏览器*/
-moz-box-orient:vertical;
box-orient:vertical;
}
|
运行页面，效果如下图所示:
inline-axis 和 block-axis 运行效果分别与horizontal和vertical一样，这里大家可以自行去测试。
inherit属性值是布局方式继承自父元素，如果父元素是水平的，则它也使用水平布局，这个大家可以自行去测试。
box-align 作用：box-align规定了如何在垂直方向上对齐框内的子元素。
box-align 语法：box-align: start | end | center | baseline | stretch;
| start |
对于正常方向的框，每个子元素的上边缘沿着框的顶部放置。
对于反方向的框，每个子元素的下边缘沿着框的底部放置。
|
| end |
对于正常方向的框，每个子元素的下边缘沿着框的底部放置。
对于反方向的框，每个子元素的上边缘沿着矿的顶部放置。
|
| center | 均等地分割多余的空间，一半位于子元素之上，一半位于子元素之下。 |
| baseline | 如果box-orient是inline-axis或horizontal，所有子元素均与其基线对齐。 |
| stretch | 拉伸子元素以填充包含块 |
注意：由于此属性还处于测试当中，所以为了兼容webkit核心的浏览器，需要加上-webkit-前缀，Mozilla核心的浏览器，需要加上前缀-moz-。
示例:
添加start样式，代码如下:
|
.row{/*设置外围容器样式*/
margin:auto;
border:1px solid black;
width:600px;
height:400px;
margin-top:50px;
display:-webkit-box;/*兼容webkit或mozilla核心浏览器，启用弹性盒子模型*/
display:-moz-box;
display:box;
-webkit-box-orient:horizontal;/*水平方向显示，兼容webkit和mozilla核心浏览器*/
-moz-box-orient:horizontal;
box-orient:horizontal;
-webkit-box-align:start;/*正常布局下，吸附在顶端显示，相反布局下，吸附在底部显示*/
-moz-box-align:start;
box-align:start;
}
|
运行效果如下所示：
接着，我们让子元素吸附在底部显示，修改代码如下：
|
.row{/*设置外围容器样式*/
margin:auto;
border:1px solid black;
width:600px;
height:400px;
margin-top:50px;
display:-webkit-box;/*兼容webkit或mozilla核心浏览器，启用弹性盒子模型*/
display:-moz-box;
display:box;
-webkit-box-orient:horizontal;/*水平方向显示，兼容webkit和mozilla核心浏览器*/
-moz-box-orient:horizontal;
box-orient:horizontal;
-webkit-box-align:end;/*正常布局下，吸附在底部显示，相反布局下，吸附在顶部显示*/
-moz-box-align:end;
box-align:end;
}
|
此时的运行效果如下所示：
center和baseline的功能，大家可以自行测试，这里着重强调一下，如果属性值设为stretch，则它会拉伸填充满父元素，其实也就是未设置box-align时候的样式，所以说如果你要设置stretch，那你直接就别设置box-align属性，因为没意义了。
修改属性值为stretch，代码如下：
|
.row{/*设置外围容器样式*/
margin:auto;
border:1px solid black;
width:600px;
height:400px;
margin-top:50px;
display:-webkit-box;/*兼容webkit或mozilla核心浏览器，启用弹性盒子模型*/
display:-moz-box;
display:box;
-webkit-box-orient:horizontal;/*水平方向显示，兼容webkit和mozilla核心浏览器*/
-moz-box-orient:horizontal;
box-orient:horizontal;
-webkit-box-align:stretch;/*其实此效果就是不设置box-align时候的样式*/
-moz-box-align:stretch;
box-align:stretch;
}
|
效果如下：
box-pack 作用：用来规定子元素在盒子内的水平空间分配方式
box-pack 语法：box-pack: start | end | center | justify;
| start |
对于正常方向的框，首个子元素的左边缘吸附在盒子的左边框显示
对于相反方向的框，最后子元素的右边缘吸附在盒子的右边框显示
|
| end |
对于正常方向的框，最后子元素的右边缘吸附在盒子的右边框显示
对于相反方向的框，首个子元素的左边缘吸附在盒子的左边框显示
|
| center | 均等分割剩余空间，一半在首个子元素之前，一半在最后子元素之后 |
| justify | 首尾子元素分别吸附在左右边框上，中间的子元素分割多余空间 |
注意：由于此属性还处于测试当中，所以为了兼容webkit核心的浏览器，需要加上-webkit-前缀，Mozilla核心的浏览器，需要加上前缀-moz-。
示例:
box-pack:start;
运行效果如下：
当然，如果盒子的顺序是从右到做，则上图就会吸附在右侧边框显示。
box-pack:end;
运行效果如下：
注：如果盒子内的显示顺序是相反方向，则它会吸附在左侧边框显示。
box-pack:center
|
.row{/*设置外围容器样式*/
margin:auto;
border:1px solid black;
width:600px;
height:400px;
margin-top:50px;
display:-webkit-box;/*兼容webkit或mozilla核心浏览器，启用弹性盒子模型*/
display:-moz-box;
display:box;
-webkit-box-orient:horizontal;/*水平方向显示，兼容webkit和mozilla核心浏览器*/
-moz-box-orient:horizontal;
box-orient:horizontal;
-webkit-box-align:center; /*在垂直方向上，居中显示*/
-moz-box-align:center;
box-align:center;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
}
|
运行效果如下：
box-pack:justify
运行效果如下:
box-direction 作用：box-direction规定了盒子内子元素以什么方向来排列。
box-direction 语法：box-direction: normal | reverse | inherit;
| normal | 以默认方式显示子元素 |
| reverse | 以相反方向显示子元素 |
| inherit | 从父容器继承box-direction |
注意：由于此属性还处于测试当中，所以为了兼容webkit核心的浏览器，需要加上-webkit-前缀，Mozilla核心的浏览器，需要加上前缀-moz-。
示例：
现在我就基于上面的例子，在样式表文件的 .row 里加上box-direction属性，大家一起观察分别观察它们的区别
| 以水平方向显示子元素 box-orient:horizontal; | ||||||||
|
| 以垂直方向显示子元素 box-orient: vertical; | ||||||||
|
从上面的比较，大家可以看出，box-direction是根据当前子元素的显示方向（水平或垂直）来起作用的。
box-direction:inherit 这个大家可以私下自行测试。
box-flex 作用：box-flex属性规定了盒子内的子元素是否可以自动伸缩其尺寸，只要盒子内对应显示方向上有剩余空间，可伸缩元素就会扩展来填充这些空间。
box-flex 语法：box-flex: value。
| value | 元素的可伸缩值，柔性是相对，例如 box-flex:2.0 的子元素伸缩尺寸两倍于 box-flex:1.0的子元素 |
注意：由于此属性还处于测试当中，所以为了兼容webkit核心的浏览器，需要加上-webkit-前缀，Mozilla核心的浏览器，需要加上前缀-moz-。
示例：
现在我们就来对box-flex的作用通过示例来证明一下：
| 对 sidebar 应用样式 |
.sidebar{/*给侧边栏添加样式*/
/*将应用了此样式的元素都设置为可伸缩元素*/
-webkit-box-flex:1.0;
-moz-box-flex:1.0;
box-flex:1.0;
}
.middle{/*给中间区域添加样式*/
}
.article{/*给主体内容添加样式*/
}
|
 |
从显示效果来看， 这正好证明了， 设置了box-flex的元素是有弹性的，
且只要盒子内对应显示方向上有剩余空间， 可伸缩元素就会扩展来填充这些空间。
|
| 对sidebar和middle应用样式 |
.sidebar{/*给侧边栏添加样式*/
/*将应用了此样式的元素都设置为可伸缩元素*/
-webkit-box-flex:1.0;
-moz-box-flex:1.0;
box-flex:1.0;
}
.middle{/*给中间区域添加样式*/
/*将应用了此样式的元素都设置为可伸缩元素*/
-webkit-box-flex:2.0;
-moz-box-flex:2.0;
box-flex:2.0;
}
.article{/*给主体内容添加样式*/
}
|
 |
从显示效果可以看出，当 .middle 样式设置了box-flex:2.0时，
应用了 .middle 样式的元素也变成了弹性元素，且伸缩尺寸是
box-flex:1.0的两倍。
|
| 对sidebar,middle和article应用样式 |
.sidebar{/*给侧边栏添加样式*/
-webkit-box-flex: 1.0;
-moz-box-flex:1.0;
box-flex:1.0;
}
.middle{/*给中间区域添加样式*/
-webkit-box-flex:2.0;
-moz-box-flex:2.0;
box-flex:2.0;
}
.article{/*给主体内容添加样式*/
-webkit-box-flex:3.0;
-moz-box-flex:3.0;
box-flex:3.0;
}
|
 |
这里大家得注意一下，大家可能会认为，.article应该占1/2的空间的，
怎么看.sidebar和.middle加起来都比.article大的啊
其实这里分配的原则是， 剩余空间按照对应比率来分配。
对sidebar来说，伸缩的空间 = 总剩余空间 *(1.0/6.0)；
对middle来说，伸缩的空间 = 总剩余空间*(2.0/6.0) ;
对article来说，伸缩的空间 = 总剩余空间 * (3.0/6.0);
|
box-flex-group 作用： 一组设置了box-flex-group元素当中，值最小的，占用全部剩余空间；值最小且相等，则平均分配剩余空间。
|
.sidebar{/*给侧边栏添加样式*/
-webkit-box-flex:1.0;
-moz-box-flex:1.0;
box-flex:1.0;
-webkit-box-flex-group:1;
-moz-box-flex-group:1;
box-flex-group:1;
}
.middle{/*给中间区域添加样式*/
-webkit-box-flex:2.0;
-moz-box-flex:2.0;
box-flex:2.0;
-webkit-box-flex-group:2;
-moz-box-flex-group:2;
box-flex-group:2;
}
.article{/*给主体内容添加样式*/
-webkit-box-flex:2.0;
-moz-box-flex:2.0;
box-flex:2.0;
-webkit-box-flex-group:1;
-moz-box-flex-group:1;
box-flex-group:1;
}
|
 |
大家从效果图应该可以看出， 如果box-flex-group的值较大，则它只分配实际空间，
剩余空间分配给最小的一组 按比率分配。
这句话到底啥意思呢？
我们从代码中可以看到：sidebar的box-flex-group为1，article的box-flex-group也为1，
所以 sidebar和article分配剩余的空间。 但是article的box-flex两倍于sidebar的box-flex，
所以剩余空间，article伸缩的空间 应该是 sidebar伸缩空间的两倍。
|
box-ordinal-group 作用：box-ordinal-group属性可以使我们定义子元素的显示顺序，值小的排在前，值大的排在后。
注意：由于此属性还处于测试当中，所以为了兼容webkit核心的浏览器，需要加上-webkit-前缀，Mozilla核心的浏览器，需要加上前缀-moz-。
示例：
我们先看一下，没有运用box-ordinal-group属性时的运行效果，样式代码如下：
|
.sidebar{/*给侧边栏添加样式*/
-webkit-box-flex:2.0;
-moz-box-flex:2.0;
box-flex:2.0;
}
.middle{/*给中间区域添加样式*/
-webkit-box-flex:2.0;
-moz-box-flex:2.0;
box-flex:2.0;
}
.article{/*给主体内容添加样式*/
-webkit-box-flex:2.0;
-moz-box-flex:2.0;
box-flex:2.0;
}
|
此时运行页面，效果如下：
根据上面页面，当前的显示顺序是 sidebar -> middle -> article
现在我们给这些子元素应用box-ordinal-group，且相应值 middle < article < sidebar，则我们期待的显示顺序应该是， middle -> article -> sidebar
样式代码如下：
|
.sidebar{/*给侧边栏添加样式*/
-webkit-box-flex:2.0;
-moz-box-flex:2.0;
box-flex:2.0;
-webkit-box-ordinal-group:4;
-moz-box-ordinal-group:4;
box-ordinal-group:4;
}
.middle{/*给中间区域添加样式*/
-webkit-box-flex:2.0;
-moz-box-flex:2.0;
box-flex:2.0;
-webkit-box-ordinal-group:2;
-moz-box-ordinal-group:2;
box-ordinal-group:2;
}
.article{/*给主体内容添加样式*/
-webkit-box-flex:2.0;
-moz-box-flex:2.0;
box-flex:2.0;
-webkit-box-ordinal-group:3;
-moz-box-ordinal-group:3;
box-ordinal-group:3;
}
|
运行页面，效果如下：
从效果图来看，的确是按照我们所期待的顺序显示的（ middle -> article -> sidebar）。
至此，CSS3新增弹性盒模型属性就讲完了，本节内容还是比较多的，但是它给了我们很多惊喜，让我们在页面布局方面更加收放自如。
CSS3中的弹性流体盒模型技术详解的更多相关文章
- Css盒模型属性详解（margin和padding）
Css盒模型属性详解(margin和padding) 大家好,我是逆战班的一名学员,今天我来给大家分享一下关于盒模型的知识! 关于盒模型的属性详解及用法 盒模型基本属性有两个:padding和marg ...
- CSS3中-webkit-overflow-scrolling: touch 的使用方法详解
-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止. touch 使用具有回弹效果的滚 ...
- css3中的多列布局columns详解
columns语法:columns:[ column-width ] || [ column-count ]设置或检索对象的列数和每列的宽度 其中:[ column-width ]:设置或检索对象每列 ...
- 关于ie中实现弹性盒模型-我的css
css3中的弹性盒模型大家都不陌生,但是能否在ie6中实现呢?第三方库中涉及到的页少之又少,也有一部分css框架中支持各种布局,下面给出我用的盒模型样式(为了以后copy方便而已): /******* ...
- 「视频直播技术详解」系列之七：直播云 SDK 性能测试模型
关于直播的技术文章不少,成体系的不多.我们将用七篇文章,更系统化地介绍当下大热的视频直播各环节的关键技术,帮助视频直播创业者们更全面.深入地了解视频直播技术,更好地技术选型. 本系列文章大纲如下: ...
- css3中动画(transition)和过渡(animation)详析
css3中动画(transition)和过渡(animation)详析
- 转：LoadRunner中参数化技术详解
LoadRunner中参数化技术详解 LoadRunner在录制脚本的时候,只是忠实的记录了所有从客户端发送到服务器的数据,而在进行性能测试的时候,为了更接近真实的模拟现实应用,对于某些信息需要每次提 ...
- P2P技术详解(二)：P2P中的NAT穿越(打洞)方案详解
1.内容概述 P2P即点对点通信,或称为对等联网,与传统的服务器客户端模式(如下图"P2P结构模型"所示)有着明显的区别,在即时通讯方案中应用广泛(比如IM应用中的实时音视频通信. ...
- CSS3图片翻转动画技术详解
CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...
随机推荐
- iOS Get方式带中文不能请求网络
今天发现一个蛋疼的问题,使用ASIHTTPRequest Get方式请求数据时候带中文,iOS客户端不能正确进行网络请求. NSURL *url = [NSURL URLWithString:@htt ...
- Java程序员面试题集（86-115）
摘 要:下面的内容包括Struts 2和Hibernate的常见面试题,虽然Struts 2在2013年6月曝出高危漏洞后已经显得江河日下,而Spring MVC的异军突起更加加速了Struts 2的 ...
- More is better(并差集)
More is better Time Limit : 5000/1000ms (Java/Other) Memory Limit : 327680/102400K (Java/Other) To ...
- swift通过摄像头读取每一帧的图片，并且做识别做人脸识别
最近帮别人做一个项目,主要是使用摄像头做人脸识别 github地址:https://github.com/qugang/AVCaptureVideoTemplate 要使用IOS的摄像头,需要使用AV ...
- Ubuntu14.04搭建安装svnserver
前两天,公司准备搭建一个svnserver,供大家使用.于是.就先装了一个Ubuntu系统,然后搭建了svnserver的环境.以下把svn搭建的详细过程描写叙述下: 1.安装svn sudo apt ...
- Oracle DBlink的创建-查看与删除
DBlink常用于在两个Oracle数据库之间相互连接,如手工同步数据时,DBLink是最方便快捷的手段之一. 1.创建DBLink语法:create public database link < ...
- 被「李笑来老师」拉黑之「JavaScript微博自动转发的脚本」
故事的背景如下图,李笑来 老师于10月19日在 知乎Live 开设 一小时建立终生受用的阅读操作系统 的讲座,他老人家看到大家伙报名踊跃,便在微博上发起了一个 猜数量赢取iPhone7 的活动. 因为 ...
- 自学HTML的几个例子
此处不赘述HTML中不同标签的用法仅仅给出自己学习时写的一些自娱自乐的例子,具体标签用法请参考W3C(http://www.w3school.com.cn/),毕竟这个才是最靠谱的,请不要相信任何二道 ...
- 找出数组中特定和数字下标（JAVA）
比如: 输入: numbers={2, 7, 11, 15}, target=9 输出: index1=1, index2=2 public class _003TwoSum { public sta ...
- java 简单的文件上传
一.文件上传原理: 1.文件上传的前提: a.form表单的method必须是post b.form表单的enctype必须是multipart/form-data(决定了POST请求方式,请求正文的 ...