day7 盒模型

1. 盒模型

1）内容区 content

• 特点：

  • 内容区的大小由width和height决定
  • 内容区是文字，图片等的显示区域

2）内填充 padding/padding-方向

• 值的设置：

  padding: 10px; 一个值， 设置四周

  padding: 10px 20px; 两个值， 上下 左右

  padding: 10px 20px 30px; 三个值， 上 左右 下

  padding: 10px 20px 30px 40px; 四个值， 顺时针 上右下左

• 特点：（四点）

  • padding会撑大盒子。如果不想撑大，要在原来的宽高基础上减去对应方向的padding值
  • 背景图和背景色可以在padding区域显示
  • padding 不可以设置负数

  • padding可以用来调整内容和盒子边缘之间的距离

    示例

    
    
    
        
        
        
        
    
    
        
    盒子
    
    

    结果：

3) 外边距 border/border-方向

4) 外边距 margin/margin-方向

• margin 值的设置和padding值设置一样 margin/margin-方向
• 单方向margin-方向（left/right/top/bottom）: 数值+px

• 特点：（四点）

  • margin不会撑大盒子，但是会影响别人
  • margin区域不会显示背景图/背景色
  • margin可以设置负数， 负数会让两个盒子重叠在一起
  • margin可以用来调整盒子和盒子之间的距离

• margin 的两个bug

  • （1）margin的重叠

    • 给上面的元素添加下边距，给下面的元素添加上边距之后，会产生margin的重叠，且值取最大值。

      左右不会重叠，会相加。

  • （2）margin的传递（当给元素的 第一个子元素 添加 margin-top 的时候，会错误的加在父元素身上）

    • 解决方法：

      • 用padding设置
      • 给父元素加边框
      • 给父元素添加overflow: hidden(溢出隐藏)
      • 给父元素或者该元素添加浮动