| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 |
- <!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>Document</title>
- <style>
- .outer{
- width: 800px;
- height: 200px;
- border: 10px red solid;
- }
- .inner{
- width: auto;
- height: 200px;
- background-color: #bfa;
- margin-right: 200px;
- }
- /*
- 元素的水平方向的布局：
- 元素在其父元素中水平方向的位置由以下几个属性共同决定：
- 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=其父元素内容区的宽度（必须满足）
- -以上等式必须满足，如果相加结果使等式不成立，则称为过渡约束，等式会自动调整
- -调整的情况：
- -如果这七个值中没有为auto的情况，则浏览器会自动调整margin-right值以使等式满足
- 这七个值中有三个值可以设置为auto
- width
- margin-left
- margin-right
- -如果某个值为auto，则会自动调整为auto的那个值以使等式成立
- -如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0
- -如果将三个值都设置为auto，则外边距都是0，宽度最大（跟不设置的效果一样）
- -如果将两个外边距设置为auto，宽度为固定值，则会将外边距设置为相同的值
- 所以我们经常利用这个特点来使一个元素在其父元素中水平居中
- 实例：
- width：xxxpx；
- margin：0 auto；
- */
-
- </style>
- </head>
- <body>
- <div class="outer">
- <div class="inner"></div>
- </div>
- </body>
- </html>
|
