对于标准盒模型和 IE 盒模型你了解多少？

盒模型讲解

我们今天只会提到标准盒模型，和 IE 盒模型，两种盒模型模式讲解。首先来看标准盒模型。
只要是盒模型都会有这四个属性 margin, border, padding, content 这四个部分。也就是说一个基本的盒模型由着四部分组成。样子如下：
这里要说明的是，为了体现出盒模型的层次感。这里的 content 和 padding 用了
不痛的颜色（红色，白色），正常来说，我发单独设置 padding 的颜色。也就是说 padding 和 content 内容区的背景颜色是一致的。
盒模型，就像盒子一样。也是 box 直译过来的。这四部分合理的配合，能做出页面布局。每个元素都可以看成一个个盒子，并且每个元素在页面中，给我们的直接感受，就是占据屏幕的大小。但是标准模式盒模型，它是很“贪心“的，这个要从它的占地面积说起。
我们都知道标准模式的盒模型的宽高的计算公式

元素宽度 = borderLeft + paddingLeft + width + paddingRight + borderRight。
元素高度=borderTop+paddingTop+height+paddingBottom+borderBottom

这里说到的元素宽度和高度，指的是实际占据的宽高，而且在标准模式盒模型下，我们设置的width 和 height 指的是 content’（内容区）的宽高。并不是他的实际宽高。
Like this：

CSS：

width: 100px; height: 100px; background: lime; padding: 10px;
border: 2px solid #f20;
}

根据上面的公式：

Div 的实际占地宽度为： 100+ 20 +4 = 124px; 通过我们上面的截图，我们也能看出来是这样的。
对于这种贪婪特性（尽可能向外扩张）。对于布局来说，可能有些同学已经习惯
了这种布局的方式，毕竟刚开始我们我们就是这么学过来的。随着代码的积累，发现一些问题：我们先定制内容的大小，然后在修改 padding 和 border 导致的盒子的具体大小由这三部分决定。对于一个盒模型来说变数太大。

大家想想开发商买地盖房子。先是圈地，然后在块土地里面进行操作，盖几幢房子。绿化面积比，太阳高度角多大等等等。这样的话，我们位置一旦分配好了。就不用我们管了。你只能在内部改造。不可动用外部的区域。更容易限定，更容易布局。土地交易局不管你，房屋多大（content），绿植面积（padding），栅
栏宽度（border）怎么分配，你就告诉我，你要多大就完了。

对于这种情况，就涉及到 IE 盒模型，也有一个尊称叫“怪异盒模型”。对于 IE 盒模型他还是很传统的，只在特定区域内去分配自己的空间。
举个栗子： ‘
代码：

box-sizing: border-box; width: 100px;
height: 100px; padding: 20px; border: 10px; margin: 20px; background: red;}

我们看到的这个盒模型就是 IE 盒模型，给定宽度 100 边框 10 内边距 20 自己所剩下的宽度为：
100 – 10 -20 -20 -10= 40；

这里面我们看到除了外边框，以及内边距剩下的区域才是 content 的区域。在这里面涉及到一个新的属性 box-sizing.。用于设置盒模型的模式。
Box-sizing 存在两个属性值

content-box 默认值，也就是标准模式盒模型。

Border-box，设置为 IE 模式盒模型。

border-box 的优势：
border-box 的诞生，主要就是解决 content-box 的最大缺点。border-box 意味着子容器的 padding 和 border 的厚度都算在 50之内，这样，你可以随意的修改 padding 和 border 的厚度值，根本不用担心父容器被撑爆。
border-box 是事实的标准？

现在最著名的 CSS 框架几乎都采用了 border-box，所以它才是事实的标准。框架想要具备栅格系统，就肯定要去使用 border-box，如果用 content-box 会有一种想死的感觉。

接下来说说盒模型存在两个经典 BUG——margin 塌陷和合并

margin 塌陷：

父子嵌套元素在垂直方向的 margin,父子元素是结合在一起的,他们两个的 margin

会取其中最大的值.

正常情况下,父级元素应该相对浏览器进行定位,子级相对父级定位.

但由于 margin 的塌陷,父级相对浏览器定位.而子级没有相对父级定位,子级相对父级就像坍塌了一样。

margin 塌陷的解决办法
1.给父级设置边框或内边距(不建议使用)
2.触发 bfc(块级格式上下文),改变父级的渲染规则
方法:
改变父级的渲染规则有以下四种方法,给父级盒子添加
(1)position:absolute/fixed
(2)display:inline-block;
(3)float:left/right
(4)overflow:hidden
margin 合并
两个兄弟结构的元素在垂直方向上的 margin 是合并的。
在 margin 合并这个问题上,我们一般不用 bfc,而是通过只设置上面的元素的
margin-bottom 来解决距离的问题。

标准盒模型和 IE 盒模型相关推荐

标准事件模型和IE事件模型
前言:在上一篇博客中总结了0级DOM事件模型和2级DOM事件模型,打铁趁热就在谈谈标准事件模型和IE事件模型的区别吧. 一. 标准事件模型在JavaScript中把标准事件模型的执行分为三个阶段,即 ...
Css盒模型有哪几部分，标准盒模型和IE盒模型有哪些区别
首先介绍Css的盒模型也就是标准盒模型(BOX Model) 包含了内容(content) 内边距(padding) 边框(border) 外边框(margin) 这是大家经常用到的,也是现在的标准 ...
前端面试题 | 标准盒模型和IE盒模型的区别？
两者的区别在于content的不同,IE盒模型的content包含border,padding W3C盒子模型(又称之为标准盒模型)的范围包括margin.border.padding.content ...
详解OSI七层模型和TCP/IP模型
详解OSI七层模型 1. 详解OSI七层模型 1.1 详解每层结构 1.2 交换机和路由器的区别 1.3 集线器与路由器在功能上有什么不同 2. 详解TCP/IP模型 2.1 详解每层结构 2.2 O ...
OSI 七层模型和TCP/IP模型及对应协议
OSI 七层模型和TCP/IP模型及对应协议图: 完成中继功能的节点通常称为中继系统.在OSI七层模型中,处于不同层的中继系统具有不同的名称. 一个设备工作在哪一层,关键看它工作时利用哪一层的数据头部 ...
李奎元：说说那些征信模型（Z计分模型、巴萨利模型和A值模型）
李奎元称:根据企业信用管理理论,5C原则是指考察客户信用价值的5个因素,即品行(character).能力(capacity).资本(capital).担保品(collateral)和环境状况(con ...
OSI 七层模型和TCP/IP模型及对应协议（详解）
OSI 七层模型和TCP/IP模型及对应协议(详解) 查看全文 http://www.taodudu.cc/news/show-6185847.html 相关文章: OSI7层网络模型协议精析 OSI ...
OSI模型和TCP/IP模型
OSI模型开放式系统互联通信参考模型(英语:Open System Interconnection Reference Model,缩写为 OSI),简称为OSI模型(OSI model),一种概念 ...
基于JVM原理、JMM模型和CPU缓存模型深入理解Java并发编程
许多以Java多线程开发为主题的技术书籍,都会把对Java虚拟机和Java内存模型的讲解,作为讲授Java并发编程开发的主要内容,有的还深入到计算机系统的内存.CPU.缓存等予以说明.实际上,在实际的 ...

标准盒模型和 IE 盒模型

对于标准盒模型和 IE 盒模型你了解多少？

标准盒模型和 IE 盒模型相关推荐

最新文章

热门文章