盒模型的划分：
content（内容）：
- width
-height
-background-color
padding(内边距)
border(边框)
margin(外边距)
背景颜色
background-color: black;
英文 1. red , orange ,yellow ,green , cyan ,blue ,purple ,pink
rgb 2. rgb(red,green,blue) 取值范围（0～255）
rgba 3. rgba(red,green,blue,alpha) alpha-透明度（0～1）
4. #aabbcc=#abc
#ffffff ->#fff->white
#000000 ->#000->black
#cccccc ->#ccc->gray */
背景图片
/*background-image: url("img/5.jpg");*/
背景图片的重复方式
background-repeat: no-repeat;
/*
repeat 默认值：横向和纵向全部平铺
repeat-x 横向平铺
repeat-y 纵向平铺
no-repeat 不平铺 */
背景图片的定位
background-position: 100px 200px;
/* 数值的书写方式：
1.距离 :100px 100px;
2.百分比 :10% 10%;
3.英文单词 : top上 ,
right右 ,bottom 下,
left左 , center居中 ;
当只设置一个定位方向的时候，另外一个数值默认填写center
*/
背景的复合写法：
颜色->图片->重复方式->定位
background:black url("img/5.jpg") no-repeat bottom ;
/*
例子：
background-color: red
background:url("img/5.jpg") no-repeat;
当我设置 background-color之后，在下面使用 background 的时候，
background 的背景颜色会失效*/
设置背景图片是否随着界面滚动
background-attachment: scroll;
/* scroll :滚动(默认值)
fixed :固定（会造成偏移）*/
CSS 3 设置背景图片大小
background-size: 900px 600px;
边框 border
* 1.
border-top-width: 10px;
border-top-color: blue;
border-top-style: solid; */
* 2. border-top : 10px solid blue;
宽度-> 样式->颜色
border-left : 10px solid blue;
border-right : 10px solid blue;
border-bottom: 10px solid blue; */
* 3. border : 10px solid red;*/
* 4. border : solid red;
border-width:10px 20px 30px 40px;
如果数值设置为4个数值，则分别对应上，右，下，左
如果数值设置为3个数值，则分别对应上，左右，下
如果数值设置为2个数值，则分别对应上下，左右
如果数值设置为1个数值，则分别对应上右，下左 */
border-width:20px ;
border-color: #ccc;
border-style: double;
/*border-style:
solid - 实线
double- 双实线 (双实线为1px显示为一条实线)
dotted- 点状线（在大多数浏览器里显示为实线）
dashed- 虚线 （在大多数浏览器里显示为实线）
-------------------------
none - 无边框
hidden-隐藏（效果与“none”相同，主要用于解决边框样式冲突）
groove- 3D凹槽边框（边框颜色取决与border-color)
ridge - 3D垄状边框（边框颜色取决与border-color)
inset - 内陷 （边框颜色取决与border-color)
outset- 外凸 （边框颜色取决与border-color) */
边框数值的缺失：
例如： border : 10px solid ;
border-width (如果缺失可以显示，默认值为中等边框：3px)
属性：thin - 细的边框 - 1px
medium- 中等边框 - 3px
thick - 粗的边框 - 5px
border-style （如果省略无法显示）
border-color （如果省略可以显示，显示的颜色是黑色）*/
CSS3属性:为元素添加圆角边框
颜色： transparent-透明 */
border-radius: 50%;
内边距：
一般来说，如果两个元素是父子关系，
你需要调整内容的位置的时候，去使用paddiing
padding 可以填充背景图片
padding 还会撑大盒子空间
padding 不能设置负数
padding-top
padding-right
padding-bottom
padding-left
