<!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>