盒子模型是什么
在页面布局时候，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 ，这样就能够完满的解决怪异盒子的问题。