CSS盒模型

CSS盒模型是网页中一个非常重要的部分，所有的HTML元素都是一个盒子，理解了盒模型就可以进行更好的排版。

CSS盒模型将一个HTML元素分成4个部分，分别是 content padding border margin（内容，内边距，边框，外边距）。下面这幅图形象的划分了这四个部分的区域。

margin:外边距，便是边框外的区域，常用于定位HTML元素的位置。

border:边框，围绕在内容和内边距之外。

padding:内边距，在边框和内容之间

content:盒子的内容，用来显示文本和图像。

元素的width(宽度)和height(高度)指的是元素内容的宽度和高度。

元素视觉宽度=左边框+左内边距+内容的宽度+右内边距+右边框

元素视觉宽度 = border-left + padding-left + width +padding-right +border-right 

元素视觉高度=上边框+上内边距+内容的高度+下内边距+下边框

元素视觉高度 = border-top+ padding-top+ height+padding-bottom+border-bottom

具体实例请戳这里 ：点击打开链接