盒子模型用于处理元素的内容、内边距、边框和外边距的方式简称。元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。
内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。
CSS实现页面布局的一种思想:把页面的所有元素都看成一个类似于礼品盒的盒子,礼品盒可能会有好多层包装组成,那么页面元素也对应的有内容、边框、内外边距等组成。这里特别提醒一下,盒模型是要把元素看成立体的,它确实有空间的3D属性,css盒子3D模型从上到下分为5层:1、border;2、content+padding;3、background-image;4、background-color;5、margin。
目前有: 标准盒子模型和IE盒子模型 2种盒模型 ,区别在于:
为了满足跨浏览器的差异,我们比较肯定的方式是使用标准盒模型,这里通过在网页顶部增加DOCTYPE的声明,来解决跨浏览器兼容方案(或者使用css3的声明方式):
块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度。
行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化,另外
块级元素:div , p , form, ul, li , ol, dl,form, address, fieldset, hr, menu, table...
行内元素(内联元素):a , span, strong, em, br , img , input, label, select, textarea, cite....
如果想让一个元素可以设置宽度高度,又让它以行内形式显示,我们可以设置display的值为inline-block。
CSS3增加的box-sizing属性,允许我们规定元素使用哪种盒模型。IE8及以上版本支持该属性,Firefox 需要加上浏览器厂商前缀-moz-,对于低版本的IOS和Android浏览器也需要加上-webkit-。它具有有3个属性值:
box-sizing:content-box: W3C标准盒模型,默认属性。padding和border不被包含在定义的width和height之内。
box-sizing:border-box: IE6混杂模式盒模型, padding和border被包含在定义的width和height之内。此属性表现为怪异模式下的盒模型。
box-sizing:inherit : 从父级元素中继承该属性。
如果设置box-sizing:border-box来使用IE6混杂盒模型 ,那么
设置padding与border后,内容区的宽度和高度被压缩为70px 70px,盒子的原尺寸仍然是100px 100px
当一个容器宽度定义为 width:100%之后,如果再增加 padding 或者 border 则会溢出父容器,是向外扩张的。如果使用该样式,指定为 box-sizing: border-box则 padding 和 border 就不会再溢出,而是向内收缩的,这个效果是非常实用的。
/* 2nd Menu Hover Persistence */.navmenu li:hover li a:hover,
.navmenu li:hover li:hover a { background: #CCCcolor: #FFF}
这一段,这段代码说的就是鼠标经过2级菜单的样式,修改它不会改变1级导航样式。
原因要怎么说?:hover就是鼠标经过效果。
再要详细请致电W3C万维网联盟北航总部,电话86-10-82316341。
谢谢。