<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>定位position</title>
</head>
<body>
<!-- 定位
作用：灵活的改变盒子在网页中的位置
实现：
1.定位模式：position
2.边偏移：设置盒子位置
left、right、top、bottom
-->
<!-- 相对定位
position：relative
特点：
1.改变位置的参照物是 自己原来的位置
2.不脱标，占位
3.标签显示模式特点 不变
-->
<!-- 绝对定位
position：absolute
使用场景：子级绝对定位，父级相对定位（子绝父相）
特点：
1.脱标，不占位
2.参照物：先找最近的已经定位的祖先元素，如果所有祖先元素都没有定位，参照浏览器可视区域改位置
3.显示模式特点改变：宽高生效（具备了行内块的特点）
-->
<!-- 定位居中
实现步骤：
1.绝对定位
2.水平，垂直边偏移为50%
3.子级向左，上移动自身尺寸的一半
左，上的外边距为尺寸的一半
transform：translate（-50%，-50%）
-->
<!-- 固定定位
position：fixed;
特点：
1.脱标，不占位置
2.参照物：浏览器窗口
3.显示模式特点具备行内块特点
-->
<!-- 堆叠层级 z-index
默认效果：按照标签书写顺序，后来者居上
作用：设置定位元素的层级顺序，改变定位元素的显示顺序
z-index取值是整数，默认是0，取值越大显示顺序越靠上
-->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS精灵</title>
</head>
<body>
<!--
css精灵也叫css sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position精确定位出背景图片的位置
优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度
-->
<!-- 实现步骤
创建盒子，盒子尺寸与小图尺寸相同（大图包含所有小图）
设置盒子背景图为精灵图
添加background-position属性，改变背景图位置
使用pxcook测量小图片左上角坐标
取负数坐标为background-position属性值（向左上移动图片位置）
background：url(地址) xxxpx xxxpx；
-->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>字体图标</title>
</head>
<body>
<!-- 字体图标：展示的是图标，本质是字体
作用：在网页中添加简单的，颜色单一的小图标
优点：
灵活性：灵活地修改样式，例如：尺寸，颜色等
轻量级：体积小，渲染快，降低服务器请求次数
兼容性：几乎兼容所有主流浏览器
使用方便：先下载再使用
-->
<!-- 字体图标-下载字体
iconfont图标库：https://www.iconfont.cn/
下载字体
登录，素材库，官方图标库，进入图标库，选图标，加入购物车，添加至项目，确定，下载至本地
-->
<!-- 字体图标-使用字体
1.引入字体样式表（iconfont.css）
2.标签使用字体图标类名
iconfont：字体图标基本样式（字体名，字体大小等等）
icon-xxx：图标对应的类名
注意：如果要调整字体大小，选择器的优先级要高于iconfont类
-->
<!-- 字体图标-上传矢量图
作用：项目特有的图标上传到iconfont图标库，生成字体
-->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS修饰属性</title>
</head>
<body>
<!-- 垂直对齐方式vertical-align
属性值：
baseline：基线对齐（默认）
top：顶部对齐
middle：居中对齐
bottom：底部对齐
-->
<!-- 过渡属性 transition
作用：可以为一个元素在不同状态之间切换的时候添加过度效果
属性名：transition（复合属性）
属性值：过度的属性 花费时间（s）
提示：
过度属性可以是具体的css属性
也可以为all（两个状态属性值不同的所有属性，都产生过度效果）
transition设置给元素本身
-->
<!-- 透明度属性 opacity
作用：设置整个元素的透明度（包含背景和内容）
属性名：opacity
属性值：0 - 1
0：完全透明（元素不可见）
1：不透明
0-1之间小数：半透明
-->
<!-- 光标类型 cursor
作用：鼠标悬停在元素上时指针显示样式
属性值：
default：默认值，通常是箭头
pointer：小手效果，提示用户可以点击
text：工字型，提示用户可以选择文字
move：十字光标，提示用户可以移动
-->
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
