CSS盒子模型

前言

盒子模型（box model）是css中的一个重要概念，它是元素大小的呈现方式

every element in web design is a rectangular box

正文

下面介绍两种盒模型

W3C标准盒模型

QQ--20180426211219-2

IE怪异盒模型

QQ--20180426211219-3

两个盒模型的共同点

1. 都是由四个部分组成：content padding border margin

两个盒模型的不同点：（width为content的宽度）

W3C标准盒模型：

• 元素的宽度=width
• 盒子总宽度=margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

IE盒模型

• 元素的宽度=width + padding + border
• 盒子总宽度=margin-left + width + margin-right

解决以上两种盒模型冲突的办法

CSS3 box-sizing属性

box-sizing: content-box|border-box|inherit;

• content-box（默认）：盒子的宽度=width
• border-box：盒子的宽度=width + padding + border
• inherit：从父元素继承box-sizing属性的值

浏览器兼容：

Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性;Firefox 支持替代的 -moz-box-sizing 属性

所以，为了避免你的页面在不同浏览器下表现不同，最好设置：

html{ box-sizing:border-box; -moz-box-sizing: border-box; } *, *::before, *::after{ -moz-box-sizing: inherit; box-sizing: inherit; }

外边距合并问题

块级元素的上边距和下边距有时会合并或者折叠为一个外边距，大小取其中的最大者，浮动元素和绝对定位元素的外边距不会合并

会出现外边距合并的三种基本情况

1、相邻元素之间

2、父元素和它第一个或最后一个子元素之间

当父元素和它第一个子元素之间没有边框、内边距、行内内容或者清除浮动将两者的margin-top分开；同样的当父元素和最后一个子元素之间没有边框、内边距、行内内容、height、min-height/max-height将两者的margin-bottom分开，那么这时，两个外边距就会合并，子元素的外边距就会溢出到父元素外面（父元素的外边距为两者之和，子元素的外边距为0）;

QQ--20180426211219-4

QQ--20180426211219-5

3、空的块级元素

当一个块级元素中不包含任何内容时，并且在其margin-top和margin-bottom之间没有边框、内边距、行内内容、height、min-height将两者分开，此时外边距会合并

margin合并的计算规则

• 正正取大值：取大的那个值
• 正负值相加：取计算后的值
• 负负最负值：取绝对负值最大的值

margin合并的意义

兄弟元素的margin合并

使图文信息的排版更加舒服自然，保证元素上下间距一致

父子margin合并的意义

在页面中任何地方嵌套或直接放入任何空标签，都不会影响原来的块状布局

自身margin合并的意义

可以避免不小心遗落或者生成的空标签影响排版和布局

阻止以上margin合并的发生

1、阻止margin-top的合并（满足一个条件即可）

• 父元素设置为块状格式化上下文元素（比如overflow:hidden）
• 父元素设置border-top值
• 父元素设置padding-top值
• 父元素和第一个子元素之间添加内联元素进行分隔

2、阻止margin-bottom合并

• 父元素设置为块状格式化上下文元素
• 父元素设置border-bottom值
• 父元素设置padding-bottom值
• 父元素和最后一个子元素之间添加内联元素进行分隔
• 父元素设置height、min-height或max-height

以上需要注意的地方

• 以上情况的组合会产生更复杂的外边距合并
• 即使某一外边距为0，这些规则仍然适用，所以就算父元素的外边距为0，还是会出现第二种情况
• 如果参与合并的外边距中包含负值，合并后的外边距等于最大的外边距与最小的外边距之和
• 如果所有参与合并的外边距都为负值，合并后的外边距等于最小的外边距的值