CSS样式——盒子模型

• 了解盒模型基本组成

  1. 外间距：margin
  2. 内间距：padding
  3. 边框：border
  4. 内容区域：content

  

  • 元素大小包含了边框
  • 背景色填充只到边框（包括边框）
  • 文字在content区域添加

• 了解内间距

  1. 用于调整子元素与父元素之间空隙大小
  2. padding设置时，会撑大盒子宽高，设置盒子宽高时需要减去padding的值，或者设置box-sizing为border-box
  3. padding不支持负数，也不支持auto
  4. 当盒子不设置宽高时，由内容撑开时，不需要减去padding的值
  5. padding的设置，不影响背景图

• 设置内间距

  1. 单一方向设置：

  上内间距：padding-top:数值
  下内间距：padding-bottom:数值
  左内间距：padding-left:数值
  右内间距：padding-right:数值

  2. 复合写法：

  表示四周都设置：padding：10px 
  表示上下、左右设置：padding：10px 20px
  表示上、左右、下设置：padding：10px 20px 30px
  表示上、右、下、左设置：padding：10px 20px 30px 40px

• 了解外间距

  1. 用于调整元素与元素之间的间距
  2. margin不影响盒子大小
  3. margin支持负数和auto
  4. margin:0 auto 时，表示盒子水平居中

• 设置外间距

  1. 单一方向设置：

  上外间距：margin-top:数值
  下外间距：margin-bottom:数值
  左外间距：margin-left:数值
  右外间距：margin-right:数值

  2. 复合写法：

  表示四周都设置：margin：10px 
  表示上下、左右设置：margin：10px 20px
  表示上、左右、下设置：margin：10px 20px 30px
  表示上、右、下、左设置：margin：10px 20px 30px 40px

• 盒模型尺寸计算方式

  box-sizing:content-box
  
    1. 默认计算方式，盒子尺寸不包括边框、内间距、内容：content-box
    2. 内减计算方式，盒子尺寸包括边框、内间距、内容：border-box
    3. 继承父元素盒尺寸计算方法：inherit

• margin存在问题与解决

  1. margin-top传递问题：

     • 当父元素内的子元素设置margin-top时，这个间距将传递给父元素
     • 解决：
       给父元素添加overflow:hidden
       给父元素添加一个透明边框

  2. 两个元素之间高度塌陷问题：

     • 当上面元素设置margin-bottom，并且下面元素设置margin-top时，浏览器解析时，他们之间的间距取外间距最大的值
     • 解决：
       给下面元素添加一个父元素，并给父元素添加overflow：hidden
       只给一个元素设置margin值