水平方向布局 

<!DOCTYPE html>
<html lang="zh">
<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>Document</title>
    <style>
        .outer{
            width: 800px;
            height: 200px;
            border: red 10px solid;
        }
.inner{
    width: 200px;/*width的值默认为auto */
    height: 200px;
margin: 0 auto;
    background-color: seagreen;
    /* 
    元素在其父元素在水平方向的位置有以下几个属性共同决定
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right

一个（子）元素在其父元素，水平布局必须满足上面七个值相加=父元素的内容区的宽度（必须满足）
   0+0+0+200+0+0+0=800不成立
   !如果不成立，则成为过渡约束，则等式会自动调整!
   如果这七个值的值都没有auto的值，则浏览器会自动调整margin-right
   所以这个值margin-right没什么用
   width,margin-left,margin-right可以设置成auto

   如果将一个宽度和外边距设置为auto的情况下，则宽度会调整为最大，设置为auto的外边距自动为0
  如果三个值都为AUTO，则外边距都是0，宽度最大
如果让两个外边距设置为auto，则两个外边距为相同的值(经常使用这个特点使其水平居中)
   
   如果width超过其父元素的width,则子元素的margin-right会变为负数，凸出去
    */
}
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>

</body>
</html>

 

posted @ 2021-02-15 01:01  俗气小博  阅读(64)  评论(0)    收藏  举报