CSS(三)——盒模型问题及外边距合并2. 嵌套关系：

盒模型

盒模型包括：

元素
内边距
边框
外边距

元素实际看到的大小：（height/width）+padding + border

通配符选择器：避免因为浏览器不同产生的边距问题

*{
    margin：0；
    padding：0；
}

外边距

margin:
margin-top:
margin-right:
margin-bottom:
margin-left:
图片在父元素中水平居中： margin: 0 auto;

内边距

padding：形式如上

边框

border: 10px solid black;
border-width:大小
border-style:形式 
solid 实线 dashed 虚线 dotted 点状 double 双线
border-color：颜色

##外边距合并问题

并列关系

<div id="wrapper"> div1</div>
<div class="main">div2</div>

会产生如下情况：

就会发生边距合并的问题

解决方法：给任意一个元素加一个外边距
#wrapper{
        width: 100px;
        height: 100px;
        /* margin-bottom: 90px; */
        background:aqua;
    }
     .main{
        width: 100px;
        height: 100px;
        background: pink;
        margin-top: 50px; 
    }

效果如下：

2. 嵌套关系：

<div class="parent">
    <!-- parent -->
    <div class="child"></div>
  </div>

当给子元素加一个外边距时会产生如下问题：

.child{
      width: 100px;
      height: 100px;
      margin-top: 20px;
      background: green;
     }

不难发现，父元素和子元素一起串下来了

解决办法

给父元素加上溢出隐藏 overflow：hidden
给父元素加上边框 border
给父元素或者子元素加上绝对定位 position：absolute
给父元素或子元素加上浮动 float

.parent{
      width: 198px;
      height: 200px;
      /* margin-top: 50px; */
      background: red;

      /* 溢出隐藏 */
      /* overflow: hidden; */
      /* 绝对定位 */
      /* position: absolute; */
      /* 浮动 */
      /* float: left; */
      border: 1px solid transparent;
    }
    .child{
      width: 100px;
      height: 100px;
      margin-top: 20px;
      background: green;
      /* position: absolute; */
      /* float: left; */
    }

效果如下：