CSS3中的弹性流体盒模型技术详解(一).pdf

《CSS3中的弹性流体盒模型技术详解(一).pdf》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、中的弹性流体盒模型技术详解一从这篇文章开始，会利用几个篇幅，我将跟大家分享从CSS1到CSS3都是如何实现页面布局的(当然，所指的范畴是利用CSS技术)。由于盒子模型技术内容比较多，这篇文章我将着重讲解知识点。下一篇文章，我会带领大家开发一个兼容pc端浏览器和移动端浏览器的弹性布局web界面的实例。希望大家能从中领受到CSS3在布局方面的强大功能。好了，长话短说，现在开始我们的《CSS3中的弹性流体盒模型技术详解》之旅吧！在讲解CSS3中新增的弹性布局属性之前，我们先回顾一下CSS1和CSS2中都已经定义了哪些布局方面的属性，这样也会增加我们理解弹性布局。其实我们现在有

2、很多一部分人，你们刚刚接触CSS层叠样式表，或者接触有一段时间了，但是却没有很好的去消化与理解。可能平时你们还一直在使用table，然后通过不断了合并单元格来实现网页布局。希望我今天的这篇文章能彻底改变大家的观念。Q：如何理解盒子模型？A：大家可以想一想，在现实生活中，如果我们拿一个盒子来装东西，那么盒子里面的东西是不是跟这个盒子之间会有空隙呢？站在里面物品的角度，则它们之间的间隙距离是不是就可以构成物品到盒子的外边距。如果站在盒子的角度，则从盒子到物品的距离，是不是可以看出盒子的内边距呢。当然，盒子还是会有宽和高的。外边距的英文就是margin，内边距的英文是padd

3、ing，宽是width，高是height。下面是盒子模型的2D图：CSS1中定义了盒子模型的基本元素，详细属性请看下表：margin-top元素顶部外边距margin-right元素右侧外边距margin-bottom元素底部外边距margin-left元素左侧外边距margin这是一个复合属性，定义元素各个边的外边距，属性值的顺序是:上，右，下，左border-top元素上边框样式border-right元素右边框样式border-bottom元素下边框样式border-left元素左边框样式border-width元素边框宽度border-top-width元素上边

4、框宽度border-right-元素右边框宽度widthborder-bottom-元素下边框宽度widthborder-left-width元素左边框宽度border复合属性，可以同时设置各个边框样式padding-top元素上侧内边距padding-right元素右侧内边距padding-bottom元素下侧内边距padding-left元素左侧内边距padding复合属性，同时设置各个边框内边距width设置元素的宽度height设置元素的高度float设置元素浮动显示clear清除元素的浮动效果border-color设置边框颜色border-style设置边框

5、样式CSS2在以上基础上，又做了一些细化：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子元素在盒子内垂直方向上的空

6、间分配box-pack子元素在盒子内水平方向的空间分配方式box-direction盒子的显示顺序box-flex元素在盒子内的自适应尺寸box-flex-group自适应子元素群组box-lines子元素分列显示box-ordinal-group子元素在盒子内的显示位置box-orient盒子分布的坐标轴下面我将对CSS3中新增的弹性盒模型属性做详细介绍，并通过实际coding来带领大家深刻认识弹性布局的威力。首先我们先创建一个html页面，代码如下所示：

7、stylesheet”href=”styles.css”>我是边栏