1-盒模型的两种标准：

IE :width 和 height属性 是包括padding和border在内的。

w3c：width 和 height 属性，就是单纯的内容的宽高，padding 是内容之外的附加值。

IE标准盒模型 w3c标准盒模型

我发现我以前总是记得有点混乱。现在绝对不会忘记了。box-sizing属性可以定义要使用哪种盒模型

解决这个问题分方法1：不要给元素添加具有指定宽度的内边距，尝试将内边距或者外边距添加到元素的父元素或者子元素。

方法2：待补充？？

2-对box-sizing进一步了解：

box-sizing：content-box | border-box  （默认值为：content-box）

不具有继承性，适用于所有可以用属性width 和 height 的元素

content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )此属性表现为标准模式下的盒模型。就是上面的w3c标准的盒模型。

border-box：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )此属性表现为怪异模式下的盒模型。 同上面IE 标准的盒模型。

插入一下标准和怪异盒模型的实例代码和盒模型：

标准 怪异 
.test1{

    box-sizing:content-box;

    width:200px;

    padding:10px;

    border:15px solid #eee;

}

 
.test1{

    box-sizing:border-box;

    width:200px;

    padding:10px;

    border:15px solid #eee;

}

box-sizing的兼容性如下：

3-外边距叠加

概念：当两个或者是更多个垂直外边距相遇时，他们将形成一个外边距，这个外边距的高度等于两个发生叠加的外边距的高度重视的较大者。（当一个元素位于另一个元素上方时，第一个元素的底外边距会和第二个元素的顶外边距发生叠加。）

测试如下：

代码 
<!DOCTYPE html>

<html>

    <head>

        <title>css bug 测试</title>

        <meta charset = "utf-8">

        <style type="text/css">

            .box-top{

                width: 50px;

                height: 50px;

                background-color: red;

                margin: 30px;

            }

            .box-bottom{

                width: 50px;

                height: 50px;

                background-color: green;

                margin: 20px;

            }

        </style>

    </head>

    <body>

        <div class="box-top"></div>

        <div class="box-bottom"></div>

    </body>

</html>
 
 图片结果

外边距的叠加问题在水平方向是没有问题的。

当两个元素为父子元素时，并且没有边框或者内边距将两个外边距分隔开，他们的顶和底外边距也会发生叠加。

如下例子所示：

代码 
<!DOCTYPE html>

<html>

    <head>

        <title>css bug 测试</title>

        <meta charset = "utf-8">

        <style type="text/css">

            .box-top{

                width: 50px;

                height: 50px;

                background-color: red;

                margin: 30px;

            }

            .box-bottom{

                width: 30px;

                height: 30px;

                background-color: green;

                margin-top: 20px;

                border: 1px solid red;

            }

        </style>

    </head>

    <body>

        <div class="box-top">

            <div class="box-bottom"></div>

        </div>

    </body>

</html>
示例图1

示例图2

tips：之前在写代码的时候，会发现这样的问题。却不知道是什么问题。理所应当的认为第一个div是相对浏览器定位的，而第二个div是相对第一个的，因为它是它的子元素。但是变化div2的外边距却怎么也不对。查了资料才知道是外边距叠加。要解决这个问题的方法为：

触发block formatting context即可，触发的方法：
1. float不为none
2. overflow不为visible
3. display设为‘table-cell’, ‘table-caption’, 或‘inline-block’
4. position既不是static也不是relative
5. zoom:1, IE的hasLayout特性会建立一个新的block formatting context

（作者：张克军
链接：http://www.zhihu.com/question/19823139/answer/13079933
来源：知乎）

 
 
 

注：只有普通文档流中块框的垂直外边距才会叠加，行内框，浮动框和绝对定位框之间的外边距是不会叠加的！

