一、水平方向上，有7个值可以改变盒子的大小及位置
margin-left
border-left
padding-left
width
padding-right
border-right
margin-rightmargin-left +border-left +padding-left +width+ padding-right +border-right+ margin-right=父元素内容区的宽度
浏览器规定水平方向这七个值相加必须要等于其父元素内容区的宽度，如果这7个值相加不等于父元素内容区的宽度，浏览器就会改变某些值，让其成立，这个过程称作“过度约束”
浏览器调整：
1.如果水平方向7个值中没有auto，默认调整的是margin-right
0+0+0+100+0+0+500 = 60
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
总结：
1、调整的顺序: width>margin-right/margin-left
2、margin:0 auto; 可以让元素居中,前提是width是固定的
二、垂直方向上
默认情况下，父元素的高度是被内容撑开的，如果设置了，设置多少就是多少 可以利用overflow属性设置溢出内容
可选值：
visible ： 多余的内容正常显示 默认值
hidden： 裁剪多余
auto ： 根据内容需要自动生成滚动条
scroll ： 生成双向滚动条
如何去除滚动条
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
}三、垂直外边距重叠问题
-兄弟元素
1、 下外边距和上外边距重叠了，如果都是正值的，用绝对值大的
2、 如果都是负值，也用绝对值大的
一般情况下，兄弟元素的外边距重叠，有助于我们开发，不用做特殊处理
-父子元素
如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素,从而影响页面的布局这种情况必须要处理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
.box1 {
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 50px;
}
.box2 {
width: 100px;
height: 100px;
background-color: green;
margin-top: 30px;
}
.outer {
width: 200px;
height: 200px;
background-color: yellow;
/* margin-top: 100px; */
/* 方案一：不用margin，用padding实现 */
/* padding-top: 100px; */
/* 方案二：outer加个边框,隔开父子的上外边距 */
/* border: 1px solid transparent; */
/* 方案三：给元素添加BFC(块级格式化)隐含属性 */
overflow:hidden;
}
.inner {
width: 100px;
height: 100px;
background-color: yellowgreen;
margin-top: 100px;
}
</style>
</head>
<body>
<!-- 兄弟元素 -->
<!-- <div class="box1"></div>
<div class="box2"></div> -->
<!-- 父子元素 -->
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
四、内联元素盒子
1、内容区 它的宽高都是被内容撑开的，不能自定义设置
2、内边距 可以设置，但垂直方向不会挤别的元素
3、 边框 可以设置，但垂直方向不会挤别人
4、外边距 水平方向可以设置，垂直方向设置，没有变化
五、盒子大小和边框
盒子大小怎么设置？都有属性值？
默认情况下：盒子可见宽的大小由内容区，内边距，边框共同决定
box-sizing 用来设置盒子尺寸的计算方式 width/height 指的是谁
可选值：
content-box 内容区 默认值
border-box 宽度和高度用来设置整个盒子可见框的大小，包括边框，padding，内容区
1859
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
