前言
一个元素(外元素)嵌套着另一个元素(内元素),外元素固定宽度,内元素宽度设置为 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。
也就是说,我们可以把一个元素看作是一个盒子,这个盒子由四部分组成:内容 + 内边距 + 边框 + 外边距。
- 内容就是元素存放文本等等区域。
- 内边距就是 padding 的间距。
- 边框就是 border 的间距。
- 外边距就是 margin 的间距。
如下图:
最中间 500x300 的浅蓝区域就是内容区域,以此向外依次为,内边距、边框、外边距。
而在标准的盒子模型下,元素的宽度 = 内容宽度 + 内边距 + 边框宽度
三、内元素超出外元素的原因
所以之前内元素溢出的原因就是:
- 设置了 width:100%; 此时的 内容宽度 已经等于外元素的宽度,即 500px。
- 因为设置了 padding: 20px;,所以此时内元素的实际宽度为 500px + 20px + 20px = 540px,比外元素 500px 的宽度超出了 40px,所以就溢出了。
四、box-sizing
box-sizing 是用来定义如何计算元素的宽度和高度,属性值如下:
- box-sizing: content-box; 这是默认值,标准盒子模型。width 与 height 只包括内容的宽和高, 不包括边框(border),内边距(padding),外边距(margin)。
- box-sizing: border-box; width 和 height 属性包括内容,内边距和边框,但不包括外边距。
所以用 box-sizing: border-box; 就可以解决内元素宽度为100%时超出外元素的问题了。