CSS笔记IV-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS笔记IV。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

定位

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

相对定位

定位模式：position：relative

left 、right、top、bottom

特点：

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

绝对定位

定位模式：position：absolute

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

特点：

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

定位居中

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

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

固定定位

定位模式：position：fixed

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

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

堆叠层级

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

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

属性名：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精灵实现步骤：

创建盒子盒子尺寸与小图尺寸相同
添加盒子背景图为精灵图
添加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

属性值：关键字表格下文章来源地址https://www.toymoban.com/news/detail-816220.html

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