由于盒子模型技术内容比较多，这篇文章我将着重讲解知识点。
下一篇文章，我会带领大家开发一个兼容 pc端浏览器和 移动端浏览器的弹性布局web界面的实例。希望大家能从中领受到CSS3在布局方面的强大功能。
好了，长话短说，现在开始我们的《CSS3中的弹性流体盒模型技术详解》之旅吧！
其实我们现在有很多一部分人，你们刚刚接触CSS层叠样式表，或者接触有一段时间了，但是却没有很好的去消化与理解。可能平时你们还一直在使用table，然后通过不断了合并单元格来实现网页布局。希望我今天的这篇文章能彻底改变大家的观念。
Q：如何理解盒子模型？
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页面，代码如下所示：
|
|
运行页面，查看一下目前样式的应用效果:
首先声明：要想运用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;
}
|
效果如下：
好了，由于篇幅有限，这篇就先讲到这里。
欢迎大家加入互联网技术交流群：62329335
个人申明：所分享博文，绝对原创，并力争每一个知识点都通过实战演示来进行验证。
相关推荐
Flexbox（弹性盒布局）是CSS3引入的一种新的布局模式，适用于单行或单列的复杂布局。它允许元素在容器中灵活地调整大小和位置。通过设置`display: flex;`，容器变为flex容器，可以调整`flex-direction`、`justify-...
CSS提供了多种布局方式，包括盒模型、定位（static、relative、absolute、fixed）、流体布局（百分比单位）、Flexbox（弹性盒模型）和Grid（网格布局）。这些布局方式让开发者能够灵活控制元素的排列和对齐。 **4. ...
**CSS中文样式表详解** CSS，全称Cascading Style Sheets，中文译为层叠样式表，是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它能让你将样式规则从内容中分离出来，使网页设计...
2. **Flexbox布局**: 弹性盒模型（Flexbox）用于处理容器内的元素对齐、排列和分配空间，适应不同屏幕尺寸。 3. **Grid布局**: CSS Grid提供二维布局系统，可以方便地创建网格布局，处理复杂的页面结构。 4. **...
CSS3引入了`box-sizing`属性，可设置为`content-box`（默认）或`border-box`，改变盒模型的行为。 ### 五、响应式设计 1. **媒体查询**: 使用`@media`规则根据设备特征（如屏幕宽度）应用不同的样式。 2. **流体...
这涵盖了盒模型（Box Model）、流体布局、网格系统、Flexbox（弹性盒布局）和Grid Layout（网格布局）。随着网页设计需求的复杂化，这些布局技术使得创建响应式和适应不同屏幕尺寸的页面变得更加容易。 第11至第15...
3. **布局技术**：讲解流体布局（使用百分比单位）、网格系统、Flexbox（弹性盒模型）和Grid布局，这些都是创建响应式网站的关键工具，可以适应不同屏幕尺寸。 4. **响应式设计**：探讨媒体查询@media，用于根据...
4. **盒模型**：CSS中的每个元素都可看作一个盒子，包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。理解盒模型对于精确控制元素尺寸至关重要。 **二、CSS布局** 1. **流体布局**：流体布局使...
3. **布局模式**：流体布局（block）、网格布局（grid）和弹性布局（flexbox）是现代CSS布局的主要方式，其中Flexbox特别适用于一维布局，而Grid则擅长二维布局。 4. **响应式设计**：通过媒体查询（@media query）...
3. **Flexbox**：弹性盒模型提供了一种更简单、直观的方式来处理元素的布局，可以轻松实现主轴对齐、交叉轴对齐以及分配多余空间。 4. **Grid**：CSS Grid布局允许创建二维网格系统，适用于复杂和多列布局，如网页...
1. **盒模型（Box Model）**: CSS中的每个元素都被视为一个矩形盒子，包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。 2. **流体布局（Fluid Layout）**: 基于百分比的布局，使页面在不同屏幕...
3. **布局技术**：包括流体布局、响应式布局（媒体查询@media）、Flexbox（弹性盒模型）和Grid（网格布局），这些都是现代Web设计中常用的技术。 4. **颜色与背景**：如何使用颜色、渐变、背景图片以及背景重复等...
Core CSS 是一本专注于CSS（Cascading Style Sheets）核心概念和技术的英文原版教程。CSS是网页设计中的关键部分，用于定义网页内容的布局和样式，使得网页呈现更加美观且易于维护。本书旨在帮助读者深入理解CSS的...
2. **布局技术**：CSS提供了多种布局模式，如流体布局（Fluid Layout）、网格布局（Grid Layout）、Flexbox（弹性盒布局）和CSS Grid。其中，Flexbox适用于一维布局（行或列），而CSS Grid则更适合二维布局，能够更...
- **盒模型**：CSS中的每个元素都可视为一个盒子，包含内容、内边距、边框和外边距，影响元素的大小和位置。 2. **CSS布局方式** - **流体布局**：利用百分比宽度使元素随浏览器窗口大小变化而自适应。 - **网格...
3. **布局作用**：`div`常用于创建行、列、段落等布局结构，通过`display`属性调整其行为，如`block`（块级元素）、`inline`（行内元素）或`flex`（弹性盒模型）。 ### 二、CSS基础 1. **选择器**：CSS通过选择器...
4. **布局技术**：CSS提供了多种布局方式，如传统流体布局、网格系统（CSS Grid）、Flexbox（弹性盒子布局）和最新的CSS Grid Layout。这些布局技术可以帮助开发者实现复杂的网页布局。 5. **响应式设计**：随着...
4. **Flex布局**：弹性盒布局，适用于一维布局，允许元素在容器内灵活伸缩。 5. **CSS Grid & Flexbox结合**：两者结合使用，可构建复杂的响应式布局。 **五、DIV+CSS布局技巧** 1. **浮动布局**：使用`float`属性...
- **Flexbox**：弹性盒布局模型，适用于一维布局，如行或列，提供灵活的子元素对齐方式。 - **Grid**：网格布局系统，用于二维布局，能更精确地控制元素的排列和对齐。 4. **响应式设计** - **媒体查询**：`@...