|
Hello 小伙伴们早上、晌午、下午、夜晚和深夜好，这儿是 jsliang~
本 CSS 系列文案： 主推学导致用。结合面试题和工作实例，让小伙伴们深入体验 61 个工作平常的 CSS 属性和各样 CSS 知识。主推纯 CSS。尽可能运用 HTML + CSS 完成学习目的，但仍然有 “一小部分” 功能必须用到 JavaScript 知识，适合新人学习 + 大佬复习。倘若文案在有些细节上没写清楚或误导读者，欢迎评论/吐槽/批判，你的点赞、保藏和关注是我更新的动力 ❤ 更加多知识分享文案可见：jsliang 的文档库本系列知识点代码可见：Demo —— all for one
一 前言
在 2022.07 上下的时候，同办公室的前端小伙伴就吐槽：我 CSS 有点差，倘若能稍微学习提高下就好了。
哎嘿！这学习思路不就来了吗~
遂 偷偷摸摸去观看 了自己项目中的 121 个 CSS/Less 文件，将里面的 CSS 属性都抽离了出来，本来想直接 share 过去，期盼让他看完能有所收获。
后面一想，这般突兀将知识点抛出来没啥道理，还显出非常枯燥！
因此，结合「Tab 滑动门」「DropDown 下拉面板」「Flex 布局」等工作实例，让小伙伴们能更好地体会这些 CSS 属性的功效。
倘若文案在有些细节上没写清楚或误导读者，欢迎评论/吐槽/批判，你的点赞、保藏和关注是我更新的动力 ❤
二 目的
jsliang 在项目中挖掘的平常 CSS 属性有 61 个，并进行了个人归类。
倘若下面归类有 CSS 属性，「确认过眼神，那是你不懂的 code」，请运用 Ctrl + F 在本文搜索该 CSS 属性在实例上的运用。
这儿仅做统计，用以辅助 jsliang 统计那些属性还没写案例，或让小伙伴们瞧瞧那些属性是陌生的~
在认识学习这些 CSS 属性的时候，举荐 2 个可靠网站： Can I use - CSS 兼容性查找MDN - CSS 属性介绍
2.1 影响元素体积[x] box-sizing 计算元素体积的方式[x] width 宽度 [ ] min-width 最小宽度[x] max-width 最大宽度[x] height 高度 [ ] min-height 最小高度[ ] max-height 最大高度[x] margin 外边距[x] padding 内边距[x] border 边框
2.2 字体[x] font-size 字体体积[x] font-weight 字体肥瘦[ ] font-style 字体风格[ ] font-family 字体类型
2.3 影响颜色[x] bac公斤round 背景[x] color 颜色[x] filter 滤镜[x] opacity 透明度
2.4 伪元素[x] ::before 第1个子元素[x] ::after 最后一个子元素[x] content 用于在元素的 ::before 和 ::after 伪元素中插进内容[x] ::placeholder 适用于 <input>，调节 placeholder 样式
2.5 伪类[x] :hover 鼠标 hover
| 
发表于 2024-6-30 08:29:49
