布局定位和图片属性

四种定位：

1. 固定定位fixed：脱离常规流，相对于浏览器窗口定位
2. 相对定位relative：相对于自身定位，常规流依然保存他的位置，
3. 相对定位absolute：相对于离自身最近的定了位的祖先定位，脱离文档流，元素变成块框可以设置高度，宽度。
4. 粘连定位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轴大小，只相对于定位的父元素上面，和没有定位时

转载于:https://juejin.im/post/5bf42121f265da61380ed71b