今天这篇笔记讲讲CSS中一个很基础但是很重要的概念——盒模型：什么是盒模型？网站上展示的是一个一个的盒子，在页面上排列成四个方块，如下图，学习盒子模型为我们学习定位、布局等高级样式技巧打下了基础。盒子模型的构成直接看这张图：Content：内容区域，也就是你在代码中放入元素的内容，比如文本，子元素等Border：边框，也就是HTML元素的边框，可以使用border设置边框的宽度、颜色、样式Padding：内边距，即Border（边框）和Content（内容）之间的距离Margin：外边距，即HTML之间的距离元素及其旁边的其他元素盒子模型根据盒子宽高的计算方式，我们可以将其分为两类，通过box-sizing属性设置标准盒子模型：content-box，默认IE盒子模型:border-box标准框模型(content-框的特征)是：HTML元素的真实宽度=CSS宽度(width)+padding+你设置的border，高度是一样的。IE框模型（border-box）的特点是：HTML元素的真实宽度=你设置的CSS宽高相同。比如这个HTML的宽度=200+152+102=250和这个HTML的宽度=200
