盒模型day06

盒模型 

        在html中每一个标签都具有一个盒模型        盒模型的组成部分：content（内容），padding（内边距）， border（边框），margin（外边距）

content：标签元素内容，一般自定义宽和高，或者由内容撑开宽和高

padding：设置元素内容到元素边框之间的距离

border：指的是元素的边框

margin：设置当前元素到相邻元素之间的距离

设置内边距padding

        padding-top: num 设置上边距

        padding-right: num 设置右边距

        padding-bottom: num 设置下边距

        padding-left: num 设置左边距

合写：

        padding：上 右 下 左；

       

        左=右 上!=下

        padding：上 右 下；

        左=右 上=下

        padding：上 右；

        左=右=上=下

        padding：上；

margin 设置外边距

        margin-top 设置元素上边的外边距

        margin-right

        margin-bottom

        margin-left

合写

        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