- 文档流中的块元素布局
(margin-left) + (border-left) + (padding-left) + (width) + (padding-right) + (border-right) + margin-right = 父元素的内容区的宽度（父元素的width）
其中，这七个值中，都可以省略不写，width省略不写为auto，其他六个值省略不写为0。
- 示例代码
<!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>
</head>
<style>
#out{
width: 800px;
border: 10px solid rebeccapurple;
}
#inner{
height: 100px;
background-color: #bfa;
}
</style>
<body>
<div id="out">
<div id="inner">
</div>
</div>
</body>
</html>
效果图
此时inner需要满足上面的等式。 由于inner元素没有指定这7个值中任意一个值，则此时的等式为 0+0+0+auto+0+0+0=800px，谁的值是auto，则浏览器就会调整谁的值，所以此时width自动被调整成了800。
- 当width为具体值时
例如当width设置为200px
此时需要满足 0+0+0+200+0+0+0=800,很显然此时不满足等式，当不满足时，浏览器会调整margin-right的值，此时margin-right值被调整为600.
- 当width为具体值，margin-left和margin-right其中一个为auto时，此时浏览器会调整为auto的那个值，例如
auto+0+0+200+0+0+0 = 800，此时margin-left就是600px
- 当width为具体值，margin-left和margin-right都为auto时，则会平分
如 auto+0+0+200+0+0+auto = 800，则此时margin-left和margin-right都等于300，这时就会居中。
- 当三个值都为auto时
也就是 auto+0+0+auto+0+0+auto=800，则此时会调整width为800。
- 当width和其中某一个为具体值时。
例如 width和margin-left为200，此时200+0+0+200+0+0+0=800，
那么此时浏览器会将margin-right调整为400
当width和margin-right为200时，此时0+0+0+200+0+0+200 = 800，则此时浏览器还是会调整margin-right。
扫一扫
798
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
