CSS3弹性盒模型开发笔记（一）
|
弹性盒模型（Flexible Box Moudle），该模型用于决定元素在盒子中的分布方式以及处理盒子的可用空间。这与XUL（Firefox浏览器的用户交互语言）相似，其他语言也使用相同的盒模型。如XAML，GladeXML等。通过弹性盒模型，可以轻松地创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。 兼容性：弹性盒模型规范是W3C标准化组织于2009年发布的，目前还没有主流浏览器对其进行支持，不过采用Webkit和Mozilla渲染引擎的浏览器都自定义了一套私有属性，用来支持弹性盒模型。 采用Webkit渲染引擎的浏览器主要包括Safari和Chrome浏览器，该引擎支持以-webkit为前缀的私有属性。 Mozilla渲染引擎的浏览器主要包括Firefox浏览器，该引擎支持以-moz为前缀的私有属性。 相关属性： box-align：定义子元素在盒子垂直方向上的空间分配方式 box-orient属性 该属性可用于定义盒子元素内部的流动布局方向.在使用弹性盒子模型时，需要先把父容器的display属性设置为box或者inline-box。 box-orient：horizontal | vertail | inline-axis | block-axis | inherit 取值简单说明： horizontal：盒子元素从左到右在一条水平线上显示它的子元素。 vertail：盒子元素从上到下在一条垂直线上显示它的子元素。 inline-axis：盒子元素沿着内联轴显示它的子元素。 block-axis：盒子元素沿着块轴显示它的子元素。 实战体验：设计多栏布局 html代码：
XML/HTML Code复制内容到剪贴板
<div id="box"> <div id="box0"><img src="images/web_01.gif" /></div> <div id="sub-box"> <div id="box1"><img src="images/web_02.gif" /></div> <div id="box2"><img src="images/web_03.gif" /></div> <div id="box3"><img src="images/web_04.gif" /></div> </div> </div>
CSS3代码：
CSS Code复制内容到剪贴板
<style type="text/css"> body{/*文档样式*/ margin:0;padding:0px;/*清除页边距*/ text-align:center;/*文档居中对齐*/ background:#170843; } #box{ margin:auto;/*文档居中对齐*/ text-align:center; width:975px; } /*定制各个栏目的宽度*/ #box1{width:185px;} #box2{width:601px;} #box3{width:189px;} /*定制子包含框的盒子显示，其包含的元素水平流动*/ #sub-box{ display:-moz-box; display:-webkit-box; display:box; box-orient:horizontal; -moz-box-orient:horizontal; -webkit-box-orient:horizontal; } </style> 演示效果：
box-direction属性 box-direction属性可以改变盒子元素中内部元素的流动顺序，该属性基本语法： box-direction：normal | reverse | inherit 取值简单说明： （编辑：焦作站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
