前端学习day8--CSS（定位，堆叠，CSS精灵，字体图标，过渡/修饰属性）

目录

定位：

功能：

使用方式：

相对定位：

相对定位的特点：

绝对定位：

绝对定位的特点：

定位居中：

固定定位：

​编辑

定位总结：

堆叠层级：

​编辑CSS精灵：

使用方法：

字体图标：

下载字体：

使用字体：

字体图标特有矢量图的上传：

垂直对齐方式vertical-align：

过渡transition：

透明度opacity：

光标类型cursor：

---

定位：

功能：

可以使两个标签压在一起显示。在于灵活的改变标签的位置。

使用方式：

定位有两个维度，一种是定位模式属性position，还有边偏移属性，其中边偏移属性有（top，bottom，left，right）。

其中各自含义类似：

例如top:20px; 指移动标签盒子使得其最上边到参照物最上边距离20px。

right:50%; 指移动标签盒子使得其最右边到参照物最右边距离为参照物的一半。

以此类推...

相对定位：

此时参照物是本身原始位置的盒子(即以原始盒子左上角为原点)。

相对定位的特点：

①改变你位置的参照物是自己原来的位置；

②不脱标，占位；

③标签显示模式特点不变。

绝对定位：

绝对定位的特点：

利用第二点特点，则有自绝父相的应用。可以在设置某个参照物为父级，此时此标签就可在父级的任一想要的位置。

        一般工作中不会单独使用相对/绝对定位，而是配合使用，例如子绝父相，这样就可使子级的参照物是父级。

定位居中：

translate(a,b) ：与上述的top和bottom等的不同，其是相对自身中心的移动，例如：

a=20px，则向右移动20px；a50%，则向右移动自身长的50%。b也是如此。

b为正，则向下移动。以此类推，a为负则向左移动，b为负则向上移动。

固定定位：

定位总结：

堆叠层级：

注意默认效果是后来者居上。这表明想要后者的某个标签在前者上，可将此标签视作前者的兄弟标签，但放在前者标签的后面即可。

CSS精灵：

使用方法：

小图标可以用CSS精灵和字体图标来实现，若是纯色的多用字体图标，若复杂点的优选CSS精灵。

字体图标：

下载字体：

使用字体：

1、用link将iconfont.css文件引入

2、要使用的标签引用两个类。一个是iconfont（即引入的css文件中有这一个类的定义，是默认字体图标的颜色、大小等基本的文字属性）和icon-**，**为想要引入的字体图标的名字。

**可在下载到的压缩包中的html Font class找到。

注意！要更改样式时要定义的选择器需优于类选择器（因为iconfont.css中有.iconfont这个类选择器，包含了基本的字体图标的文字属性，若要更换属性，根据选择器优先原则和后来者远着，需要高于不低于类选择器才可且放在.css后）

字体图标特有矢量图的上传：

有时设计师给我们矢量图（svg文件），此时需要先上传再下载。

如果有特有的图片，则在iconfont网站上传，上传svg 点击去除颜色并提交，而后下载和使用的方法与上同。即可创建独有的字体图标。

垂直对齐方式vertical-align：

浏览器会把行内块、行内标签都当做文字处理，浏览器默认将所有的文字默认都按基线对齐。这就导致图片下方永远有空白间距。使用下述任一非基线对齐的属性都可以将图片下方空白消掉。将图片下方空白消掉还可以将其转为block显示模式。因为block不是按基线对齐。

        且将此属性用于图像标签上，可使旁边文字居中/顶对齐/底部对齐。因为其都指最高内容的顶部/中部/底部。

过渡transition：

透明度opacity：

bgc中的rgba只能让背景半透明，而这个opacity是设置整个元素的透明度（包括背景和内容）

光标类型cursor：