精通css 高级web标准解决方案——可视化格式模型-盒模型的更多相关文章

  1. 精通css 高级web标准解决方案——可视化格式模型-定位模型

    CSS 中有三种定位机制:普通流.浮动.绝对定位.(默认为普通流) 改变文档流:display: inline-block; (支持到ie8及以上) 1-匿名块框: <div> 你好! & ...

  2. 精通CSS高级Web标准解决方案（2-1 可视化格式模型之框模型）

    浮动.定位.框模型这些控制在页面上安排和显示元素的方式,形成CSS布局. 盒子模型 页面上的每个元素都被看成一个矩形框. 盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型.他们对盒子模型 ...

  3. 精通CSS高级Web标准解决方案（2-2 可视化格式模型之定位概述）

    视觉格式化模型 块级元素(块框).行内元素(行内框),可以使用display改变生成的框的类型,display:block让行内元素(比如<a>)表现的跟块级元素一样,display:no ...

  4. 精通CSS高级Web标准解决方案（1-1选择器）

    设计代码的结构 使用有意义的标记 css可以控制页面的外观并将表现与内容分隔开. 在分配ID与类名时尽量保证有意义且与表现无关. div可以对块级元素进行分组,而span可以对行内元素进行分组或标识. ...

  5. 精通CSS高级Web标准解决方案（1-3 规划、组织与维护样式表）

    对文档应用样式 对代码进行注释/*......*/ 结构性注释 自我提示 删除注释.优化样式表 样式指南:解释代码与站点的视觉设计是如何组织在一起的 站点结构.文件结构.命名规则 编码标准:(X)ht ...

  6. 精通CSS高级Web标准解决方案（4、对链接应用样式）

    4.1 简单的链接样式 锚可以作为内部引用,也可以作为外部链接,应该区分对待. 伪类选择器: :link 用来寻找没有访问过的链接 :visited 用来寻找已经访问过的链接 a:link{color ...

  7. web前端好书推荐 CSS权威指南《第3版,Bootstrap实战,精通CSS 高级Web标准解决方案 第2版 中文

    在我的新博客中==> http://www.suanliutudousi.com/2017/08/24/web%E5%89%8D%E7%AB%AF%E5%A5%BD%E4%B9%A6%E6%8E ...

  8. 精通CSS高级Web标准解决方案（1-2 层叠与特殊性）

     层叠与特殊性 选择器的特殊性分成四个等级,a.b.c . d 如果样式是行内样式,那么a=1 b=ID选择器的总数 c=类.伪类.属性选择器的总数 d=标签选择器与伪元素选择器数量 例如:style ...

  9. 精通CSS高级Web标准解决方案（7、布局）

    7.1 让设计居中 7.1.1 使用自动空白边让设计居中 <body> <div id="wrapper"> </div> </body& ...

随机推荐

  1. Android 内存泄漏的一些情况。

    最近在维护代码,发现一个自定义View(这个View是在一个AsyncTask的工作线程doInBackground中新建的,在UI线程onPostExecute中添加进window中的)经常会泄漏内 ...

  2. Android Weekly Notes Issue #220

    Android Weekly Issue #220 August 28th, 2016 Android Weekly Issue #220 ARTICLES & TUTORIALS Manag ...

  3. 初识JAVA（二）（送给Java和安卓初学者）----常见错误

    博主接着上篇的来讲哦,以后的更新中,博主会出一些练习题,有兴趣的可以做做然后吧代码粘贴到下面,大家可以一起研究学习,一起进步,本篇文章主要讲的是: 一.常见错误 二.连接上篇一起的训练 无论是什么方向 ...

  4. 如何写出让java虚拟机发生内存溢出异常OutOfMemoryError的代码

    程序小白在写代码的过程中,经常会不经意间写出发生内存溢出异常的代码.很多时候这类异常如何产生的都傻傻弄不清楚,如果能故意写出让jvm发生内存溢出的代码,有时候看来也并非一件容易的事.最近通过学习< ...

  5. 分享一个html+js+ashx+easyui+ado.net权限管理系统

    EasyUI.权限管理 这是个都快被搞烂了的组合,但是easyui的确好用,权限管理在项目中的确实用.一直以来博客园里也不少朋友分享过,但是感觉好的要不没源码,要不就是过度设计写的太复杂看不懂,也懒得 ...

  6. Linq语法学习

    关键词: select from where in into join on equals orderby descending DefaultIfEmpty() thenby submitChang ...

  7. Context值和bool开关

      Context值和bool开关的相关内容 Context值分为2种 系统默认的context值 服务的context值 Context值的作用 主要是防止有未知文件进入目录文件之中(如将病毒拷贝到 ...

  8. Linux paste命令

    Linux paste命令用于合并文件的列. paste指令会把每个文件以列对列的方式,一列列地加以合并. 语法 paste [-s][-d <间隔字符>][--help][--versi ...

  9. [No00009C]Visual Studio在 解决方案资源管理器 里同步定位打开的文件

    标题的意思就是在使用VS的时候,需要我们打开编辑的文件跟解决方案的资源管理器同步显示,这样方便定位到我们在修改哪个文件. 设置如下: 工具——选项——项目和解决方案——在解决方案资源管理器中跟踪活动项 ...

  10. [No000097]程序员面试题集【下】

    1.下面中共包含()个正方形?40 计算规律,设大长方形长是5,宽是4,小正方形边长是1,那么图中.小正方形的个数是,4*5个,边长是2的正方形的个数是3*4个,边长是3的正方形的个数是2*3个,边长 ...