跟Joy姐学前端 css-day05

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老师讲的太有意思了。