盒子模型的水平布局

最新推荐文章于 2024-08-30 15:33:13 发布

桃之夭夭QAQ

最新推荐文章于 2024-08-30 15:33:13 发布

阅读量94

点赞数

分类专栏： css 文章标签： css Powered by 金山文档

本文链接：https://blog.csdn.net/m0_57519583/article/details/129067311

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

水平布局：

width+padding+border+margin<父元素的width

1. width+padding+border+margin都设置了确定值当小于父元素的width时，多余的部分给margin-right吸收。

2.当width不设置或者设置为auto值时，多余的部分有宽度吸收当margin-left=auto,多余的部分由margin-left吸收。

当margin-right=auto,多余的部分由margin-right吸收。

总结：当设置了auto就将多余的部分给它，注意能设置auto值的属性：width，margin-left，margin-right3.有二个属性设置auto时width与margin-left/width和margin-right同时设置auto值时，对于部分有width吸收，margin-left/margin-right没有值margin-left和margin-right同时设置为auto时，多余部分平分给左右外边距=》块元素的水平居中。

4.设置三个autowidth与margin同时设置auto时，多余部分由宽度吸收。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平布局</title>
    <style>
        .fa {
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        .son {
            width: 200px;
            height: 200px;
            margin:0 10px;
            padding: 0 10px;
            border: 10px solid red;
            background-color: aqua;
         }
    </style>
</head>
<body>
    <div class="fa">
        <div class="son"></div>
    </div>
</body>
</html>