`

css盒子模型

    博客分类:
  • css
css 
阅读更多
用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
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics