position
static(默认值)静止的未开启定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位
相对定位
1.不会使元素脱离文档流,元素的性质不会改变,块还是块,行还是行
2.参照元素在文档流中的位置来进行定位,如果没有设偏移量,元素的位置不会发生变化
3.提升了元素的层级
绝对定位
1.元素的层级提升,脱离了文档流
2.如果不设偏移量,元素的位置不会发生变化
3.元素性质发生变化,原来的块元素宽高被内容撑开
4.包含块(离当前元素最近的祖先块元素)
绝对定位的包含块(离他最近的开启了定位的祖先块元素,如果所有 的祖先元素都没有开启定位,则根元素html就是它的包含块) 绝对定位是相对于其包含块进行的。
固定定位 也是一种绝对定位 参照浏览器的视口进行定位
粘滞定位 跟相对定位的特点基本一致 当元素到达某个位置将其固定
字体相关的样式 color: 字体颜色 font-size 字体大小 font-family 字体类别 line-height 文字占有的实际高度 font-weight 字重 font-style 字体风格 font: 字重 字体风格 字体大小/行高 字体族;
字体图标
阿里图标库 使用步骤
1.找到需要的图标 加入购物车
2.找到购物车 添加到自己的项目
3.我的项目 点击下载本地 放到自己项目中
使用方式 引入css iconfont
1.通过实体来使用图标:标签上加上类名iconfont,使用实体语法
2.通过类名使用: 把类名放在iconfont后面
3.使用伪元素 ::before { content: '\e61c'; font-family: 'iconfont'; }
小结:定位一般适用于小范围,字体图标这里学到了,特别有意思,原来这些小图片都不用切图了,都是字体,可以随心变化颜色大小,哎呀,Joy老师讲的太有意思了。