030-盒子模型的水平布局

最新推荐文章于 2022-02-05 22:17:18 发布

一只老黄牛

最新推荐文章于 2022-02-05 22:17:18 发布

阅读量91

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_36150351/article/details/113448182

版权

前端专栏收录该内容

34 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zn">

<head>
    <meta charset="UTF-8">
    <title>盒子模型的水平布局</title>

    <style>
        .outer {
            width: 800px;
            height: 200px;
            border: 10px solid red;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: #bfa;

            /* 
                元素的水平方向的布局
                    元素在其父元素中水平方向的位置由以下几个属性共同决定
                    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         

                 0 + 0 + 0 + 200 + 0 + 0 + 0 = 800
                 0 + 0 + 0 + 200 + 0 + 0 + 600 = 800

                 100 + 0 + 0 + 200 + 0 + 0 + 400 = 800
                 100 + 0 + 0 + 200 + 0 + 0 + 500 = 800
                    - 以上等式必须满足，如果相加使等式不成立，则称为过度约束，则等式会自动调整
                        - 调整情况
                            - 如果这7个值中没有为auto的情况，则浏览器会自动调整margin-right的值
                        - 这7个值中有3个值可设置为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，则宽度会调整到最大，设置为auto的外边距会自动为0
                        - 如果将3个值都设置为auto，则外边距都是0，宽度最大
                        - 如果将2个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值
                            所以我们经常利用这个特点来使一个元素在其父元素中水平居中
                            示例：
                            width:XXXpx;
                            margin:0 auto;
             */
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="innner"></div>
    </div>
</body>

</html>

一只老黄牛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
030-盒子模型的水平布局

<!DOCTYPE html><html lang="zn"><head> <meta charset="UTF-8"> <title>盒子模型的水平布局</title> <style> .outer { width: 800px; height: 200px; border: 10px solid red
复制链接

扫一扫