[TOC]
## **介绍**
> 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
> CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
> 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
## **宽度和高度：**
~~~
width：10px或者10cm；
height：10px或者10cm；
~~~
## **内边距：padding**
内边距属性：
~~~
padding：26px或者26cm
padding-top：
padding-bottom：
padding-right：
padding-left：
~~~
## **外边距：margin**
同理外边距也有：
~~~
margin-left：
margin-right:
margin_top:
margin-bottom：
~~~
## **边框：border**
~~~
border-color：red或者rgb()或者#fffabc
border-width：thin,medium,thick,1px,2px···6px
border-redius:1.1em或1.2px（边框圆角）
~~~
**border-style：**
> 可能的值：
> none ------------------定义无边框。
> hidden --------------与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
> dotted --------------定义点状边框。在大多数浏览器中呈现为实线。
> dashed --------------定义虚线。在大多数浏览器中呈现为实线。
> solid --------------------定义实线。
> double ---------------定义双线。双线的宽度等于 border-width 的值。
> groove ---------------定义 3D 凹槽边框。其效果取决于 border-color 的值。
> ridge -------------------定义 3D 垄状边框。其效果取决于 border-color 的值。
> inset -------------------定义 3D inset 边框。其效果取决于 border-color 的值。
> outset ---------------定义 3D outset 边框。其效果取决于 border-color 的值。
> inherit ----------------规定应该从父元素继承边框样式。
###### **例子 1**
`border-style:dotted solid double dashed; `
*上边框是点状
右边框是实线
下边框是双线
左边框是虚线*
###### **例子 2**
`border-style:dotted solid double;`
*上边框是点状
右边框和左边框是实线
下边框是双线*
#### **但是一般直接这样写：**
`border：1px solid pink;`
## **背景：**
~~~
background-color：red;
background-img：url("image_path或者直接外链图片地址")
background-repeat:
repeat 背景图像将向垂直和水平方向重复。这是默认
repeat-x 只有水平位置会重复背景图像
repeat-y 只有垂直位置会重复背景图像
no-repeat background-image不会重复
inherit 指定background-repea属性设置应该从父元素继承
background-position:
left top 图像在左上
left center 图像在左中
left bottom 图像在左下
right top 图像在右上
right center 图像在右中
right bottom 图像在右下
center top
center center
center bottom
x% y% 第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％
inherit 指定background-position属性设置应该从父元素继承
~~~
## **指定边框**
以上只是针对全部的边框，而你可以指定边框，指定的边框同样有以上属性，指定边框方法：
~~~
border-top-left:
border-top-right:
border-bottom-right:
border-bottom-left:
~~~
