一、定位
1.1定义
作用:灵活的改变盒子在网页中的位置
实现:定位模式:position
边偏移:设置盒子的位置
left
right
top
bottom
1.2相对定位
position:relative
特点:
1.改变位置的参照物是自己原来的位置
2.不脱标、占位
3.显示模式不变
1.3绝对定位
position:absolute
使用场景:子级绝对定位,父级相对定位(子绝父相)
特点:
1.先找最近的已经定位的元素参照,所有祖先元素都没定位,就参照浏览器
2.显示模式变行内块
3.脱标,不占位
二、定位居中
2.1实现步骤
1.绝对定位
2.水平、垂直边偏移50%
3.子级向左、上移动自身尺寸的一半(margin、transform)
2.2transform
定位居中:transform:translate(50%,50%)
三、固定定位
position:fixed
特点:
1.脱标、不占位
2.参照物是浏览器窗口
3.显示模式具备行内块特点
四、堆叠层级
默认效果:按照书写顺序,后来者居上
作用:设置元素的层级顺序,改变元素定位的显示顺序
想要谁在上就给谁加z-index
取值为整数,默认为0,越大越靠上
五、css精灵
5.1优点
减轻服务器的压力,提高页面加载速度
5.2使用
设置背景图然后调整图片偏移量
六、字体图标
6.1下载
图标库:https://www.iconfont.cn/
下载步骤:
进入官网-选图标-加入购物车-添加至项目-下载到本地
6.2使用
1.把下载好的文件夹放进项目文件
2.在html文件中link iconfont.css文件 字体文件不能删
3.标签使用字体图标类名
class="iconfont 要使用的图标类名"
打开实例文件-fontclass-复制图标下的类名
如果要调整图标大小,选择器的优先级要高于iconfont类
6.3上传矢量图
svg文件上传图标库,生成字体
七.css修饰属性
7.1垂直对齐方式
vertical-align
属性值
baselline:基线对齐(默认)
top:顶部
middle:居中
bottom:底部
浏览器把行内、行内块当做文字处理,默认基线对齐(图片下面留白)
解决方式:
1.转成块
2.给图片设置对齐方式,不是基线对齐就不会留白
八、过渡
为元素在不同状态下切换添加过渡效果
transition
属性值
过渡属性 花费时间
注意:
1.过渡的属性可以是具体的css属性
2.可以为all(两个状态属性值不同的所有属性,都产生过渡效果)
3.transition设置给元素本身
九、透明度
设置整个元素的透明度
属性名:opacity
属性值
0:完全透明
1:不透明
0-1之间:半透明
十、光标类型
鼠标悬停在元素上,指针的显示样式
cursor
属性值
default:默认值,箭头
pointer:小手
text:工字型
move:十字光标