共计 1861 个字符，预计需要花费 5 分钟才能阅读完成。
盒子模型是什么
在页面布局时候，dom 元素所采纳的布局模型，就是艰深意义上的盒子模型。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width: 100px;
height: 30px;
margin: 10px;
padding: 20px;
border: 5px solid chocolate;
}
</style>
</head>
<body>
<div class="box">
content
</div>
</body>
</html>1. 盒子模型包含 外间距 - 边框 - 内间距 - 内容 4 个局部。关上浏览器 F12 查看, 能够清晰的看到盒子的外边距 - 边框 - 内边距和最初的内容结构，这就是整个盒子模型
2. 常见的盒子模型又两种, 能够通过 box-sizing 进行设置
-
border-box(IE 盒子模型) -
content-box(W3C 规范盒子模型)- 当初咱们增加属性
box-sizing:border-box, 能够显著的看到咱们定义的宽度width(100px) = content(50px) + padding(40px) + border(10px)，
- 当初咱们增加属性
那么盒子的宽度就是 `width(100px) + margin(20px) = 120px`
- 批改 `box-sizing: content-box`, 能够看到 `width(100px) = content(100px)`，那么盒子的宽度就是 `width(100px) + padding(40px) + border(10px) + margin(20px) = 170px`
3. 外边距的问题
相邻的两个元素之间的间距，取最大
<style>
.box2{
width: 50px;
height: 10px;
margin: 20px;
padding: 30px;
border: 10px solid seagreen;
}
</style>
<div class="box">
content
</div>
<div class="box2">
content2
</div>- 这里咱们能够看到两个盒子相邻的外边距，是最大的 box2 的外边距
4. 因为 ie 的怪异盒子模型，导致的浏览器显示不统一的解决办法
置信大家不难发现，相比拟 border 而言，咱们的关键问题在于 padding(border 较少), 那么最佳的解决方案，就是能用 margin，就不必 padding。
然而有些状况，不是说不必 padding 就能解决的。那怎么办呢？这里咱们能发现，所有的一切都是因为 width 和 padding/border 同时应用造成的。
那么最终的解决方案就进去了。
能够在盒子内出定义一个无 width 的盒子，将 padding 和 boder 赋值到整个盒子上，里面的盒子。咱们只给 width 和 margin 就能够了。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width: 200px;
margin: 20px;
}
.content{
padding: 20px;
border: 5px solid chocolate;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
content
</div>
</div>
</body>
</html>- 能够看到，咱们外面的盒子尽管没有设置宽度，然而通过里面的盒子包裹，曾经有 200px 的宽度了。正式外层盒子的宽度，然而同时又有 padding 和 border，这样就能够完满的解决怪异盒子的问题。
正文完
