CSS笔记（五）

知识点一：Photoshop的简单使用

1、工具栏、菜单栏、选项栏、作图区的介绍

2、做图步骤

① 文件-新建

② 在画板中做图

③ 在工具栏中选择想要添加的图形、文本等

④ 在选项栏修改图形、文本的颜色、字体大小、形状、家族的等

⑤ 在工具栏中修改图片的背景色

⑥ 保存-生成psd格式

3、切图步骤

① 打开图片

② 选择切片工具

③ 根据需要选中被剪切的部分

④ 存储为web所用格式

⑤ Png

⑥ 生成png格式图片

知识点二：相对定位

1、定位：将元素固定到指定的位置上

2、组成：定位模式、边偏移 

3、定位模式：相对定位

                绝对定位

                固定定位

4、边偏移：top顶端偏移量

              left 左侧偏移量

              right 右侧偏移量

              bottom 底端偏移量

5、相对定位： 定义：相对于元素本身的位置

               特点：不脱离标准流，占位置, 可以脱离父元素

① position: relative;top: 300px; left: 1000px;

知识点三：绝对定位

1、绝对定位： 1、如果父元素没有定位，就是相对于视口viewport

2、如果父元素有相对定位,就是相对于父元素定位，脱离父元素的范围

3、特征：脱离标准流，不占位置 

①  position: absolute;

      left: 100px;

      top: 300px;

知识点四：固定定位

1、固定定位： 相对于浏览器窗口定位

2、特征：脱标、不占位

position:fixed

3、添加定位后的元素自动的转化为行内块元素

知识点六：z-index叠放次序

1、z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上

2、如果取值相同，则根据书写顺序，后来居上。

3、后面数字一定不能加单位。

4、只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性