1.margin的auto取值
margin有一个特殊的取值是auto，auto对上下外边距无效，左右取相同的值，使当前元素在父元素内左右居中。
- 块级元素在父元素中水平居中`margin:上下距离 auto;`
- 上下距离在没有的时候可以写0
- 注意：内联元素使用margin：auto，不能完成居中效果
<style>
*{margin: 0;padding: 0;}
/* margin auto 实现水平方向居中 */
.item4{
width: 290px;
height: 400px;
background-color: pink;
/* margin: 10px auto; */
}
.item5{
width: 100px;
height: 50px;
margin: 0 auto;
background-color: yellow;
}
</style>
</head>
<body>
<div class="item4">
<div class="item5">123456</div>
</div>
</body>2.外边距合并现象
- 是指兄弟元素之间外边距合并
- 两个在文档流中（垂直相邻）兄弟之间外边距，同时存在的时候，取最大的值。
<style>
.item5,.item6{
width:290px;
height: 40px;
}
.item5{
background-color: red;
margin-bottom: 50px;
}
.item6{
background-color: blue;
margin-top: 5px;
}
</style>
</head>
<body>
<h1>合并外边距</h1>
<div class="item5"></div>
<div class="item6"></div>
<h1>内联元素设置内外边距</h1>
<h3>结论：内联元素水平方向上的内边距(padding-left, padding-right)可以正常设置，padding-top无效；padding-bottom是可以设置的，但不会影响到整体布局。
内联元素外边距margin水平方向上设置有效（不会合并），垂直方向上无效。</h3>
<style>
.item7{
background-color: red;
margin-right: 30px;
}
.item8{
background-color: blue;
margin-left: 15px;
}
</style>
<span class="item7">aaa</span>
<span class="item8">我的</span>
</body>3.外边距溢出（也叫margin塌陷）(特殊!!!)
- 外边距溢出是父元素中在文档流里的第一个和最后一个子元素会和父元素的上下边界产生合并现象。
- 原因是外边距其实设置的是元素与同级兄弟元素之间的距离。因此第一个和最后一个子元素的外边距会被浏览器会认为你定义的是其父级元素的边。
- 解决方案
- 父元素增加`padding-top` 缺点：增加了父元素实际高度
- 增加父元素的边框， 缺点：增加了父元素实际高度
- 父元素增加`overflow: hidden/auto;`，缺点，父元素就不能溢出显示内容了
- 使用空`<table></table>`放在第一个子元素前和最后一个子元素后，作用是分隔与父级的粘连
- 使用CSS3伪元素`::before`给父元素添加内容,源于增加空`<table></table>`
```css
.box::before{
content:"";
display:table;
}
示例：
<!-- 外边距合并情=父元素与子元素上边距合并 -->
<style>
*{padding: 0;margin: 0;}
body{background-color: #808080;}
/* 解决问题方法：在父元素中添加伪元素 */
.item::before{
content: "";
display: table;
} /* 最优方案：不影响父元素子元素 没有添加新元素 */
.item{
width: 1000px;
height: 350px;
background-color: green;
}
.item2{
width: 270px;
height: 130px;
background-color: #B22222;
margin-top: 10px; /* 添加外边距 */
}
.item3{
width: 270px;
height: 130px;
background-color: aqua;
}
</style>
</head>
<body>
<h3>外边距合并情况</h3>
<div class="item">
<div class="item2"></div>
<div class="item3"></div>
</div>
</body>4. 盒子模型的两种计算方式
1）`box-sizing: content-box;` 标准盒子模型 (标准)
- 元素所占宽度=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距
- 元素所占高度=上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距
2）`box-sizing:border-box` 改变盒子模型计算方式 (优选项)
*｛padding:0;margin:0;box-sizing:border-box｝
- 设置的宽度width = 左右border + 左右padding + 内容的宽度
- 设置的高度height = 上下border + 上下padding + 内容的高度
- 注意：可能会导致内容溢出，需要时再使用
属性定义及使用说明
box-sizing 属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等。
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这样就可以让浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
默认情况下，元素的宽度(width) 和高度(height)计算方式如下：
width(宽度) + padding(内边距) + border(边框) = 元素实际宽度 height(高度) + padding(内边距) + border(边框) = 元素实际高度
总结：box-sizing:border-box 包含padding和border