水平布局
水平方向，有7个值可以改变盒子的大小以及位置
margin-left +border-left +padding-left +width+ padding-right +border-right+ margin-right
=父元素内容区的宽度
浏览器规定：水平方向这7个值相加必须要等于其父元素内容区的宽度
0+0+0+100+0+0+0 ！= 600
如果这个7个值相加不等于父元素内容区的宽度，浏览器就会改变某些值，让其成立
我们管这个过程叫过度约束
浏览器如何调整：
1、如果水平方向7个值中没有auto，默认调整的是margin-right
0+0+0+100+0+0+500 = 600
2、7个值当中，有3个值可以被设置为auto，分别是margin-left，width，margin-right
（1）、1个auto 谁是auto就调整谁
margin-left为auto，
auto+0+0+100+0+0+0= 600 auto=500
width为auto
0+0+0+auto+0+0+0= 600 auto=600
margin-right为auto
0+0+0+100+0+0+auto= 600 auto=500
（2）、2个auto
margin-left，width为auto 调整width
auto+0+0+auto+0+0+0px= 600
width，margin-right为auto 调整width
margin-left，margin-right为auto 同时调整，各一半
简写为：margin:0 auto; 可以让元素居中
（3）、3个auto
margin-left，width，margin-right为auto 调整的width
总结：
调整的顺序
width>margin-right/margin-left
margin:0 auto; 可以让元素居中,前提是width是固定的
body>
<div class="outer">
<div class="inner"></div>
</div>
</body><style>
.outer {
width: 600px;
height: 200px;
border: 10px red solid;
}
.inner {
width: auto;
height: 100px;
background-color: #bfa;
margin-left: auto;
margin-right: auto;
}
</style>
垂直布局
默认情况下，父元素的高度是被内容撑开的，如果设置了，设置多少就是多少
可以利用overflow属性，设置溢出内容
可选值：
visible 多余的内容正常显示 默认值
hidden 裁剪多余
auto 根据内容需要自动生成滚动条
scroll 生成双向滚动条
<body>
<div class="box1">
<p>
是以逝投到才三位，想恨学，答俭韩曰子失传谋他一连是三中国我，姑玉对天气了不人是，得李被死欲白死谓俭他以德艳都，娟名死是妄始天仑同如绛明笔后其亓兮牛，高归然秦土是介后之一葬历你，或没哥仄死，通嗣命畴而和洪心说尤禀回失本等，满后俭要冷了，见李大往仆光得则我己。
</p>
</div>
</body><style>
/* 额外：如果去除滚动条 */
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
/* overflow-x:auto;
overflow-y: hidden; */
}
p{
height: 200px;
width: 400px;
}
</style>
外边距的折叠
垂直外边距的重叠
-兄弟元素
下外边距和上外边距重叠了，
如果都是正值的，谁大听谁的
如果都是负值，绝对值谁大听谁的
一般情况下，兄弟元素的外边距重叠，有助于我们开发，不用做特殊处理
-父子元素
如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素,从而影响页面的布局
这种情况必须要处理
<body>
<!-- 兄弟元素 -->
<!-- <div class="box1"></div>
<div class="box2"></div> -->
<!-- 父子元素 -->
<div class="outer">
<div class="inner"></div>
</div>
</body>
86
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
