06.盒⼦的⽔平布局.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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{
/*
left  top  right  bottom  width  height：默认值为 auto
margin  padding:  默认值为 0
*/
/*
width的值默认是auto
所以 width: auto; 可以不写
*/
width: 200px;
height: 200px;
background-color: #bfa;
/*
margin-right和margin-left默认值都是0
*/
margin-left: auto;
margin-right: auto;
/*
元素的⽔平⽅向的布局
元素在其⽗元素中⽔平⽅向的位置和⼤⼩由以下⼏个属性共同决定
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
= 其⽗元素内容区的宽度（必须满⾜）
0 + 0 + 0 + 200 + 0 + 0 + 0 = 800
-
以上等式必须满⾜。如果相加结果使等式不成⽴，则称其为过度约束，则等式会⾃动调整
- 调整的情况
- 0 + 0 + 0 + 200 + 0 + 0 + 600 = 800
- 如果这七个值中没有为 auto 的情况，则浏览器会⾃动调整margin-right值，以使等式满⾜                        - 这七个值中，有三个值可以设置为auto
width
margin-left
margin-right
如果某个值为auto，则浏览器会⾃动调整为auto的那个值，以使等式成⽴
0 + 0 + 0 + auto + 0 + 0 + 0 = 800 auto=800
- 如果将宽度和⼀个外边距设置为auto，则宽度会调整到最⼤，设置为auto的那个外边距会⾃动为0                        - 如果将三个值都设置为auto，则外边距都是0，宽度最⼤
- 如果将两个外边距设置为auto⽽宽度固定值，则会将外边距设置为相同的值
所以经常利⽤这个特点来使⼀个元素在其⽗元素中⽔平居中
⽰例：
div border属性
width xxx px;
margin:0 auto;
*/
/* margin-left: 100px;
margin-right: 400px; */
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。