CSS之盒子模型心得

盒子模型之外边距实现盒子居中

盒子实现居中，需要满足以下两个条件

1. 必须是块级元素
2. 必须指定了宽度（width）

给左右的外边距都设置为auto，就可以实现块级元素水平居中

.nav { width: 500px; margin: 0 auto; }

文字盒子居中图片和背景区别

1. 文字水平居中是 text-align: center
2. 盒子水平居中 左右margin改为 auto

text-align: center; /* 文字居中水平 */
margin: 10px auto; /* 盒子水平居中 左右margin改为auto*/

3. 插入图片
4. 背景图片一般用于小图标背景或者超大背景图片

.img {
	width: 200px;
	height: 210px; /* 插入图片更改大小 */
	margin-top: 30px; /* 插入图片更改位置 可以使用margin或padding */
	margin-left: 50px; /* 插入当图片也是一个盒子 */
}

.back {
	width: 400px;
	height: 400px;
	border: 1px solid pink;
	background: #fff url(images/br.jpg) no-repeat;
	background-size: 200px 210px; /* 背景图片更改大小只能用 background-size */
	background-position: 30px 50px; /* 背景图片更改位置用background-position */
}

清楚元素的默认内外边距

为了更方便的控制网页中的元素，制作网页时，可清楚元素的默认内外边距（格式化）

* {
	padding: 0;
	margin: 0;
}

行内元素是没有上下外边距的，只有左右外边距。

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

1. 相邻块元素垂直外边距的合并
   当上下相邻的两个块级元素相遇时，如果上面的元素有下外边距margin-bottom,下面元素有上外边距margin-top，则他们之间的垂直距离不是margin-bottom和margin-top的之和，而是他们两者之间距离较大的那个，这种现象被称为相邻块元素垂直外边距的合并（外边距塌陷）。

解决方案

避免上下元素同时指定外边距

2. 嵌套块元素垂直外边距的合并
   对于两个嵌套关系的块元素，如果父元素没有上内边距及边框时，则父元素上外边框会于子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

解决方案

1.可以为父元素定义1像素的上边框或上内边距
2.可以为父元素添加overflow:hidden