HTML学习日记day06（盒模型）

HTML学习日记day06

盒模型

margin 设置外边距

       margin-top 设置元素上边的外边距
       margin-right 设置元素右边的外边距
       margin-bottom 设置元素下边的外边距
       margin-left 设置元素左边的外边距
    合写
        margin :上 右 下 左：
        上 = 下 右 ！= 左
        margin:上 右 下 左;

        上 != 下 右 = 左
        margin:上 右 下;

        上 = 下 右 = 左
        margin:上 右;

        上 = 下 = 右 = 左
        margin:上;

margin的经典bug

1.上下两个兄弟元素的margin重叠问题

      上下两个兄弟标签，设置margin的时候，他们之间的距离不是相加，而是谁设置的margin值大
      ，就显示谁的距离，既为值大的覆盖小的

      可以理解为上面元素的 margin-bottom 和下面元素的 margin-top他们的值取最大的一个

      解决方法：给下面的元素添加 display: inline-block;

2.父子级子元素的margin-top传递问题

        在子元素中设置margin-top，表现得到结果是该margin-top传递到了父级元素上，使得父元素距离他上面的元素为该margin-top
        解决方法：
          a.给父元素添加 overflow: hidden;
          b.给父元素添加 border

重置样式

/* 重置样式，把所有标签的 内外边距设置为0 */
        *{
            margin: 0;
            padding: 0;
        }