CSS盒模型

【逆战班的课程讲解】

一、什么是盒模型

   盒模型是用来控制元素与元素之间或者元素与内容之间的位置关系，它是css布局的基础，它规定了网页元素如何显示以及元素之间的相互关系。
   在css中，每一个元素都可以拥有一个像盒子一样的外形，我们可以通过这种盒子一样的模型来控制每个元素之间的距离。
  就好比咱们写两个div，之后给他们分别加上宽高和浮动，但是这个时候两个div是并排贴在一起显示，
  但是咱们的设计稿在两个div之间有一个30像素的空隙，那怎么这个时候就需要按照设计稿来将两个div之间分隔开，具体如何分割呢？

二、盒模型的组成与应用

 1、盒模型咱们就必须要有个盒子一样的元素，在正常情况下，这个元素是只有内容区的，
 所以在这种情况下，咱们可以通过缩小他们的内容区，并且保证盒子大小不变的情况下，
 来实现两个元素之间的间距效果。
 此时咱们就需要用到一个属性padding。padding值的大小可以控制父子元素之间的大小，
 还可以控制元素与内容之间的大小。咱们可以通过给元素添加padding值来控制相邻两个元素之间的间距，
 但是padding属性有一个特点，就是如果给元素添加了padding值，那么，要在这个元素原有的宽和高上减掉padding值。
 什么意思呢，打个比方，假设咱们给一个div设置了宽100px，高100px的大小，但是咱们需要给他加10个像素的padding值，
 那么我们就必须在100x100的原有大小的基础上上下左右分别减掉10个像素的padding值，也就变成了80x80的大小。
 2、如果咱们现在不想去减这个后来加上的padding值，但是我们仍想要达到元素与元素之间有间距的效果，
 我们该怎么办呢，我们就需要用到盒模型的另一个属性，margin属性。
 margin属性与padding属性不同的地方在于，padding撑大了盒子，我们需要减，margin没有撑大盒子我们不用去减。
 这两个属性在应用中，需要根据实际的设计稿或者排版过程中的需求去交替使用。
 3、咱们接下来就来说说在代码中具体应该怎么去应用。
 padding与margin的写法上有相似的地方。
 当你写4个值的时候：padding：30px 20px 10px 5px；
 这个属性属性值代表了给这个元素一个上面30个像素，右面20个像素，下面10个像素，左面5个像素的padding值。
 当你写三个值时，就代表了：padding：上  左和右   下；这三个属性值。
 当你写两个值，就代表了：padding：上和下  左和右；这两个属性值。
 写一个值的时候，就代表了元素的一周都是这个padding值，而margin的写法与padding基本一样。
 4、padding值得特点有两个，一个是不会对背景图片起作用，
 另一个是padding撑开的盒子区域如果有背景图背景图会撑满。
 5、margin值的特点一个是，上相排列的两个元素，如果上面的元素加了margin-bottom，下面的元素加了margin-top，那么这两个值在页面中会重叠显示。
 另一个特点是当父元素里的**第一个**子元素添加了margin-top时，会错误的把这个值添加给了父元素，
 从而显示的效果不正确，达不到我们需要做出来的样式。当然这种情况也是有限制的，这种情况只发生在第一个子元素为块状元素，
 并且没有添加边框和浮动两个属性的前提下。
 这个问题的解决方法，是咱们可以给父元素添加一个overflow：hidden；属性，
 或者是给父元素和子元素添加浮动属性，
 再或者给父元素添加边框，
 还有一种解决方案就是咱们不用margin，用padding值来实现我们想要的效果就可以了。