CSS之盒模型边框，内边距，外边距，阴影，圆角

盒子模型

盒子模型有元素内容、边框（border）、内边距（padding）、外边距（margin）组成；
盒子里面的文字和图片等元素是内容区域；
盒子的厚度我们称为盒子的边框；
盒子内容与盒子之间的距离是内边距；
盒子与盒子之间的距离是外边距；

标准盒子模型

盒子边框（border）

border: border-width || border-style || border-color

属性	作用
border-width	定义边框粗细，单位是 px
border-style	边框的样式
border-color	边框颜色

border-style ：

none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线；
dashed：边框为虚线；
dotted：边框为点线；

表格细线边框

通过表格的 cellspacing="0"，将单元格与单元格之间的距离设为 0
但是两个单元格之间的边框会出现边框，从而使边框变粗；
通过设置 css 属性 table {border-collapse: collapse;} 表示相邻边框合并在一起；

<style>
  table,
  th,
  td {
    border: 1px dashed #ccc;
    border-collapse: collspase;
  }
</style>

内边距（padding）

属性	作用
padding-top	上内边距
padding-bottom	下内边距
padding-left	左内边距
padding-right	右内边距

当我们为盒子添加了内边距之后

内容和边框有了距离；
盒子变大了；

复合写法

padding: 10px 20px 30px 40px;

一个值：上下左右 10 px；
两个值：上下10px，左右20px；
三个值：上10px，左右20px，下30px；
四个值：上10px，右20px，下30px，左40px；顺时针

内盒尺寸计算（元素实际大小）

宽度：ElementHeight = content height + padding + border
高度：ElementWidth = content width + padding + border
盒子实际大小 = 内容的宽度和高度 + 内边距 + 边框

padding不影响盒子大小的情况

如果没有给一个盒子指定宽度，此时如果给这个盒子指定 padding，则不会撑开盒子。

外边距

属性	作用
margin-top	上外边距
margin-bottom	下外边距
margin-left	左外边距
margin-right	右外边距

复合写法

margin 值的简写代表含义，与 padding 值完全一致

块级盒子水平居中

让一个块级盒子实现水平居中，必须：
- 盒子必须指定宽度；
- 然后给左右的外边距设置为 auto
实际工作中常用 .container {width: 960px; margin: 0 auto;}
常见的写法包含：
- margin-left：auto；margin-right：auto；
- margin：auto；
- margin：0 auto；

文字居中与盒子居中的区别

文字水平居中是 text-align: center;，而且还可以让行内元素和行内块元素居中对齐
盒子水平居中是左右 margin 改为 auto；

插入图片和背景图片区别

插入图片用的最多的是比如产品类移动位置只能靠盒模型 padding margin
背景图片我们一般用于小图标或者超大背景图片，背景图片只能通过 background-position

img {
    width: 200px; /* 更改插入图片的大小 */
    height: 210px;
    margin-top: 30px; /* 更改插入图片的位置 可以用 padding 或 margin 盒模型 */
    margin-left: 50px;
}
div {
    width: 400px;
    height: 400px;
    border: 1px dashed #ccc;
    background: #fff url(image/image.png) no-repeat scroll;
    background-position: 30px 50px; /* 背景图片更改位置 */
}

清除元素默认的内外边距

* {
  margin: 0;
  padding: 0;
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距；

外边距合并

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

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距 margin-bottom 下面的元素有上外边距 margin-top，则他们之间的垂直间距是取两者值中较大者，这种现象称为相邻块元素垂直外边距合并（也称外边距塌陷）

嵌套块元素垂直外边距合并（塌陷）

对于两个嵌套关系的块元素，如果父元素没有上边距及边框，父元素的上外边距会与子元素的上外边距发生合并；合并后取两者中较大者；
解决方案：
- 可以为父元素定义上边框
- 可以为父元素定义上内边距
- 可以为父元素添加overfolw：hidden
还有其他的方法比如浮动、固定、绝对定位的盒子不会有问题；

圆角边框（CSS3）

border-radius: length;
/* 数值也可以为百分比形式，如果需要一个盒子变成圆 可以指定 50% */

盒子阴影（CSS3）

box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内外阴影
box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);

值	描述
h-shadow	必须。水平阴影位置。允许负值
v-shadow	必须。垂直阴影位置。允许负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色。十六进制
inset	可选，将外部阴影（outset）改为内部阴影