盒子模型 水平及垂直方向布局

盒子的水平方向布局

        元素在其父元素的水平方向上的位置由以下几个属性决定：

                margin-left

                border-left

                padding-left

                width

                padding-right

                border-right

                margin-right

        即 元素在其父元素中，水平布局需满足以下等式：

        左右外边距（可设 auto）+左右内边距+宽度(可设 auto)=父元素内容区宽度

        以上等式必须满足，如果等式不成立，称为过度约束，则等式会自动调整

                调整的情况

                        1.如果值中没有 auto 的情况，则浏览器会自动调整margin-right值使等式满足

                        2.如果某个值为auto,则自动调整auto的那个值以使等式成立

.dad{

            width: 800px;

            height: 200px;

            background-color: aqua;

        }

            .baby{

                width: 200px;

                height: 100%;