码迷,mamicode.com
首页 > Web开发 > 详细

CSS盒模型和margin重叠

时间:2014-07-26 17:12:32      阅读:306      评论:0      收藏:0      [点我收藏+]

标签:style   http   color   使用   strong   问题   html   div   

在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。(div的实际占用尺寸变打了)

但:

一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是,不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和子元素。

关于margin重叠的问题请参考:http://www.hujuntao.com/web/css/css-margin-overlap.html

尽量避免这类问题。

CSS盒模型和margin重叠,布布扣,bubuko.com

CSS盒模型和margin重叠

标签:style   http   color   使用   strong   问题   html   div   

原文地址:http://www.cnblogs.com/dunken/p/3870279.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!