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

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