什么是CSS盒模型
MDN官网给的解释是：
完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, content —— 合在一起就可以创建我们在页面上看到的内容。
举例说明:
定义一个元素
<div class="box"></div>
给这个元素加上如下样式
.box {
width: 100px;
height: 100px;
border: solid 1px #ddd;
padding: 10px;
margin: 10px;
}
打开控制台，选中元素，如下图这就是盒模型
两种盒模型
- content-box 内容盒 ---- 内容就是盒子的边界----W3C 盒子模型(标准盒模型)
- border-box 边框盒 ---- 边框才是盒子的边界----IE 盒子模型(怪异盒模型)
两种盒模型的区别
宽度和高度的计算方式不同
content-box：
width = content-width
height = content-height
border-box：
width = content-width + padding + border
height = content-height + padding + border
对比图
