内元素宽度设为100%为什么会超出外元素

前言

一个元素(外元素)嵌套着另一个元素(内元素)，外元素固定宽度，内元素宽度设置为 100%，但是内元素却溢出了，如图：

看下代码，来分析下什么原因造成的：

	<style type="text/css">
		.wrap {
			width: 500px;
			height: 500px;
			background-color: #ccc;
			margin: 30px auto;
		}
		.inner {
			width: 100%;
			height: 300px;
			background-color: skyblue;
			padding: 20px;
		}
	</style>
	<div class="wrap">
		<div class="inner">我是 内元素 。</div>
	</div>

1.外元素用的是 .wrap 类；内元素用的是 .inner 类。
2.外元素固定宽度 500px ；内元素宽度为 100% ，同时还设置了 padding: 20px;

凭借着做了多年切图仔的经历，内元素溢出的部分就是左右 padding 的那 40px！

一、解决方法

其实这里涉及到了 css盒子模型 的知识点，解决方法就是在 .inner 里加上 box-sizing: border-box; 如下：

	<style type="text/css">
		.wrap {
			width: 500px;
			height: 500px;
			background-color: #ccc;
			margin: 30px auto;
		}
		.inner {
			width: 100%;
			height: 300px;
			background-color: skyblue;
			padding: 20px;
			box-sizing: border-box;
		}
	</style>
	<div class="wrap">
		<div class="inner">我是 内元素 。</div>
	</div>

效果如下：

二、css盒子模型

来自官方的解释:：当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。
每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义（原文：defined by their respective edges，可能意指容纳、包含、限制等）。如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。

也就是说，我们可以把一个元素看作是一个盒子，这个盒子由四部分组成：内容 + 内边距 + 边框 + 外边距。

1. 内容就是元素存放文本等等区域。
2. 内边距就是 padding 的间距。
3. 边框就是 border 的间距。
4. 外边距就是 margin 的间距。

如下图：

最中间 500x300 的浅蓝区域就是内容区域，以此向外依次为，内边距、边框、外边距。

而在标准的盒子模型下，元素的宽度 = 内容宽度 + 内边距 + 边框宽度

三、内元素超出外元素的原因

所以之前内元素溢出的原因就是：

• 设置了 width:100%; 此时的 内容宽度 已经等于外元素的宽度，即 500px。
• 因为设置了 padding: 20px;，所以此时内元素的实际宽度为 500px + 20px + 20px = 540px，比外元素 500px 的宽度超出了 40px，所以就溢出了。

四、box-sizing

box-sizing 是用来定义如何计算元素的宽度和高度，属性值如下：

1. box-sizing: content-box; 这是默认值，标准盒子模型。width 与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。
2. box-sizing: border-box; width 和 height 属性包括内容，内边距和边框，但不包括外边距。

所以用 box-sizing: border-box; 就可以解决内元素宽度为100%时超出外元素的问题了。