HTML相关技术

一、定位position

1.相对定位relative

参照物是元素本身 （position: relative;top: 10px; left: 50px;）

2.绝对定位absolute

参照物是具有第一个定位属性的父元素，没有的话是浏览器（.one{position:relative;}.two{positive:absolute;top:20px;left:10px;}）

3.固定定位fixed

参照物是浏览器窗口，位置固定不变（position: fixed;right: 50px;bottom: 50px;）

注意事项：

定位层级：z-index,通过z-index来调整定位元素的层级
z-index的默认值是0;z-index的值可以是从-1到无穷大;如果有z-index没有定位属性position，则该属性不生效。

二、图片精灵技术

（也叫雪碧图，也叫css sprites）

1.原理

讲很多图片放在一张大图里，利用背景图片定位的方式，目的就是为了减少对http请求次数。

2.使用方法

background-color,background-image:url(图片路径),background-position:距离左边，距离右边<用负数表示>,background-size,background-repeat

三、元素

1.块元素：独占一行，可以设置宽高。

常见块元素：div,p,ul,li,ol,h1-h6，form，table,iframe,section,header,footer,aside,article

2.行内元素：排列在一行，不可以设置宽高。

常见行内元素：span,i,u,s,a,b,lable，em（带有强调意思的倾斜）,strong

3.行内块元素：排列在一行可以限制宽高。

常见行内块元素：（img,input,select,textarea,video,audio）