3.2 盒子模型布局

最新推荐文章于 2024-11-01 10:52:38 发布

dxt_snow

最新推荐文章于 2024-11-01 10:52:38 发布

阅读量186

点赞数

分类专栏： HTML&CSS 文章标签： css html5 外边距布局 margin

本文链接：https://blog.csdn.net/qq_37665301/article/details/107994127

版权

HTML&CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

3.2 盒子模型布局

水平布局

右外边距（margin-right）的特殊性
一个等式
当等式不成立是浏览器的调整，设置auto与不设置会进行不同的调整，有三个值可以设置auto，设置的情况不同，调整也不相同。

代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>盒子模型水平布局</title>
        <style>
            .outer{
                width: 800px;
                height: 200px;
                border: 10px red solid;
            }
            .inner{
                /* width的值默认为auto */
                width: auto;    
                height: 200px;
                background-color: #bbffaa;
                /*  
                    元素的水平方向布局
                        元素在其父元素中水平方向的位置由以下几个属性共同决定：
                            margin-left
                            border-left
                            padding-left
                            width
                            padding-right
                            border-right
                            margin-right
                        
                        一个元素在其父元素中，水平布局 必须 满足以下的等式：
                            上述七个属性值之和 = 其父元素内容区宽度之和
                            0 + 0 + 0 + 200 + 0 + 0 + 0 = 800
                                - 以上等式必须满足，如果相加结果使等式不成立（如上式），
                                    则称为 过度约束 ，则等式会自动调整
                                - 调整的情况
                                    - 如果这七个值中没有 auto 的情况，则浏览器会自动调整
                                        margin-right的值以使等式满足，修改后的等式如下：
                                        0 + 0 + 0 + 200 + 0 + 0 + 600 = 800
                                    - 这七个值中有三个值可以设置为 auto 
                                        width
                                        margin-left
                                        margin-right
                                        - 如果某个值为 auto，则会自动调整 设为auto的那个值 以使
                                            等式成立
                                        0 + 0 + 0 + auto + 0 + 0 + 0 = 800  auto=800
                                        0 + 0 + 0 + auto + 0 + 0 + 200 = 800  auto=600
                                        - 如果一个 宽度 和一个 外边距 设置为auto，则宽度调整为最大
                                            外边距调整为0
                                        - 如果三个值都设为 auto,则宽度调整为最大，两个外边距都为0
                                        - 如果两个外边距设为 auto, 宽度为固定值，则此时两外边距会被
                                            调整为相同的值（居中）。
                                            - 使用此特点使元素在其父元素中居中
                                    - margin-right 可以是负值（为了使等式满足），为负值表现为子元素溢出
                */
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="inner"></div>
        </div>
    </body>
</html>

垂直布局

子元素大小与父元素大小的关系
属性overflow的使用方式

代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>盒子垂直布局</title>
        <style>
            .outer{
                background-color: red;
                width: 100px;
                height: 100px;

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

                    子元素是在父元素的内容区中排列的
                        - 如果设置了父元素的高度，子元素的大小超过了父元素，
                            则子元素会从父元素中溢出
                        - 使用 overflow 属性来设置父元素如何处理溢出的子元素
                          可选值：
                            - visible 默认值，子元素会从父元素中溢出，表现为
                                子元素会在父元素的外部显示
                            - hidden 溢出的内容会被裁剪不会显示 
                            - scroll 生成两个滚动条
                            - auto 根据需要生成滚动条
                        - overflow-x 单独处理水平方向
                          overflow-y 单独处理竖直方向
                */
                overflow: auto;
            }
            .inner{
                width: 200px;
                height: 200px;
                background-color: #bbffaa;
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <div class="outer">
            子元素是在父元素的内容区中排列的
            如果设置了父元素的高度，子元素的大小超过了父元素，
            则子元素会从父元素中溢出
            使用 overflow 属性来设置父元素如何处理溢出的子元素
            可选值：
            - visible 默认值，子元素会从父元素中溢出，表现为
            子元素会在父元素的外部显示
            - hidden 溢出的内容会被裁剪不会显示 
            - scroll 生成两个滚动条
        </div>
    </body>
</html>

外边距的重叠问题

代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>外边距的折叠</title>
        <style>
            .box1, .box2{
                width: 200px;
                height: 200px;
            }
            /* 
                垂直外边距的重叠
                    - 相邻的垂直方向外边距会发生重叠现象
                    - 兄弟元素（下外边距与上外边距重叠）
                        - 兄弟元素间的相邻垂直外边距会取两者之间的最大值（两者都是正值）
                        - 特殊情况
                            - 如果相邻的外边距一正一负，则取两者的和
                            - 如果相邻的外边距都是负值，则取两者中绝对值较大的
                    - 父子元素（上外边距 与 上外边距）
                        - 父子元素间相邻外边距，子元素的会传递给父元素
                        - 父子外边距的重叠会影响页面的布局，必须进行处理
                            - 临时解决方法(不推荐)
                                1. 破坏重叠，修改父元素的padding-top
                                2. 破坏相邻，设置父元素的border-top
            */
            .box1{
                background-color: red;
                /* 设置一个下外边距, 下外边距改变下面元素的位置 */
                margin-bottom: 100px;
            }
            .box2{
                background-color: green;
                /* 设置一个上外边距 */
                margin-top: 100px;
            }

            .box3{
                width: 300px;
                height:200px;
                background-color: blue;
            }
            .box4{
                width: 100px;
                height: 100px;
                background-color: orange;
                margin-top: 10px;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3">
            <div class="box4"></div>
        </div>
    </body>
</html>