定位、ps

定位

关于定位
我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：

• relative 生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移
• absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
• fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
• static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性
• inherit 从父元素继承 position 属性的值

定位元素特性 
绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素

定位元素层级 
定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级

典型定位布局 
1、固定在顶部的菜单
2、水平垂直居中的弹框
3、固定的侧边的工具栏
4、固定在底部的按钮

ps常用图片格式

图片是网页制作中很重要的素材，图片有不同的格式，每种格式都有自己的特性，了解这些特效，可以方便我们在制作网页时选取适合的图片格式

• 1、psd

psd是photoshop的专用格式，UI设计师使用photoshop设计效果图，最后会将psd格式的效果图交付给前端工程师，这种格式是不压缩的，而且保留了图层、透明和半透明等图片信息，所以这种图片格式的容量相对来说是很大的，前端工程师使用这种格式的效果图来切图制作网页，但是网页中不会使用这个格式的图片，它的作用一是保存图片的原始数据，二是方便图片的修改。

• 2、jpg

jpg是一种有损压缩格式，压缩效率高，容量相对来说最小，网络传输速度快，它不能存为透明背景，在网页中应用最广，一般在不需要透明背景的时候就使用这种图片。

• 3、gif

gif是一种无损压缩格式的图片，最多只有256种颜色，颜色丰富的图片转化为这种格式会颜色失真。它的背景可以是透明的，但不能是半透明的，透明背景中的图像，如果边缘轮廓是曲线的，会产生锯齿，它还可以保存为动画格式。

• 4、png

png的目的是为了代替gif图片，无损压缩，背景可以是透明或者半透明的，透明图像边缘光滑，没有锯齿，网页中需要透明或者半透明背景的图片，首选是png图片。png也是firework的专用格式，也可以包含图层信息。firework是另外一款可以和photoshop相比的图像处理软件。也有少量的UI设计师使用这种软件来设计网页效果图，他们设计的效果图就是带图层的png格式的，碰到这种设计师，如果我们习惯了photoshop切图，可以将带图层的png效果图转化成psd图片再处理。

• 5、webp

它是由谷歌于2010年推出的新一代图片格式，在压缩方面比当前jpg格式更优越，在质量相同的情况下，WebP格式图像的体积要比jpg格式图像小40%，不过这种图片还没有得到广泛的浏览器支持，仅在Chrome和Opera上支持，在其他浏览器上需要安装插件才可以显示，目前还没有大规模使用。

• 位图和矢量图

位图也叫点阵图，是由一个个的方形的像素点排列在一起拼接而成的，位图在放大时，图像会失真。上面讲的5种图像都属于位图。
矢量图和位图组成图像的原理不同，它的图像轮廓是由函数曲线生成的，当放大图像时，实际的原理就是将曲线乘以一个倍数，图像可以轻易地放大，而且不会出现像素块，图像边缘也不会出现锯齿。

• svg

svg是一种矢量二维图形格式，它是基于xml标记语言描述的，可以通过任何文本编辑器创建。它的优点是文件容量小，放大不失真，而且背景也可以是透明的。目前大量使用这种格式来制作网页图标或者网页地图，由于它是矢量的，所以在不同终端屏幕上(pc、手机)都有很好的显示效果。

• flash

flash是一种矢量动画文件格式，曾经在网络上风靡一时，如今已逐渐退出历史舞台，原因是它的技术更新跟不上发展，这种格式既可以是静态的图形，还可以是多媒体动画，还可以加入用户交互和数据，这是它曾经很流行的原因，这种格式名为swf，flash是对它的统称。这种格式在网页中已经很少使用了，它的很多优秀特性，可以用HTML5取代。swf文件中衍生出一种视频格式flv，它是一种流媒体视频格式，由于它有文件容量小，可以边下载，边观看等优点，目前广泛应用在视频网站中。