关于前端:CSS-实例系列

Hello 小伙伴们早上、中午、下午、早晨和深夜好，这里是 jsliang~

本 CSS 系列文章：

1. 主推学以致用 。联合面试题和工作实例，让小伙伴们深刻体验 61 个工作常见的 CSS 属性和各种 CSS 常识。
2. 主推纯 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] background 背景
• [x] color 色彩
• [x] filter 滤镜
• [x] opacity 透明度

2.4 伪元素

• [x] ::before 第一个子元素
• [x] ::after 最初一个子元素
• [x] content 用于在元素的 ::before 和 ::after 伪元素中插入内容
• [x] ::placeholder 实用于 <input>，调整 placeholder 款式

2.5 伪类

• [x] :hover 鼠标 hover 成果
• [] :active 元素沉闷态成果

2.6 元素选择器

• [x] :first-child 第一个元素
• [x] :last-child 最初一个元素
• [x] :nth-child 第几个元素，能够应用 2n 这种设置偶数个元素款式
• [] a > b 兄弟元素选择器
• [] a + b 兄弟元素选择器
• [x] a ~ b 兄弟元素选择器

2.7 定位

• [x] position: absolute/fixed 开启定位
• [x] left 距左
• [x] right 距右
• [x] top 距上
• [x] bottom 距下

2.8 元素可见

• [x] visibility: visible/hidden 视觉上显示暗藏
• [x] display: block/none DOM 层级上显示暗藏
• [x] opacity: 1/0 透明度上显示暗藏

2.9 Flex 全家桶

• [x] display: flex Flex 布局
• [x] justify-content 程度方位调整
• [x] align-items 垂直方位调整
• [x] flex-direction 排列方向
• [x] flex-shrink Flex 的元素是否能挤压
• [] flex-grow Flex 的元素增长项
• [] flex-basis Flex 的元素起始地位

2.10 其余：字母程序

• [x] animation 动画
• [x] border-radius 圆角
• [x] box-shadow 暗影
• [x] calc() 计算属性
• [x] cursor 鼠标手势
• [x] display 布局
• [x] line-height 行高
• [x] linear-gradient 创立色彩突变的图片
• [x] :not() 非指定元素
• [x] outline 轮廓属性，可用于 input/a 等属性

• [x] overflow 滚动成果

  • [x] overflow-x 横向滚动成果
  • [x] overflow-y 竖向滚动成果
• [x] position 定位
• [x] pointer-events 特定元素是否响应鼠标事件
• [x] text-align 程度布局形式
• [x] text-overflow 如何解决溢出的文本（…）
• [] text-indent 块文本首行缩进
• [x] transition 状态切换过渡成果

• [x] transform 旋转，缩放，歪斜或平移给定元素

  • [x] transform-origin 起始地位
• [] vertical-align 垂直布局形式
• [x] white-space 解决元素空白
• [x] z-index 层级

三 初始化导航页

OK，话不多说，让咱们折腾起来吧！

新建 code 文件夹，用来寄存咱们咱们的我的项目代码：

- code
 - index.html

首页的 HTML 次要做一个导航，原本打算上 Shadow DOM 做一个公共局部代码的。

但想想，这样减少了心智累赘，所以后续代码会尽可能简洁，并且解说局部只有要害代码~

（须要全副代码的，去代码仓库或者在线代码平台看喔~）

code/index.html

<div class="catalog">
  <a class="catalog-item active" target="_blank" href="./dropdown/index.html">Dropdown 下拉面板 </a>
  <a class="catalog-item" target="_blank" href="./flex/index.html">Flex 布局 </a>
  <a class="catalog-item" target="_blank" href="./tab/index.html">Tab 滑动门 </a>
  <a class="catalog-item" target="_blank" href="./dialog/index.html">Dialog 对话框 </a>
  <a class="catalog-item" target="_blank" href="./case-a-letter/index.html"> 一封给将来本人的信 </a>
  <!-- 滑动门 -->
  <div class="catalog-active"></div>
</div>

简略来说，首页就是做了个一般的导航栏，关上页面后可见成果：

线上代码地址：

• 码上掘金 – CSS 系列 – 首页

这样，咱们的首页 / 导航页就实现啦，接下来一一实现实例的内容即可！

Tips：失常开发，能够通过 npm 装置 live-server 热更新代码，并配合 Visio Studio Code 等任意编辑器晦涩应用~

本系列的我的项目代码，你能够通过 GitHub 仓库查看，或者在线上代码平台尝试：

• 更多常识分享文章可见：jsliang 的文档库
• 本系列知识点代码可见：Demo —— all for one

四 CSS 实例

后续会逐步完善上面的实例内容，小伙伴们能够看有没有感兴趣的实例~

