盒子模型的基础了解和运用（1）

什么是盒子模型

当你的浏览器展现一个元素时，这个元素会占据一定的空间。这个空间由四部分组成。

中间是元素呈现内容的区域。这个区域的外面是内边距。再外面是边框。最外面的是外边距，外边距将该元素与其它元素分开。

内边距，边框和外边距在元素的上、右、下、左都可以有不同的大小。所有这些大小值都可以为0。

盒子模型的组成部分

一个盒子模型的组成由四部分组成：

• 内容盒（content box）
  对于整个页面来说内容盒的内容可以说是元素内容的集合，每一个能进行内容填充的元素都有自己的内容盒，且单个元素有且只有一个内容盒。可以通过box-sizing属性来对盒子类型进行设置。
• .填充盒（padding）
  同样的填充盒也是用户在网页上能够直接看到的，它的具体表现形式可以看做是同一个元素中内容之间的间距，其中padding即为内边距的解释。
  内边距总是跟元素的背景色（backgrand-color）一样，所以当你设置背景色时，你会发现背景色在元素本身和内边距上都生效了。
• 边框（border）
  border顾名思义既是边框的含义，你可以用边线或者边框来装饰元素。
  用 border 属性给元素四周指定统一的边框。在属性值中指定边框的宽度（通常是以显示到屏幕上的像素为单位）， 样式， 还有颜色（border-color）。
• 外边距（margin）
  外边距默认是透明的，可以理解为外边距是盒子到整个浏览器上下左右的距离，但是需要注意的是不同盒子之间也是存在外边距的。不同的浏览器可能外边距的默认设置不同，具体视不同浏览器而定，在实际开发过程中我们都会默认将其设置为0px大小，即margin： 0px；

盒子的类型

• 盒子的类型：分为行盒和块盒
• 行盒：页面的具体内容（文字、图片、多媒体）都会生成行盒，文字：必须放在在行盒中，否则会生成匿名行盒， 图片、多媒体默认会生成行盒，通常解释行盒元素是不换行的，我们可以理解为行盒不包含常见的行盒元素有文本元素（如：b，strong,u等） 其他元素如span a img
• 块盒： 块盒包含行盒，块盒内放置行盒，行盒内尽量不放置块盒，常用的块级元素有div，