用CSS来排版网页,即用DIV编排网页结构,由此会接触到一个知识点----
CSS的盒子模式。
盒子模式具备的属性:内容(content)、填充(padding)、边框(border)、边界(margin)
一般盒子模型的width属性只包括content 部分。
IE 盒子模型的
width属性包括了content、border 和 padding部分。
值得注意的是:
IE8以下浏览器的盒模型中定义的元素的宽高
不包括内边距和边框
宽度width = 自身宽度content+左内边距+右内边距+左边框+右边框
高度height = 自身高度content+上内边距+下内边距+上边框+下边框
**盒子的浮动:
一个div范围是由它里面的标准流内容决定的,与它里面的浮动内容无关。
此时若希望浮动内容被父div包含,可在浮动内容后清除浮动。
关于相对定位:(position:relative)
使用相对定位的盒子,会相对它原本的位置偏移指定的距离,而对其父块和兄弟块没有任何影响。
关于绝对定位:(position:absolution)
使用绝对定位的盒子以它最近的一个已经定位的(即设置了position属性)祖先元素为基准进行指定的偏移,而对其后面的兄弟盒子无影响,对于其他盒子该盒子如同不存在。
如果设置了绝对定位,而未设置偏移属性,则它仍将在原来的位置。
设计导航菜单时便遇到盒子的浮动这个问题啦~
扩展:
http://www.52css.com/article.asp?id=376
http://www.zhiwenweb.cn/Category/Website/1131.htm
分享到:
相关推荐
CSS盒子模型教程PPT课件.pptx
CSS盒子模型.rarCSS盒子模型.rarCSS盒子模型.rarCSS盒子模型.rarCSS盒子模型.rar
CSS盒子模型结构
CSS盒子模型的应用
CSS 盒子模型
CSS盒子模型图片,和大家分享一下,里面详细的介绍了CSS的盒子模型
1.1 CSS盒子模型概述 1.3 CSS 盒子模型边框 1.4 CSS盒子模型外边距 1.5CSS盒子模型的应用
CSS盒子模型教程学习教案.pptx
css盒子模型视频简介上帮助理解社么是盒子模型
css 盒子模型彻底解析 如果你对盒子模型的理解还不透彻,看看这个会有帮助。
专门讲CSS盒子模型布局的,对网页制作技术的提高有很大的帮助
DIV CSS 盒子模型PPT演讲! HTML中 常见技术 盒子模式,网页设计基础同学可以用心,收获学习。
CSS盒子模型PPT学习教案.pptx
CSS盒子模型PPT教学课件.pptx
CSS盒子模型详解,自己学习总结的,希望对你有用。自己也做个笔记
CSS盒子模型教程PPT学习教案.pptx
CSS盒子模型:W3C组织建议把所有的网页上的对象都放在一个盒子中(在定义盒子宽高的时候,要考虑到内填充,边框,边界的存在) 一个盒子的构成:盒子中的内容:content盒子的边框:border盒子边框与内容之间的距离:...
HTML-第七章-CSS盒子模型+排版.pdf
HTML-第七章-CSS盒子模型+排版.pptx