基于CSS盒子模型float属性解析

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

）
＃ＴｏｐＤｉｖ２｛
ｌｆｏａｔ：ｒｉｇｈｔ；
得两个版块的宽度加起来恰好是父版块＃ＭａｉｎＤｉｖ的宽度。而＃ＳｅａｒｃｈＤｉｖ的宽度设置为１００％，即和父版块同宽，所以无
法￣Ｉ＃ＬｅｆｔＤｉｖ１、＃ＲｉｇｈｔＤｉｖｌ排列在同一行，只能下移一行。同理，由于＃ＳｅａｒｃｈＤｉｖ占据了整行的宽度，＃ＬｅｔｆＤｉｖ２、Ｒｉｇｈｔ．
具体的网页布局实例进一步说明浮动属性的用法。
｝＃ＲｉｇｈｔＤｉｖｌ｛
ｌｆｏａｔ：ｒｉｇｈｔ；
参考文献：
［１］ＣｈａｌｒｅｓＷｙｋｅ — Ｓｍｉｔｈ．ｃｓｓ－￣．计指南（第３版）［Ｍ］北京：人民邮电
ＪｉａｎｇＹｕｎＸｉｎ
（ＤｅｐａｒｔｍｅｎｔｏｆＰｕｂｌｉｃＢａｓｉｃ，ＦｕｊｉａｎｇＭｅｄｉｃａｌＣｏｌｌｅｇｅ，Ｆｕｚｈｏｕ３５０１０１，Ｆｕｊｉａｎｇ）
对于中间部分＃ＳｅａｒｃｈＤｉｖ的设置仍是采用左浮动，并且宽度设置为１００％。由于五个子版块都是浮动元素，并且根
据浮动元素的排列特点（紧靠着排列），如果要实现上中下的排列结构，版块的ｗｉｄｔｈ属性设置要特别注意。所以，＃Ｌｅｔｆ．Ｄｉｖｌ的宽度设置为６９％，＃ＲｉｇｈｔＤｉｖｌ的宽度为２９％，这样使
ｗｉｄｔｈ：２００ｐｘ；
｝
中间版块＃ＭａｉｎＤｉｖ包含五个浮动的子版块，其中＃Ｌｅｔｆ．
Ｄｉｖｌ￣ｌ＃ＲｉｇｈｔＤｉｖ１的设置可参照项部嵌套的子版块，同理可设￣＃ＬｅｆｔＤｉｖ２和ＲｉｇｈｔＤｉｖ２版块。部分代码如下：＃ＬｅｆｔＤｉｖｌ｛
ｌｆｏａｔ：ｌｅｔｆ；ｈｅｉｇｈｔ：１５０ｐｘ；ｗｉｄｔｈ：６９％；
Ｄｉｖ２也必须下移一行排列，从而实现了上中下的布局结构。
６结语
本文介绍了盒子模型与标准文档流的概念，阐述了盒子
在标准流中的定位原则。解析了ＣＳＳ中的浮动属性，并通过
ｂｏｘｉｎｎｏｍａｒｌｄｏｃｕｍｅｎｔｓｒｅｔａｍ．ＩｔａｎａｌｙｚｅｓｈｅｔｌｏｆｔａａｔｔｒｉｂｕｔｅｏｆＣＳＳ，ａｎｄｇｉｖｅｓｈｅｔｍｅｔｈｏｄｏｆｕｓｉｎｇｌｆｏａｔｂｙｓｐｅｃｉｉｃｆｃａｓｅ．
Ｉ字术琛讨
— — ．。
应用｜吏术与研究
——
】．．一
ቤተ መጻሕፍቲ ባይዱ——— — —
—
— — ——…
—
１．＿
———一
｝
中设置块的ｗｉｄｔｈ属性和ｆｌｏａｔ属性，代码如下：
＃ＴｏｐＤｉｖｌ｛
ｌｆｏａｔ：ｌｅｔ；ｆｗｉｄｔｈ：２００ｐｘ；
出版社．２０１３．
ｈｅｉｇｈｔ：１５０ｐｘ；ｗｉｄｔｈ：２９％：
［２］温谦
ｃｓｓｉ￣计彻底研究【Ｍ］．北京：人民邮电出版社，２００８．
ＡｎａｌｙｓｉｓｏｆＦｌｏａｔＡｔｔｒｉｂｕｔｅＢａｓｅｄｏｎＣＳＳＢｏｘＭｏｄｅｌ
【Ｋｅｙｗｏｒｄｓ】ＣＳＳ；ｌｆｏａｔ；ｂｏｘｍｏｄｅｌ；ｎｏｒｍａｌｄｏｃｕｍｅｎｔｓｒｔｅａｍ
．
６２．
【Ａｂｓｔｒａｃｔ】Ｔｈｉｓｐａｐｅｒｉｎｔｒｏｄｕｃｅｓｔｈｅｃｏｎｃｅｐｔｉｏｎｏｆｂｏｘ — ｍｏｄｅｌａｎｄｎｏｒｍａｌｄｏｃｕｍｅｎｔｓｔｒｅａｍ，ａｎｄｓｔａｔｅｓｔｈｅｐｏｓｉｔｉｏｎｐｒｉｎｃｉｐｌｅｏｆ