（或者在这个列表外面不存在的实例，也能够喊 jsliang 帮你实现）

4.1 Tab 滑动门

通过 HTML + CSS，以及简略的 JS，实现 Tab 滑动门：

• 文章教程地址 ：已有草稿，待发布
• 视频教程地址 ：待制作
• 仓库代码地址 ：已有草稿，待发布
• 线上代码地址 ：已有草稿，待发布
• 次要波及属性 ：transition

4.2 Flex 布局

通过 HTML + CSS，以及简略的 JS，实现 Flex 切割 div：

• 文章教程地址 ：已有草稿，待发布
• 视频教程地址 ：待制作
• 仓库代码地址 ：已有草稿，待发布
• 线上代码地址 ：已有草稿，待发布
• 次要波及属性 ：display: flex、flex-shrink

4.3 Dropdown 下拉面板

通过纯 HTML + CSS，实现 Dropdown 下拉面板：

• 文章教程地址 ：已有草稿，待发布
• 视频教程地址 ：待制作
• 仓库代码地址 ：已有草稿，待发布
• 线上代码地址 ：已有草稿，待发布
• 次要波及属性 ：::-webkit-scrollbar、::-webkit-scrollbar-thumb、box-sizing、calc()、overflow-y

4.4 Dialog 对话框

通过 HTML + CSS，以及简略的 JS，实现 2 套 Dialog 对话框动画：

• 文章教程地址 ：已有草稿，待发布
• 视频教程地址 ：待制作
• 仓库代码地址 ：已有草稿，待发布
• 线上代码地址 ：已有草稿，待发布
• 次要波及属性 ：transition

4.5 Envelope 给本人的一封信

通过多个 HTML + CSS + JS 成果，组合成一个比拟残缺的实例：

• 文章教程地址 ：已有草稿，待发布
• 视频教程地址 ：待制作
• 仓库代码地址 ：已有草稿，待发布
• 线上代码地址 ：已有草稿，待发布
• 次要波及属性 ：calc()、linear-gradient、::-webkit-scrollbar、::-webkit-scrollbar-thumb、transition、transform-origin、repeating-linear-gradient、opacity、rotateX()、translateY()、::before、animation

4.6 Input 输入框

通过纯 HTML + CSS，实现 Input 输入框：

• 文章教程地址 ：已有草稿，待发布
• 视频教程地址 ：待制作
• 仓库代码地址 ：已有草稿，待发布
• 线上代码地址 ：已有草稿，待发布
• 次要波及属性 ：transition、::placeholder、:not()、a ~ b、transform、translate3d()、scale、opacity、transform

4.7 Rate 评分

通过 HTML + CSS，以及简略的 JS，实现评分性能：

• 文章教程地址 ：已有草稿，待发布
• 视频教程地址 ：待制作
• 仓库代码地址 ：已有草稿，待发布
• 线上代码地址 ：已有草稿，待发布
• 次要波及属性 ：display: flex、flex-direction、::after、a ~ b、:hover、:checked

4.8 Gallery 相册

通过纯 HTML + CSS，实现相册面板，同时有一点小小的 JS 性能：

• 文章教程地址 ：已有草稿，待发布
• 视频教程地址 ：待制作
• 仓库代码地址 ：已有草稿，待发布
• 线上代码地址 ：已有草稿，待发布
• 次要波及属性 ：box-shadow、opacity、:hover、box-sizing、filter、brightness()、:first-child、:last-child

4.9 Waterfall 瀑布流

通过简略的 HTML + CSS，以及 JS 动静绘制瀑布流：

• 文章教程地址 ：已有草稿，待发布
• 视频教程地址 ：待制作
• 仓库代码地址 ：已有草稿，待发布
• 线上代码地址 ：已有草稿，待发布
• 次要波及属性 ：display: flex、flex-shrink、calc()、@media

五 参考文献

• Can I use – CSS 兼容性查问
• MDN – CSS 属性介绍

不折腾的前端，和咸鱼有什么区别！

感觉文章不错的小伙伴欢送点赞 / 点 Star。

如果小伙伴须要分割 jsliang：

• Github
• 掘金

集体联系方式寄存在 Github 首页，欢送一起折腾~

争取打造本人成为一个充斥摸索欲，喜爱折腾，乐于扩大本人知识面的一生学习斜杠程序员。

jsliang 的文档库由 梁峻荣 采纳 常识共享 署名 - 非商业性应用 - 雷同形式共享 4.0 国内 许可协定 进行许可。<br/> 基于 https://github.com/LiangJunrong/document-library 上的作品创作。<br/> 本许可协定受权之外的应用权限能够从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处取得。