初次接触CSS时，往往会认为width属性表示整个元素的宽度，height属性表示整个元素的高度，包括IE 5.x及以下版本的浏览器都这样认为。实际上，网页设计师也常这样惯性思考问题，这种误解源于我们对事物的一般认识，而且比较根深蒂固。这自然也给网页布局带来麻烦，特别是当网页结构复杂，页面发生错位时，设计师往往会无从查起，不知如何纠错，因为潜意识中认为这种设置是正确的。例如，如果我们定义两个并列显示的div元素，设置每个div的width为50%。例请输入下面的CSS布局代码:
上面的代码在IE 6中浏览会出现两种情况。当浏览器窗口发生变化时会显示不同的效果，这说明IE对此布局代码的解析是不固定的，因此会导致布局错位问题，这也是设计师最烦心的事。但在Firefox 2中浏览就不会出现这种情况，不管窗口怎么变化页面总是并列显示。如果希望并列显示，同时设置元素间留出一点空隙，以便区分不同元素，可以用下面的CSS代码实现，但问题也随之而来：我们会发现不管使哪种浏览器，也不管浏览器窗口怎么变都会发生错误现象，h2出错的原因是因为元素盒模型宽度尺寸计算造成的，分析如下：当左右两个div的width属性都设置为50%时，div挤满浏览器窗口，由于margin属性不包含在width属性之内，所以两个div就无法同时显示在一行之内。实际上，我们可以用三种方法实现在块素周围生成空隙。第一种是只为元素添加补白，第二种是只添加边界，第三种是既增加补白，又增加边界。但是如果元素设置了背景颜色或图像，就不能使用补自来实现添加元素之问的空隙，因为背景色或背景图像会扩展到补白区域内，从而使空隙被背景遮盖而无法显示出来。通过上面的示例我们可以看到盒模型尺寸与页面布局存在的矛盾，这也是初学者容易迷惑，惑的地方。当你还没有完全弄清楚盒模型尺寸的计算方法时，就贸然按常规思维去布局必然会事与愿违。天津网站建设，天津网站优化，汽车玻璃，商业策划招商，钢板桩租赁，天津废锡回收，天津网站制作
根据CSS盒模型规则，我们可以给出一个简单的盒模型尺寸计算公式：医用灭菌袋 灭菌袋封口机 硅橡胶印模材 齿科针
素的总宽度=左边界+左边框+左补白十+宽++右补白++右边框十+右边界
元素的总高度=上边界十上边框+上补白十高十+下补白+下边框十+下边界
例如，假设一个元素的宽度为200px」左右边界为50px，；左右补白为50px，边框为20px。则该元素在页面中实际占据宽度为：50px + 20px + 50px + 200px + 50px + 20px + 50px = 440pX。但由于匝5.x及以下版本浏览器对于盒模型的解释使用一种非标准规则，也就是说IE浏览器按照人们常规思维来计算盒模型尺寸，使得这个本来就很麻烦的问题显得更加复杂。IE 5.x及以下版本浏览器认为元素的宽度应为内容宽度、补白宽度和边界宽度的总和，用公式表示为：width=border-left + padding-left十 content-width + padding-right + border-fight，height=- border-top + padding-top + content-height + padding-bottom + border-bottom因此，在IE 5.x及以下版本浏览器中，元素在页面中所占据的实际大小为：元素的总宽度=左边界十宽+右边界，元素的总高度=上边界十高+下边界这种盒模型规则符合生活逻辑，现实生活中盒子的宽和高肯定是包括盒子的边框和里面的空间的。盒子的大小一般是固定的，不管装入多少内容，仅是压缩了盒子内部的空间，但不会改变盒子的宽和高。想起来尽管合情合理，但这与CSS标准规则相矛盾，因此也给网页布局带来很多不合逻辑的麻烦。
由于浏览器解析的不同，自然给网页设计师的设计带来难题，同时也使CSS标准布局变得扑朔迷离。因此，在网页布局时，遇到与宽度或高度相关问题，设计师一定要对盒模型中的margin、padding和border等属性进行综合考虑，只有这样才能设计出满意的布局，避免出现错位、对不齐、错行等现象。