读到第七章水平格式化，简述原文

水平格式化的七大属性是:margin-left,border-left,padding-left,width,padding-right,border-right,margin-right,这七个属性加在一起的宽度必须是包含块的宽度。

上述七个属性中只有margin-left，margin-right，width，可以设置为auto

我顺势就联想到了left、right这些，垂直格式化的规则和上述一样。

1.实现元素底部不动但高度增加

.first{
        width: 100px;
        position: absolute;
        bottom: 200px;
        top: 100px;
        background-color: green;
    }

<div class="first"></div>

利用调试工具改变top属性的值就可以了。

2.margin:0 auto;居中的原理

利用上述规则，margin-left 和 margin-right 在指定宽度的情况下，等于
(父元素宽度-子元素宽度)/2,两个属性的值是相等的，所以元素就居中了

.second{
        width: 100px;
        height: 100px;
        background-color: green;
        margin: 0 auto;
    }

<div class="second"></div>

3 子元素的宽度比父元素宽度多100px，且相对于父元素居中

.third{
        width: 200px;
        height: 300px;
        border: 1px solid #000;
        margin: 0 auto;
    }
    .third_child{
        /*width 属性默认为auto*/
        margin: 0 -50px;
        background-color: red;
        height: 100px;
    }


 <div class="third">
    <div class="third_child"></div>
    
</div>

上述三个问题曾在我编程生涯的不同阶段困扰过我，有些东西百度都搜不到。