1.盒子模型概述
在“CSS盒子模型”理论中，页面中的所有元素都可以看成一个盒子，并且占据着一定的页面空间
一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两个方面来理解：一是理解单独一个盒子的内部结构（往往是padding），二是理解多个盒子之间的相互关系（往往是margin）
盒子模型是由4个属性组成的：content（内容）、padding（内边距）、margin（外边距）和border（边框）
2.宽高：width、height
元素的宽度（
width）和高度（height）是针对内容区而言的🙌
只有块元素才可以设置width和height，行内元素是无法设置width和height的。
3.边框：border
例如：
border:1px solid red;
第1个值指的是边框宽度（border-width），第2个值指的是边框外观（border-style），第3个值指的是边框颜色（border-color）
4.内边距：padding
内边距padding，又常常被称为“补白”，它指的是内容区到边框之间的那一部分。内边距都是在边框内部的
内边距分为4个方向：padding-top、padding-right、padding-bottom、padding-left
语法：
padding:像素值; padding:像素值1 像素值2; padding:像素值1 像素值2 像素值3 像素值4;
“padding:20px;”表示4个方向的内边距都是20px。
“padding:20px 40px;”表示padding-top和padding-bottom为20px，padding-right和padding-left为40px。
“padding:20px 40px 60px 80px;”表示padding-top为20px，padding-right为40px，padding-bottom为60px，padding-left为80px。
实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>IMUSTCTF</title> <style type="text/css"> div { width: 200px; height: 200px; padding: 80px 20px; } </style> </head> <body> <div> 我的世界 </div> </body> </html>
5.外边距：margin
外边距margin，指的是边框到“父元素”或“兄弟元素”之间的那一部分。外边距是在元素边框的外部的
外边距分为4个方向：margin-top、margin-right、margin-bottom、margin-left
实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>IMUSTCTF</title> <style type="text/css"> div { width: 200; height: 200px; padding: 80px 20px; margin: 50px 50px; } </style> </head> <body> <div> 我的世界 </div> </body> </html>
该实例的盒子模型：
