CSS之元素的水平方向的布局

最新推荐文章于 2025-03-17 11:28:46 发布

原创最新推荐文章于 2025-03-17 11:28:46 发布 · 668 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #css3

CSS样式表专栏收录该内容

39 篇文章

订阅专栏

本文深入探讨了CSS中元素水平布局的原理，详细解释了margin、border、padding和width属性如何共同作用于元素的水平定位，以及当总和超过父元素宽度时的自动调整机制。通过具体示例，展示了如何使用margin:auto实现子元素在父元素内的居中显示。

元素水平方向的布局:
margin-left:
border-left
padding-left:
width:
padding-right
border-right
margin-right
一个元素在其父元素中水平布局必须满足下面的等式:
margin-left+border-left+padding-left+width+border-right+padding-right+margin-right+== 父元素内容区的宽度

如果上述等式不成立的话,则称为过度约束,等式自动调整
调整的情况:
如果这7个值中没有auto的情况,浏览器会自动调整margin-right的值以致等式成立

有三个属性可以设置为auto
width:
margin-left
margin-right
如果有属性设置为auto,会自动调整该属性值以满足等式的值

如果设置了一个宽度和外边距为auto,则调整宽度为最大值,以及将auto外边距设置为0
如果将这三个属性都设置为auto,则调整宽度为最大值,将其他两个设置为0

如果将两个外边距设置为auto,宽度固定值,则会将两个外边距设置为相同的值
利用这个特性,可以使得子元素在父元素中水平居中显示
0+0+0+200+0+0+0=800

50+0+200+0+0+550=800

eg:
子元素选择器{
width:xxxpx;
margin:0 auto;
}

margin可以设置为负值,表示往反方向走

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>元素的水平布局</title>
    <style>
        /*
       
        
       

        */
        .outer {
            width: 800px;
            height: 200px;
            border: 1px solid red;

        }

        .inner {
            width:200px;
            height: 100%;
            background-color: seagreen;

            /* margin-left: auto;
            margin-right:auto; */
            margin:0 auto;
            

            /* margin-right: 200px;  */
            /* border-left:100px;  */
            /* margin-right: 60px;
            margin-top:50px;
            margin-bottom: 20px; */


        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner">

        </div>
    </div>

</body>

</html>