在 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重叠的更多相关文章

  1. CSS盒子模型和IE浏览器

    CSS盒模型图解 下面是一幅关于应用了CSS的元素是如何显示它的尺寸的图示. 在本篇文章中,所有的浏览器在计算盒模型总宽度时处理margin属性的方式都是一致的,所以我们将更多的精力放在padding ...

  2. Uint 5.css继承权重,盒模型和border padding

    一 .css的继承性和权重 1.1 继承性:继承是CSS的一个主要特征,它是依赖于祖先-后代的关系的.继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代. 可以被继承的属性有 ...

  3. CSS:盒模型和position定位

    盒模型 页面上显示的每个元素(包括内联元素)都可以看作一个盒子,即盒模型( box model ).请看Chrome DevTools 里的截图: 可以显而易见的看出盒模型由 4 部分组成.从内到外分 ...

  4. Css盒模型有哪几部分,标准盒模型和IE盒模型有哪些区别

    首先介绍Css的盒模型也就是标准盒模型(BOX Model) 包含了 内容(content) 内边距(padding) 边框(border) 外边框(margin) 这是大家经常用到的,也是现在的标准 ...

  5. 关于css盒子模型和BFC的理解

    CSS盒子模型 包含元素内容(content).内边距(padding).边框(border).外边距(margin) 一般元素总宽度 = element的width+padding的左右边距+mar ...

  6. CSS盒模型之margin解析

    原文链接:http://www.jianshu.com/p/ccb534e9b588 文章分为: margin的使用 margin的叠压现象 margin的子债父偿现象 一.margin的使用 HTM ...

  7. IE盒模型和W3C盒子模型的区别

    其实这个问题到现在真的是没有意义了,因为早在IE6的兼容模式开始就已经弃用了IE盒子模型了,但是现在的各种面试题还是会时常出现这样的上世纪的题目,我觉得其实时纯粹的刁难. 好了,吐槽不多说了,直接上图 ...

  8. CSS盒模型的深度思考及BFC

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 题目:谈一谈你对CSS盒模型的认识 专业的面试,一定会问 CSS 盒模型 ...

  9. CSS盒模型详解(图文教程)

    本文最初发表于博客园,并在GitHub上持续更新.以下是正文. 盒子模型 前言 盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并 ...

随机推荐

  1. LeetCode OJ 95. Unique Binary Search Trees II

    Given n, generate all structurally unique BST's (binary search trees) that store values 1...n. For e ...

  2. 2.请尝试安装和配置JDK,并给出安装、配置JDK的步骤。

    win10/64位 1.解压jdk1.8.0_91_x64.rar 2.同时按住win键和pause键,弹出系统属性窗口,选择高级系统设计选项. 3.然后单击环境变量按钮. 4.弹出环境变量对话框后, ...

  3. linux服务器之LVS、Nginx和HAProxy负载均衡器对比总结

    LVS特点: 1.抗负载能力强,使用IP负载均衡技术,只做分发,所以LVS本身并没有多少流量产生: 2.稳定性.可靠性好,自身有完美的热备方案:(如:LVS+Keepalived) 3.应用范围比较广 ...

  4. Hibernate Tools for Eclipse安装

    声明:本文转载自 http://developer.51cto.com/art/200906/128067.htm Hibernate Tools for Eclipse Plugins 的安装和使用 ...

  5. VB 要求对象

    vDoc = WebBrowser1.Document '提示要求对象 Set vDoc = WebBrowser1.Document '正确执行

  6. opencv----人脸美白算法,祛斑,祛痘,磨皮等

    现在各种手机camera软件都自带图像美颜处理,但是成熟的算法在网上很难搜到,博主也是自己摸索了自己做出来了,跟美图秀秀的处理效果相比,还不错,感觉很好,所以PO上来,与各位博友分享之. 首先是根据网 ...

  7. Python数据分析Python库介绍(1)

    一直想写点Python的笔记了,今天就闲着无聊随便抄点,(*^__^*) 嘻嘻…… ---------------------------------------------------------- ...

  8. JAVA-面向对象2--继承

    1. 继承的好处: 1.提高代码复用性. 2.让类与类之间产生关系,为面向对象的第三大特征 多态 提供了前提 2.java中支持单继承,不直接支持多继承,但对c++中多继承进行了改良.java通过多实 ...

  9. LoadRunner 技巧之协议分析(五)

    在做性能测试的时候,协议分析是困扰初学者的难题,选择错误的协议会导致Virtual User Generator 录制不到脚本:或录制的脚本不完整,有些应用可能需要选择多个协议才能完整的记录 客户端与 ...

  10. TriggerPrefab 拖拽物体

    模拟经营类游戏 有一个特点,就是 拖拽物体.常见的有<帝国><红警><部落战争><凯撒大帝>等等 2d 拖拽 大部分都是 用 OnDrag 方法来 拖动 ...