《
掌握盒模型轻松DIV CSS网页布局》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302342322013.htm
而对于Windows IE 5.x及更前的版本，把这个盒模型的定义搞错了，它认为：
如果想纯熟把握DIV和CSS的布局办法，首先要对盒模型有足够的懂得。每个HTML元素都可以看作一个装了货色的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子自身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin），如图1所示。
・填充值不可为负。
对于盒模型，还有以下多少点需要注意：
图3 针对IE修正CSS
宽度（width）= 元素内容 + 填充 + 边框
#menu { padding: 5px; width:110px; voice-family: ""}""; voice-family: inherit; width: 100px; }
定义中第一个width:110px，是IE 5.5以为的元素的宽度，100px+5px+5px。
注1. 块级元素（display: block）
每个块级元素都从一个新行开端，而且其后的元素也需另起一行开始，题目、段落、表格、层、body等都是块级元素。块级元素只能作为其余块级元素的子元素,
把title给显示出来参与页面布局，而且须要必定的前提。
・边界值可为负，其显示后果各浏览器可能不相同。
对支持!important的浏览器，将接收width:768px，而ie6固然不支持!important,打印机打印CSS样式表的注意事项，然而因为其无奈说明“ /**/（空解释）”，因此会疏忽后面的定义，而ie 5.5却会接受最后定义的width:770px，因此到达修改的目标。
例如如下的写法：
--> [
网站建设之]控制盒模型轻松DIV CSS网页布局
#box { border: 1px solid #B51C8C; width:768px; }
而其修正方式如图3所示。
・内联元素，例如<a>、<span>等，定义高低边界不会影响到行高（line-height），内联元素距离上一行元素的间隔由行高决议，而不是填充或边界。
这个确切很轻易搞错,手机网站忘记密码的流程设计优化，许多对于盒模型定义没有深刻了解的人也同样容易犯这个错误。例如：
是CSS2.0中的语音属性，因为Windows IE5.5不完整支持CSS2.0，不辨认此属性，因此跳到下一个取舍符。但是其他浏览器（包含IE6）会持续解读下面的定义，由于css是“层叠”的，即对于统一个抉择符的相同的属性，后面的定义会覆盖掉前面的定义，因此，对于其他的浏览器，#menu的宽度为最后的100px。
voice-family: “”}”";
voice-family: inherit;
・浮动元素（无论左或者右浮动）边界不压缩，且若浮动元素不声明宽度，则其宽度趋势于0，即压缩到其内容能蒙受的最小宽度。
#menu { width: 200px; padding: 5px; border: 1px solid #ccc; }
那么,手机客户端搜索引擎 提升用户在移动端的搜索体验，在IE5.5中div实际内容的宽度将是200px-5px-1px-5px-1px=188px，而在Firefox、Opera及IE 6等浏览器内宽度则是200px。
如果必需同时定义这几个值，也可以使用一些手腕来校订这个毛病，即俗称的css hack，其基础思维就是为没有过错的浏览器供给一个准确的宽度值，而对IE5.5等有问题的浏览器提供另一个值。
图1 盒模型图解
・边框默认的款式（border-style）为不显示（none）。
Tag：
填充、边框和边界都分为“上右下左”四个方向，既可以分辨定义，也能够同一定义。
CSS内定义的宽（width）和高（height），指的是填充以内的内容范畴，因此一个元素：
实际宽度 = 左边界 + 左边框 + 左填充 + 内容宽度（width） + 右填充 + 右边框 + 右边界
实际高度 = 上边界 + 上边框 + 上填充 + 内容高度（height） + 下填充 + 下边框 + 下边界
例如有CSS定义如下：
这恰是良多新手发明本人定义的页面在不同的阅读器内看会产生错位的起因之一。
另一个常用的hack伎俩是应用!important（申明），声明加在CSS属性定义的后面，此条属性的级别将变成最高，即便后面有雷同的定义也不会笼罩掉声明过的定义，不外IE不支撑!important。
图2 元素总宽度的盘算
例如有如下css定义：
注2,
手机产品交互设计 利用设计规避的问题. 内联元素（display: inline）
内联元素不需要在新行内显示，而且也不逼迫其后的元素换行，如a、em、span等都为内联元素。内联元素可认为任何其他元素的子元素。
因此就需要采取一定的补充办法，个别可以防止同时定义元素的宽度和填充、边框，而将一些定义放到元素的子元素内定义。
#menu { background: #9cf; margin: 20px; border: 10px solid #039; padding: 40px; width: 200px; }
则实在际宽度如图2所示。
图4 边界的压缩
・假如盒中不内容，则即使定义了宽度跟高度都为100%，实际上只占0%，因而不会被显示，此点在采用层布局的时候需特殊留神。
・对于块级元素（display:block），未浮动的垂直相邻元素的上边界和下边界会被紧缩，例如：有上下2个元素，上元素的下边界为5px，下面元素的上边界为20px，则实际2个元素的间距为20px（2个边界值中较大的值）。如图4所示。
(责任编辑：网站建设)
掌握盒模型轻松DIV CSS网页布局相关文章