首先需要说明，盒子模型是针对HTML元素的每一个标签的！因为HTML中每一个标签都符合盒子模型的特点！
块元素的特点：会随着浏览器的大小变化进行自适应！
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。如下所示：
需要注意：
盒子是由三部分组成的，即：盒子壁【border】+内边距【padding】+内容区【content=width+height】
而盒模型是由四部分组成的，即：外边距【margin】+盒子壁【border】+内边距【padding】+内容区【content=width+height】
从上面这幅图也可以看出，我们平时设置的height和width是盒模型中的内容区部分！padding内边距区是不允许放内容的，内容是放在内容区的！
如下所示:
1 <style type="text/css"> 2 div{ 3 width:100px; 4 height:100px; 5 border:10px solid red; 6 padding:50px; 7 } 8 </style> 9 </head> 10 <body> 11 <div>韭菜盒子韭菜盒子韭菜盒子</div> 12 </body>