07 css盒模型

盒模型

盒模型：在html中每一个标签都具有一个盒模型

一、盒模型的组成部分

1. content（内容）

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

2. padding（内边距）

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

3. border（边框）

   指的是元素的边框

4. margin（外边距）

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

二、padding 设置内边距

padding-top：num; 设置上边距

padding-right：num; 设置右边距

padding-bottom：num; 设置下边距

padding-left：num; 设置左边距

• 合写：

  padding：上 右 下 左;

• 左=右 上!=下

  padding:上 右 下;

• 左=右 上=下

  padding:上 右;

• 左=右=上=下

  padding:上;

三、 margin 设置外边距

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

margin-right：num; 设置元素右边的外边距

margin-bottom：num; 设置元素下边的外边距

margin-left：num; 设置元素左边的外边距

• 合写

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

水平居中

margin 的左右方向可以设置自适应 auto，这样他所修饰的块属性标签就会在水平方向上自动居中
注意：auto 只能控制水平方向的自动居中，不能控制垂直方向的自动居中

margin：0 auto;

auto的原理
auto的值 = (父元素的宽度-当前元素的宽度)/2;

---

通常在css刚开始就设置

/* 重置全局标签的内外边距 */
        *{
            margin: 0;
            padding: 0;
        }