盒模型水平方向的布局规则

最新推荐文章于 2024-05-31 17:42:47 发布

南柯一孟

最新推荐文章于 2024-05-31 17:42:47 发布

阅读量556

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/ErMengmengmeng/article/details/105877413

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

元素水平方向的布局：

    元素在其父元素中水平方向的位置有以下几个属性共同决定，且必须满足以下等式：
    margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素的内容区宽度
    如果相加结果使等式不成立，则称为过度约束，等式会自动调整：

1、如果这个七个值中没有为auto的情况，则浏览器会自动调整margin-right值以使等式满足。

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子的水平布局</title>
    <style>
        .parent{
            width:800px;
            height: 200px;
            border: 6px seagreen solid;
        }
        .child{
            width: 200px;
            height: 200px;
            margin-left: 0;
            margin-right: 0;
            background-color: #5bc0de;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
        我是文字
    </div>
</body>
</html>

页面渲染为：
在这里插入图片描述
结合页面和代码，可看出，页面上有一个父盒子（绿色框长方形）和子盒子（蓝色正方形），父子盒子的height高度相同，父盒子的width为800px，子盒子的width为200px。此外，子盒子的margin-left和margin-right都为0。
前面提到，盒子在水平方向的布局必须满足等式，这里，按照css中的设置，将相应的数值带入，等式改写为：

margin-left (0) +border-left (0) + padding-left (0) + width (200px) + padding-right (0) + border-right (0) + margin-right (0) = 其父元素内容区的宽度 (800px)

即：0+0+0+200+0+0+0 = 800

显然，此时这个等式是不成立的，所以浏览器会自动调整子元素的margin-right以使等式满足（即使我设置了margin-right为0）。

调整为：margin-left (0) +border-left (0) + padding-left (0) + width (200px) + padding-right (0) + border-right (0) + margin-right (600px) = 其父元素的宽度 (800px)

    可以看到，此时：0+0+0+200+0+0+600 = 800，等式满足了，在实际的页面渲染中，子元素后面的文字在子元素下方，文字从父盒子中溢出，而不是在子元素右侧，也是因为，子元素的margin-right经过浏览器调整后，已经将子元素所在这一行占满了，用浏览器调试工具选中子元素，也可以看出来，子元素的margin-right（浏览器用黄色部分表示margin）占满了父元素的右侧：
在这里插入图片描述
2、这七个值中有三个值可以设置为auto（width、margin-left、margin-right）：
    如果这三个值中某个为auto，则会自动调整auto那个值以使等式成立。
    如果，同时设置了width和margin为auto，则设置margin为0，width最大，使得盒子宽度最大。
    如果，同时设置了margin-left和margin-right为auto，宽度为固定值，则左右两边的margin均分剩下的空间，使等式成立。

例：
首先把子元素的width设置为auto，代码为：

<head>
    <meta charset="UTF-8">
    <title>盒子的水平布局</title>
    <style>
        .parent{
            width:800px;
            height: 200px;
            border: 6px seagreen solid;
        }
        .child{
            width: auto;
            height: 200px;
            background-color: #5bc0de;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

页面渲染为：
在这里插入图片描述
将相应的数值带入，这个等式改写为：

margin-left (0) +border-left (0) + padding-left (0) + width (auto) + padding-right (0) + border-right (0) + margin-right (0) = 其父元素的宽度 (800px)

此时，浏览器为了使等式成立，计算auto的结果为800px，可以看到，与页面渲染结果相符合：
在这里插入图片描述
注：这里如果不设置子元素width值，渲染结果也一样，因为width默认为auto。

如果再把子元素的width设置为200px，margin-right也设置为200px，margin-left设置为auto，其他不变：

.child{
            width: 200px;
            height: 200px;
            background-color: #5bc0de;
            margin-right: 200px;
            margin-left: auto;
        }

浏览器的渲染结果为：
在这里插入图片描述
可以看到，浏览器为了使等式成立，把margin-left:auto的值设置为400px；

南柯一孟

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
盒模型水平方向的布局规则

盒模型水平方向的布局规则元素水平方向的布局：  元素在其父元素中水平方向的位置有以下几个属性共同决定，且必须满足以下等式：margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素的内容区宽度  如果相加结果使等式不成立，则称为过度...
复制链接

扫一扫