乐趣区

关于前端学习:CSS样式盒子模型

jiezi

  • 理解盒模型根本组成

    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 值
退出移动版