CSS笔记IV

定位

作用：灵活的改变盒子在网页中的位置

相对定位

定位模式：position：relative

• left 、right、top、bottom

特点：

1. 改变位置的参照物是自己原来的位置
2. 不脱标 ，而且占位
3. 标签显示模式表改变

绝对定位

定位模式：position：absolute

使用场景：(子绝父相)子级绝对定位，父级相对定位 为子级设置绝对定位，为父级设置相对定位

特点：

1. 脱标，不占位 与相对定位恰恰相反
2. 参照物是先找最近已经定位的父级元素
3. 显示模式会具备行内块标签的特点

定位居中

1. 绝对定位
2. 水平垂直边偏移为50%
3. 子级向左、上移动自身尺寸的一般
   1. 左、上的外边距为尺寸的一半
   2. transfrom：translate(-50%，50%)

<style>
    img {
        position:absolute;
        left:50%;
        top:50%;
        transform: translate(-50%,50%);
    }
</style>

固定定位

定位模式：position：fixed

场景：元素的位置在网页滚动时不会改变

1. 脱标，不占位
2. 参照物为浏览器窗口
3. 显示模式：具有行内块特点

堆叠层级

默认效果：按照标签书写顺序，后来者居上 (弹夹压子弹，最后进来的子弹最先射出去)

作用：设置定位元素的层级顺序，改变定位元素的显示顺序

属性名：z-index

属性值：整数 默认是0 取值越大显示顺序越靠上

总结

定位模式	属性值	是否脱标	显示模式	参照物
相对定位	relative	否	保持标签原有显示模式	自己原来位置
绝对定位	absolute	是	具有行内块特点	1.已经定位的祖先元素 2.浏览器可视区
固定定位	fixed	是	具有行内块特点	浏览器窗口

CSS高级技巧

css精灵图（sprite）其实就是通过将多个图片融合到一张图里面，然后通过CSS background背景定位技术技巧布局网页背景。在需要用到图片的时候，现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现图片的显示。

优点

• 利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
• CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
• 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
• 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

减少服务器被请求的次数，减轻服务器的压力，提高页面加载速度

CSS精灵实现步骤：

1. 创建盒子 盒子尺寸与小图尺寸相同
2. 添加盒子背景图为精灵图
3. 添加bgposition 属性 改变背景图位置
   1. 测量小图片左上角坐标
   2. 取负数坐标为bgp的属性值 (向左上移动图片位置)

以图片左上角为坐标原点

其实就是给一张全家福 自己需要那个元素给该元素的坐标就可以了

字体图标

展示的是图标，但是本质还是字体

可以在网页中添加简单的颜色单一的小图标。

优点

• 灵活性：灵活的修改样式 例如尺寸，颜色
• 轻量级：体积小 渲染快，降低服务器请求次数
• 兼容性 ：几乎兼容所有的主流媒体
• 使用方便：先下载再使用

下载

图标库地址：

www.iconfont.cn

第一步，引入字体样式表

第二步，标签使用字体图类名

• iconfont 字体图标基本样式(字体名，字体大小)
• icon-xxx 图标对应的类名

切记:如果要调节字体大小 选择器的优先级要高于iconfont 类

上传

项目中特有的图标上传到iconfont图标库 ，生成字体

上传的图标后缀为svg

垂直对齐方式

可以理解为图片和文字的对齐方式

属性名：vertical-align

属性值关键字：baseline 基线对齐(默认方式) 、middle(图片后的文字垂直居中效果) top (图片后的文字呈现顶对其效果) bottom(呈现底对齐效果)

图片后的文字 的对齐方式

把行内标签和行内块都当作字来处理

过渡属性

作用：可以为一个元素在不同状态之间切换的时候添加的效果

显示效果：就是在网页中将鼠标放在某个元素上面的时候元素会发生变化

例如：把鼠标放在图片上面，图片会放大

属性名：transition

transition作为复合属性 属性值的顺序是： 过渡的属性 花费的时间(单位是秒s)

注意：

• 过渡的属性可以是具体的css属性
• 也可以作为all(两个状态属性不同的所有属性，都产生过渡效果)
• transition设置给元素本身

相当于为鼠标悬停所产生的效果添加过渡时间 在鼠标悬停效果身上加了一个缓慢debuff

<style>
        img {
            width: 200px;
            height: 200px;
            transition: all 1s;
            /*transition属性是加给元素而非hover鼠标悬停选择器*/
        }
        img:hover{
            width: 400px;
            height: 400px;
        }
    </style>

修饰属性

透明度

设置元素的透明度 ，包括背景以及内容

属性名字: opacity

属性值 ：0-1 (从完全透明到不透明 以小数代表透明程度)

光标类型 cursor

鼠标悬停在元素上时指针显示样式

属性名字：cursor

属性值：关键字表格下

属性值	效果
default	默认值，通常是箭头
pointer	小手效果，(点击者) 提示用户可以点击
text	I 光标类型 顾名思义用于提示用户输入文字
move	十字箭头光标，(移动) 提示可以移动