前端入门之盒模型

1、什么是盒模型？

 盒模型规定了网页元素如何显示以及元素间相互关系，它本质上是一个盒子，封装周围的HTML元素。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)，这就是盒模型。

2、内容区域（content area）

 内容区域可以放文字或者是图片，通过wideth、height可以改变内容区域的大小。

3、内边距（padding）

 也称页边距或补白，用来设置内容到边框的距离，内边距会增加盒模型的面积。

首先我们设置一个长宽为100px的盒模型

向左偏移内边距50px

 

我们可以看到盒模型由原来的正方形变成了长方形，并且增加了盒模型的面积。

4.外边距（margin）

  用来设置内容到内容的距离，外边距的设置顺序为上右下左，且在设置外边距的时候往往会遇到两个问题。

   一是叠压现象：叠压现象常出现在兄弟标签之间，常态下，外边距以两者之间大值为准。

 二是塌陷问题：塌陷问题出现的原因是父级的第一个子级是块标签，并且使用了margin或者margin-top。

 让子级向下偏移50px，这时我们可以发现,父级和子级一起向下偏移了50px。

解决方案是父级使用padding、border或overflow-hidden。

5、边框（border）

可以设置内容边框线的粗细、颜色和样式等。