CSS教程之盒模型

时间：2023-04-01 13:10:18 CSS 我要投稿

相关推荐

CSS教程之盒模型

　　如果想熟练掌握DIV和CSS的布局方法，首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）

　　1.盒模型

　　填充、边框和边界都分为“上右下左”四个方向，既可以分别定义，也可以统一定义。

　　CSS内定义的宽（width）和高（height），指的是填充以内的内容范围，因此一个元素：

　　实际宽度=左边界左边框左填充内容宽度（width）右填充右边框右边界

　　实际高度=上边界上边框上填充内容高度（height）下填充下边框下边界

　　例如有CSS定义如下：

　　#menu{

　　background:#9cf;

　　margin:20px;

　　border:10pxsolid#039;

　　padding:40px;

　　width:200px;

　　}

　　2.元素总宽度的计算

　　而对于WindowsIE5.x及更前的版本，把这个盒模型的定义搞错了，它认为：

　　宽度（width）=元素内容填充边框

　　这个确实很容易搞错，很多对于盒模型定义没有深入了解的人也同样容易犯这个错误。

　　例如：

　　#menu{

　　width:200px;

　　padding:5px;

　　border:1pxsolid#ccc;

　　}

　　那么，在IE5.5中div实际内容的宽度将是200px-5px-1px-5px-1px=188px，而在Firefox、Opera及IE6等浏览器内宽度则是200px。

　　这正是很多新手发现自己定义的页面在不同的浏览器内看会发生错位的原因之一。

　　因此就需要采取一定的弥补措施，一般可以避免同时定义元素的宽度和填充、边框，而将一些定义放到元素的子元素内定义。

　　如果必须同时定义这几个值，也可以使用一些手段来校正这个错误，即俗称的csshack，其基本思想就是为没有错误的浏览器提供一个正确的宽度值，而对IE5.5等有问题的浏览器提供另一个值。

　　例如如下的写法：

　　#menu{

　　padding:5px;

　　width:110px;

　　voice-family:""}"";

　　voice-family:inherit;

　　width:100px;

　　}

　　定义中第一个width:110px，是IE5.5认为的元素的宽度，100px 5px 5px。

　　voice-family:""}"";

　　voice-family:inherit;

　　是CSS2.0中的语音属性，由于WindowsIE5.5不完全支持CSS2.0，不识别此属性，因此跳到下一个选择符。但是其他浏览器（包括IE6）会继续解读下面的定义，由于css是“层叠”的，即对于同一个选择符的相同的属性，后面的定义会覆盖掉前面的定义，因此，对于其他的浏览器，#menu的宽度为最后的100px。

　　另一个常用的hack手法是使用!important（声明），声明加在CSS属性定义的后面，此条属性的级别将变成最高，即使后面有相同的定义也不会覆盖掉声明过的定义，不过IE不支持!important。

　　例如有如下css定义：

　　#box{

　　border:1pxsolid#B51C8C;

　　width:768px;

　　}

　　3.针对IE修正CSS

　　对于支持!important的浏览器，将接受width:768px，而ie6虽然不支持!important，但是由于其无法解释“/**/（空注释）”，因此会忽略后面的定义，而ie5.5却会接受最后定义的width:770px，因此达到修正的目的。

　　关于盒模型，还有以下几点需要注意：

　　·对于块级元素（display:block），未浮动的垂直相邻元素的上边界和下边界会被压缩，例如：有上下2个元素，上元素的下边界为5px，下面元素的上边界为20px，则实际2个元素的间距为20px（2个边界值中较大的值）。

　　边界的压缩

　　注1.块级元素（display:block）