CSS样式——盒子模型

  • 了解盒模型基本组成

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

    CSS样式——盒子模型_第1张图片

    • 元素大小包含了边框
    • 背景色填充只到边框(包括边框)
    • 文字在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值

你可能感兴趣的