【HTML基础教程】11、盒子模型使用技巧及相关问题

margin相关技巧

1、设置元素水平居中： margin:x auto;

.box{
    width: 200px;
    height: 200px;
    background-color: gold;
    /* margin设置元素水平居中:auto */
    margin: 10px auto 10px auto;
    /* 简写如下：上边距100px、左右自动计算元素居中、下边距60px */
    margin: 10px auto 10px;
}

<div class="box"></div>

效果如下：（元素水平居中）

2、margin负值让元素位移及边框合并

.box2{
    width: 202px;
    height: 156px;
    background-color: gold;
    /* margin: 100px auto; */
}
.box2 div{
    width: 200px;
    height: 30px;
    border: 1px solid green;
    margin: -1px;
}

<div class="box2">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

效果如下：

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：

1、使用这种特性

.margin_box{
    width: 500px;
    border: 1px solid black;
    margin: auto;
}
.margin_box div{
    margin: 20px;
}

<!-- 利用margin垂直边距合并的特性进行布局 -->
<div class="margin_box">
    <div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
    <div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
    <div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
    <div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
    <div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
</div>

效果如下：

2、设置一边的外边距，一般设置margin-top

    只设置盒子的上边距来解决问题

3、将元素浮动或者定位

margin-top 塌陷

在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：

1、外部盒子设置一个边框

2、外部盒子设置 overflow:hidden

3、使用伪元素类

margin-top塌陷实例：

.con{
    width: 300px;
    height: 300px;
    background-color: gold;
.con1{
    width: 200px;
    height: 100px;
    background-color: green;
    margin-top: 100px;
    margin-left: 50px;
}

<div class="con clearfix">
    <div class="con1"></div>
</div>

塌陷效果图如下：子元素设置了margin-top会作用于父元素上

解决代码如下：

.con{
    width: 300px;
    height: 300px;
    background-color: gold;
    /* 解决子元素margin-top塌陷：1、设置父元素边框 */
    /* border: 1px solid #000; */
    /* 解决子元素margin-top塌陷：2、设置overflow:hidden （会把溢出裁切掉） */
    /* overflow: hidden; */
}
/* 解决子元素margin-top塌陷：3、使用伪元素类 */
.clearfix:before{
    content: "";
    display: table;
}
.con1{
    width: 200px;
    height: 100px;
    background-color: green;
    margin-top: 100px;
    margin-left: 50px;
}

<div class="con clearfix">
    <div class="con1"></div>
</div>

解决后的效果如下：