！！！！再简单的例题都要自己敲，亲自实践
====================================框模型======================================
一、框模型(重难点)
1、页面元素皆为框
元素的实际宽度=左右外边距+左右边框+左右内边距+width
元素的实际高度=上下外边距+上下边框+上下内边距+height
2、外边距（margin）
取值：
1、px 像素
2、%
3、auto(自动)
4、负值
3、取值-auto
左右方向设置为 auto 时，允许元素在其父元素中水平居中对齐，前提，必须设置该元素的宽度
4、取值-负值
移动元素，向着反方向移动
margin-left:-10px;向左移动10px
margin-top:-10px;向上移动10px
5、页面中具备默认外边距的元素
h1,h2,h3,h4,h5,h6,p,ol,ul,pre,dl,dd
通过 CSS Reset 的方式 重写默认外边距
6、特殊效果
1、外边距合并
当两个垂直外边距相遇时，它们将形成一个外边距
合并后的外边距的高度等于两个发生合并外边距高度重的较大者
2、外边距的溢出
在某种特殊场合下，给子元素设置外边距时，效果却作用在父元素的外边距效果上了。【子债父还】
还债前提：父元素没有上或下边框、必须为第一个或者最后一个子元素设置外边距时
特殊处理：
1、为父元素添加边框【因为没有边框，拦不住呀】
有瑕疵，父元素高度会发生改变
2、为父元素添加内边距来取代子元素外边距
有瑕疵，影响元素的尺寸
3、块级元素，行内元素，行内块元素的上下外边距
上下外边距对行内元素 无效
上下外边距对行内块元素（如 input）的影响是，整行元素都会受到影响
3、内边距（padding）：内容区域与边缘之间的距离
取值：
1、px
2、%
3、特殊影响
为行内元素设置上下内边距时，只会影响元素自身，并不会影响到其他元素
4、属性-box-sizing
指定边框，内边距，内容区域的计算模式（没有外边距）
默认：width和height只负责定义内容区域的尺寸，border，padding额外添加到元素上的
2、属性 & 值
属性：box-sizing
取值：
1、content-box
默认值，在元素的width和height之外绘制边框和内边距
2、border-box
边框和内边距会包含在width和height之中
====================================背景========================================
背景元素与图片的主要区别：背景图主要是做衬托，上面可以有文本
CSS Sprites（雪碧图、精灵图）
将若干幅小图像拼合到一副大图像中（减少请求次数），想看具体小图像的时候，配合着背景图已经背景图像位置的方式进行移动，显示