CSS复习--盒模型的水平、垂直方向布局和外边距的折叠

目录

元素水平方向的布局

垂直方向的布局

外边距的折叠

---

元素水平方向的布局：

/*
元素的水平方向的布局：
    元素在其父元素中水平方向的位置由以下几个属性共同决定：
        margin-left
        border-left
        padding-left
        width
        padding-right
        border-right
        margin-right
                        
    一个元素在其父元素中，水平布局必须要满足以下的等式：
        margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度（必须满足）
            -以上等式必须满足，如果相加结果使等式不成立，则称为过度约束，则等式会自动调整
            -调整的情况：
                -如果这七个值中没有为auto的情况，则浏览器会自动调整margin-right值以使等式满足
            -这七个值中有三个值可设置为auto
                width
                margin-left
                margin-right

            -如果某个值为auto，则会自动调整为auto的那个值以使等式成立


        -如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距自动为0
        -如果将三个值都设置为auto，则外边距都是0，宽度最大
        -如果将我们两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值
            所以我们经常利用这个特点来使一个元素在其父元素中水平居中
        示例：
            width:xxxpx;
            margin:0 auto;
*/

垂直方向的布局：

/* 
默认情况下父元素的高度被内容撑开
*/

/* 
子元素是在父元素的内容区中排列的，
    如果子元素的大小超过了父元素，则子元素会从父元素中溢出
    使用overflow属性来设置父元素如何处理溢出的子元素
    overflow可选值：
        visible：默认值，子元素会从父元素中溢出，在父元素外部的位置显示
        hidden：溢出的内容将会被裁剪不会显示
        scroll：生成两个滚动条，通过滚动条来查看完整的内容
        auto：根据需要生成滚动条

        overflow-x：如果它溢出了元素的内容区是否剪辑左/右边缘内容。
        overflow-y：来判断顶部和底部边缘是否裁剪。
*/

外边距的折叠：

/* 
垂直外边距的重叠（折叠）
    -相邻的垂直方向外边距会发生重叠现象

-兄弟元素
    -兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）
    -特殊情况：
        如果相邻的外边距一正一负，则取两者的和
        如果相邻的外边距都是负值，则取两者中绝对值较大的

    -兄弟元素之间的外边距的重叠，对于开发时有利的，所以我们不需要进行处理


-父子元素
    -父子元素间相邻外边距，子元素的会传递给父元素（上外边距）
    -父子外边距的折叠会影响到页面的布局，必须要进行处理        
*/