• 理解盒模型根本组成

    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:数值
    1. 复合写法：
    示意周围都设置：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:数值
    1. 复合写法：
    示意周围都设置：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值