- 1、本文档共7页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
CSS3中的弹性流体盒模型技术详解(一).pdf
中的弹性流体盒模型技术详解一
从这篇文章开始,会利用几个篇幅,我将跟大家分享从 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 增加了弹性盒模型布局属性,这为我们开发适合现代移动浏览器
您可能关注的文档
- A060202煤巷顶板离层控制理论及其实践.doc
- Abaqus6.12.1WIN7系统32位详细图文安装及其汉化教程(完整版).pdf
- ABC家教服务管理系统.doc
- ACS树脂综合性能研究分析-西宁.doc
- acy%arso成铁工程文化活动楼预应力技术的设计的研究.doc
- AC解决方案-中小企业上网行为管理平台解决方案(含Sc)V1.0-王磊-20140107.doc
- Adaptivespectralmethodsforsimulationoutputanalysis.pdf
- AdiscontinuousGalerkinfiniteelementmethodforHamilton-Jacobiequations.pdf
- ADTB-T技术的特点及其应用.doc
- ADVANCEDSPECTRALMETHODSFORCLIMATIC.pdf
文档评论(0)