一、水平方向
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.outer{
width: 800px;
height: 200px;
border: 10px #FF0000 solid;
}
.inner{
/* width的值默认为auto */
width: 200px;
height: 200px;
background-color: #BBFFAA;
/*
元素的水平方向的布局：
元素在其父元素中水平方向的位置由以下几个属性共同决定：
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 = 600 != 800
以上等式必须满足，如果相加结果使等式不成立，则称为过渡约束，则等式会自动调整
调整的情况:
如果这七个值中没有为
auto的情况，则浏览器会自动调整margin-right值以使等式满足
0 + 0 + 0 + 200 + 0 + 0 + 600 = 800
这七个值中有三个值可设置为auto
width
margin-left
maring-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>
二、垂直方向
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title><
最低0.47元/天 解锁文章
1989
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
