2022web前端全栈完整整理——（二）css/css3篇

1. css基础：https://alex-ss.blog.csdn.net/article/details/83053901

2. css3新增属性值initial：可直接取消某个元素指定的样式值使其变为默认值，如color:initial。

3. vue3中的.vue文件的style里的css可以使用js/ts中的声明变量，且支持双向响应：属性：v-bind(js/ts变量)。

 4. vue3中深度选择器:deep()的使用，在vue2中css使用>>>，以及预编译less/scss/sass中的/deep/，在vue3中都替换为:deep()：

.box{:deep(.ul){/*样式*/}
}.box :deep(.ul){/*样式*/
}

 5. 镜像界面，像沙特阿拉伯语：

.css{direction：rtl/ltr;
}

6. css磨砂效果：https://blog.csdn.net/qq_42231156/article/details/101203553

 7. css文件在js/css/less/scss中的引入：

// 在js中
import 'xx/reset.css'
// 在css/less/scss中，结尾';'符号是必须的
@import 'xx/reset.css';
@import url('xx/reset.css');

8. css自定义滚动条：https://blog.csdn.net/qq_42231156/article/details/103070807

9. css单行/多行超出省略：https://blog.csdn.net/qq_42231156/article/details/84565677

10. vue项目响应式适配插件库：postcss-px2rem或者postcss-plugin-px2rem

11. css盒模型：https://blog.csdn.net/qq_42231156/article/details/103176762

12. css重置/通用样式库：https://blog.csdn.net/qq_42231156/article/details/124463067

13. css绘制三角形：https://blog.csdn.net/qq_42231156/article/details/124619100

原理：宽度width为0；height为0；（1）有一条横竖边（上下左右）的设置为border-方向：长度 solid red，这个画的就是底部的直线。其他边使用border-方向：长度 solid transparent。（2）有两个横竖边（上下左右）的设置，若斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。若斜边是在三角形的左边，这时候设置top或bottom的直线，和左边的斜线。

​​

 14. 媒体查询@media：

/*
mediatype常用值：all(所有设备),print（打印机和打印预览）,screen(电脑，平板，智能手机等)
mediafeature常用值：max-width/min-width/max-height/min-height
*/

 15. css九宫格：N宫格相同原理实现

​

16. css的动画库：Animate.css

17. css文字环绕图片shape-outside：https://blog.csdn.net/qq_40047198/article/details/89087084

​​

18. css的粘滞定位（滚动吸顶）：如通讯录列表滚动时，当前滚动位置字母实在吸顶：position：sticky。

 ​​

 19. css移动端web开发技巧：https://blog.csdn.net/qq_42231156/article/details/84565595

 20. iconfont图标库：https://www.iconfont.cn/

 21. css的cursor鼠标样式：http://css-cursor.techstream.org/

 22. css中不常用，但特有用的一些属性：

• @font-face：引入字体文件。
• font-stretch：字体拉伸。
• font-kerning：字距。
• letter-spacing：字符间距。
• text-align-last：文本最后一行对齐方式。
• vertical-align：纵向对其方式，如文本和图片。
• word-spacing：单词间距。
• text-transform：文本字母大小写转换。
• text-decoration：文本划线。
• text-shadow：文本阴影。
• white-space：文本中空白处理。
• hyphens/word-break：换行和断字。
• writing-mode：文本横向纵向书写方式。
• ::first-letter：首字母伪类。
• ::first-line：首行伪类。
• shape-outside、polygon：文字环绕图片。
• position:sticky：滚动吸顶。
• background-clid：裁剪背景。
• background-attachment：背景粘附，即背景跟随滚动。
• direction:rtl/ltr：镜像界面，如沙特阿拉伯语，具有继承性。
• filter、mix-blend-mode、background-blend-mode、isolation、clip-path、mask-image、object-fit：css滤镜、裁剪、混合、遮罩、填充......
• display:grid、grid-template-rows、gird-template-columns、grid-row、grid-column：栅格布局。
• ......

持续更新补充中......

• 2022web前端全栈完整整理——（一）浏览器篇

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！