web前端|html教程
CSS盒子模型之CSS3可伸缩框属性（Flexible Box）
web前端-html教程
CSS盒子模型(下)
熊猫增加视频版本源码下载,Ubuntu内核更新命令,爬虫淘宝商品列表,php 转义 %,seo创业思路lzw
一．CSS3可伸缩框（Flexible Box）
可伸缩框属性（Flexible Box）是css3新添加的盒子模型属性，有人称之为弹性盒模型，它的出现打破了我们经常使用的浮动布局，实现垂直等高、水平均分、按比例划分等分布方式以及如何处理可用的空间。使该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。但是它有一定的局限性，在firefox、chrome这浏览器下需要使用它们的私有属性来定义：firefox(-moz)、chrome（-webkit）。
35网址分类目录源码,ubuntu终端开全屏,tomcat安装注意事项,爬虫基本流程,php 手机文件预览,沙坪坝区seo优化批发价格lzw
CSS3可伸缩框属性列表：
仿腾讯新闻 源码,ubuntu交叉编译gdb,企业用的是tomcat还是,R动态爬虫包,php要不要学习交流,seo词库排行lzw
下面对 CSS3 中新增的弹性盒模型属性做详细介绍。
首先我们先创建一个 html 页面，示例代码1：demo.html
1
2
3
接着我们给页面添加上基本的样式，示例代码2：style.css
body,div{清除所有元素的默认外边距和内边距 margin: 0; padding: 0;}#main{/*设置外围容器样式*/ margin:auto; border:1px solid blue; width: 300px; height: 200px; margin-top:50px;}#div1{/*给div1添加样式*/ width: 100px; height: 50px; background-color: #00B366;}#div2{/*给div2添加样式*/ width: 100px; height: 50px; background-color: #80C8FE;}#div3{/*给div3添加样式*/ width: 100px; height: 50px; background-color: #FEB380;}
效果如下：
声明：
?要想运用 CSS3 的弹性布局，需要将父容器设置为display:box 或 display:inline-box。
?此部分示例在chrome下运行截图。
1. box-sizing：以特定的方式定义匹配某个区域的特定元素。
语法：
box-sizing: content-box|border-box|inherit;
取值：
2. box-orient：规定框的子元素是否应水平或垂直排列。
语法：
box-orient: horizontal|vertical|inline-axis|block-axis|inherit;
取值：
说明：
horizontal和inline-axis属性其效果表现一致，都可以将容器水平排列，在默认情况下也呈现水平排列的样式。当父容器设置高度时，在firefox下面其子容器的高度无效，但chrome下面则有效。
如果你容器不设置高度，子容器的高度值才生效，在firefox下面他们的高度取其中的最大值。而chrome下面设置高度的子容器为自己的高度，未设置的其高度和最大值的高度一样，其实就是和父容器的高度一致。
vertical和block-axis属性效果表现一致，都可将子容器垂直排列。他们是对父容器的高度进行分配。如果子容器设置了宽度，也是谷歌下面有效，火狐无效，其它都与horizontal表现一致。
切记，inline-axis为默认值，沿着行内轴来排列子元素（映射为 horizontal）。
示例代码3：设置框的子元素在水平行中从左向右排列子元素 （修改样式表文件，添加如下样式代码）
#main{/*设置外围容器样式*/ margin:auto; border:1px solid blue; width: 300px; height: 200px; margin-top:50px; /*Firefox*/ display:-moz-box; -moz-box-orient: horizontal; /*Safari、Opera 以及 Chrome*/ display:-webkit-box; -webkit-box-orient: horizontal; /*W3C*/ display:box; box-orient: horizontal; }
效果如下：
注:
实现垂直方向上布局、inline-axis 和 block-axis，只需修改值即可。
inherit 属性值是布局方式继承自父元素，如果父元素是水平的，则它也使用水平布局。
3. box-direction：规定框的子元素的显示方向。
语法：
box-direction: normal|reverse|inherit;
取值：
说明：以反方向显示子元素。
示例代码4：设置垂直且以反方向显示子元素（修改样式表文件，添加如下样式代码）
#main{/*设置外围容器样式*/ margin:auto; border:1px solid blue; width: 300px; height: 200px; margin-top:50px; /*Firefox*/ display:-moz-box; -moz-box-orient:vertical; -moz-box-direction:reverse; /*Safari、Opera 以及 Chrome*/ display:-webkit-box; -webkit-box-orient:vertical; -webkit-box-direction:reverse; /*W3C*/ display:box; box-orient:vertical; box-direction:reverse;}
效果如下：
注:
normal只需修改值即可。inherit可自己实验。
4. box-ordinal-group：规定框的子元素的显示次序。
语法：
box-ordinal-group: integer;
取值：
说明：根据box-ordinal-group的integer值从小到大显示。
示例代码5：设置子元素的显示次序（修改样式表文件）
#main{/*设置外围容器样式*/ margin:auto; border:1px solid blue; width: 300px; height: 200px; margin-top:50px; /*Firefox*/ display:-moz-box; -moz-box-orient:vertical; /*Safari、Opera 以及 Chrome*/ display:-webkit-box; -webkit-box-orient:vertical; /*W3C*/ display:box; box-orient:vertical;}#div1{/*给div1添加样式*/ width: 100px; height: 50px; background-color: #00B366; box-ordinal-group:2; -webkit-box-ordinal-group:2; -moz-box-ordinal-group:2;}#div2{/*给div2添加样式*/ width: 100px; height: 50px; background-color: #80C8FE; box-ordinal-group:1; -webkit-box-ordinal-group:1; -moz-box-ordinal-group:1;}#div3{/*给div3添加样式*/ width: 100px; height: 50px; background-color: #FEB380; box-ordinal-group:3; -webkit-box-ordinal-group:3; -moz-box-ordinal-group:3;}
效果如下：
5. box-flex：规定框的子元素是否可伸缩。
语法：
box-flex: value;
取值：
说明：
可伸缩，顾名思义，子元素如果规定可伸缩，则不要设置宽或高。但一些盒子可以有固定大小，不伸缩。
示例代码6：设置div3为固定大小，div1和div2为可伸缩且div1是div2的两倍（修改样式表文件）
#main{/*设置外围容器样式*/ margin:auto; border:1px solid blue; width: 300px; height: 200px; margin-top:50px; /*Firefox*/ display:-moz-box; -moz-box-orient:vertical; /*Safari、Opera 以及 Chrome*/ display:-webkit-box; -webkit-box-orient:vertical; /*W3C*/ display:box; box-orient:vertical;}#div1{/*给div1添加样式*/ box-flex:2.0; -webkit-box-flex:2.0; -moz-box-flex:2.0; background-color: #00B366;}#div2{/*给div2添加样式*/ box-flex:1.0; -webkit-box-flex:1.0; -moz-box-flex:1.0; background-color: #80C8FE;}#div3{/*给div3添加样式*/ height: 100px;background-color: #FEB380;}
效果如下：
6. box-flex-group：将可伸缩元素分配到柔性分组。
语法：
box-flex-group: integer;;
取值：
说明：
动态给数值较大的组分配其内容所需的实际空间（如无内容、padding、border则不占空间），剩余空间则均分给数值最小的那个组（可能有1个或多个元素）。具体怎么分，本人还不清楚。
示例代码7：将可伸缩元素分配到柔性分组（修改样式表文件）
#main{/*设置外围容器样式*/ margin:auto; border:1px solid blue; width: 300px; height: 200px; margin-top:50px; /*Firefox*/ display:-moz-box; -moz-box-orient:vertical; /*Safari、Opera 以及 Chrome*/ display:-webkit-box; -webkit-box-orient:vertical; /*W3C*/ display:box; box-orient:vertical;}#div1{/*给div1添加样式*/ background-color: #00B366; box-flex:2.0; -webkit-box-flex:2.0; -moz-box-flex:2.0; box-flex-group:1; -webkit-box-flex-group:1; -moz-box-flex-group:1;}#div2{/*给div2添加样式*/ background-color: #80C8FE; box-flex:1.0; -webkit-box-flex:1.0; -moz-box-flex:1.0; box-flex-group:2; -webkit-box-flex-group:2; -moz-box-flex-group:2;}#div3{/*给div3添加样式*/ background-color: #FEB380; box-flex:1.0; -webkit-box-flex:1.0; -moz-box-flex:1.0;box-flex-group:1; -webkit-box-flex-group:1; -moz-box-flex-group:1;}
效果如下：
7. box-pack：规定水平框中的水平位置或者垂直框中的垂直位置。
语法：
box-pack: start|end|center|justify;
取值：
说明：
空间太多如何处理，可利用空间的分布取决于两个属性值：box-align 和 box-pack。
属性“box-pack”一般管理水平方向上的空间分布（根据box-orient的值，也可管理垂直方向），有以下四个可能属性：start、end、 justify、 or center。如，start 所有盒子在父盒子的左侧，余下的空间在右侧。
属性“box- align”管理垂直方向上的空间分布，有以下五个可能属性之：start、 end,、center、 baseline和 stretch。如：start 每个盒子沿父盒子的上边缘排列，余下的空间位于底部。
示例代码8：设置所有盒子在父盒子的右侧（修改样式表文件）
#main{/*设置外围容器样式*/ margin:auto; border:1px solid blue; width: 400px; height: 200px; margin-top:50px; /*Firefox*/ display:-moz-box; -moz-box-orient:horizontal; -moz-box-pack:end; /*Safari、Opera 以及 Chrome*/ display:-webkit-box; -webkit-box-orient:horizontal; -webkit-box-pack:end; /*W3C*/ display:box; box-orient:horizontal; box-pack:end;}#div1{/*给div1添加样式*/ width: 100px; height: 50px; background-color: #00B366;}#div2{/*给div2添加样式*/ width: 100px; height: 50px; background-color: #80C8FE;}#div3{/*给div3添加样式*/ width: 100px; height: 50px; background-color: #FEB380;}
效果如下：
设置所有盒子在父盒子的中间（center），如下图左；设置垂直（box-orient）且盒子在父盒子的左侧（start），如下图右
8. box-align：规定如何对齐框的子元素。
语法：
box-align: start|end|center|baseline|stretch;
取值：
说明：控制垂直方向（box-pack的相对方向）。
示例代码9：设置所有盒子在父盒子的右侧（修改样式表文件）
#main{/*设置外围容器样式*/ margin:auto; border:1px solid blue; width: 400px; height: 200px; margin-top:50px; /*Firefox*/ display:-moz-box; -moz-box-orient:vertical; -moz-box-pack:justify; -moz-box-align:center; /*Safari、Opera 以及 Chrome*/ display:-webkit-box; -webkit-box-orient:vertical; -webkit-box-pack:justify; -webkit-box-align:center; /*W3C*/ display:box; box-orient:vertical; box-pack:justify; box-align:center;}
效果如下：
9. box-lines：规定当超出父元素框的空间时，是否换行显示。
语法：
box-lines: single|multiple;
取值：
说明：
空间不足怎么办，与传统的盒模型一样，overflow属性用来决定其显示方式。为了避免溢出，你可以设置box-lines为multiple使其换行显示。有待验证。
二．DIV+CSS模式简介
Web标准主要由三部分组成：结构（structure）、表现（presenation）和行为（behavior）。
?结构标准对应的主要语言是XHTML
?表现标准对应的主要语言是CSS
?行为标准对应的主要语言是JavaScript
制作一个静态页面，主要用到的就是XHTML与CSS，所以制作标准页面的技术就是XHTML+CSS。而我们经常使用DIV进行页面的整体布局结构（以前使用表格布局），用CSS修饰内容的外观样式，从而形成了DIV+CSS模式。
DIV其实是盒子模型的一个实例，所以深刻的理解盒子模型对网页布局非常重要。
完 CSS盒子模型（上）
