四种定位:
- 固定定位fixed:脱离常规流,相对于浏览器窗口定位
- 相对定位relative:相对于自身定位,常规流依然保存他的位置,
- 相对定位absolute:相对于离自身最近的定了位的祖先定位,脱离文档流,元素变成块框可以设置高度,宽度。
- 粘连定位sticky:当四条边都在矿口内时,为sticky默认,当元素任意一条边将要离开窗口时,为fixed,会根据窗口在包含块中移动,它自身的布局不能离开其包含块(就是父元素的content-box)。应用:qq好友列表置顶
伪元素的基本使用
每一个非自闭和标签都存在一前一后个伪元素 div::before;div::after,他们在css样式中通过content:'内容'出现,为一个行内元素,是一个元素的一个和最后一个元素。
不可以被hover,如果需要hover时应该选中其父元素在在选这个伪元素。div:hover::before{}。
例子:一般一些小的样式会有用到:
特殊的图片属性
- background-size:cover(图片把元素盖住)contain(元素把图片盖住)与img标签有个类似的新属性object-fit:contain类似
- bacakground-attchment:scroll/fixed/local,图片是否随着元素移动,可以把俩张图片拼接在一起对比。
- -webkit-background-clip:text;通过文字看到背景图片的应用
- transition:渐变属性值:时间,速度
- index:图片的z轴大小,只相对于定位的父元素上面,和没有定位时