学透CSS

总有人觉得CSS就是一个布局的工具，忽视了CSS的重点，CSS的全称是啥？层叠样式表（Cascading Style Sheets）第二个词是啥，样式样式样式！总有人把CSS的强大忽略了。同样的效果，

在做响应式网站的时候，我们经常需要考虑的是文字的大小，图片的宽高，盒子的大小等等！对于我个人来说，我是经常使用rem，rem，vh,vw等等响应式单位的。而对于文字的大小，我使用最多的是rem和vw。

相同的输入框，第一眼的效果可能差不多，但是只要你点他，就会发生美妙的事情。在掘金网页端，不知道有没有人注意到导航栏的搜索框，当你不动他的时候，他是小小的一个。当你开始输入的时候，他变长了！

首先定宽高比，在网页中开发中时很常见的，而且面试也偶有出现。看到这个题目，自己第一反应没准就是，这不是很简单吗？直接将宽度设置为和宽度同样的px不就可以了。但是宽度不定呢？通常我们的做法是啥？

最近公司在做大屏显示，不过这个页面可以在大屏下显示，也可以在电脑上显示，不过显示的内容是不同的。当大屏的时候，页面会自动隐藏一些元素，并对一些元素设置样式。

CSS开始支持了很多先进的思想。变量就是一个巨大的进步。在其他语言中，变量与生俱来，CSS发展到今天，变量才有所进步！

可浮动占位符，在移动端的是必兴的，有趣的交互往往能给用户带来美妙的体验，:placeholder-shown在输入的交互就像是西方的耶路撒冷！！

在button按钮的设计上，为了增加交互感，我给button加上了一点hover的效果。但当你快速hover的时候，会出现闪烁的效果，该怎么办？防抖节流？

觉得自己的CSS无趣，觉得自己写不出来吗，想要快速学习如何制作一些有趣的东西？倾情推荐，绝不含水，一键使用！！！

CSS是世界无尽奇妙，不像一般的编程语言那样需要抽象的思维和严密的逻辑，它需要的是你美妙的想象力，简单的代码也可以实现复杂的效果，构建虚拟且真实的世界。

对于不同的内容，我是想有不同的复制方式的。例如**代码块**我就想读者单击就可以复制，这样方便读者本地调试，而对于文字描述部分，希望可以不允许读者复制。

CSS的世界本就是有趣的，只是我们学的太少，套路太少，制作的东西总是差点美感，只希望几个简单的气泡，激发你的创作热情！

平时开发的时候，我们遇到加载，要么是UI框架中自带，要么就是百度，然后CV到项目中？但是，自己实现的时候，又会没有思路。久而久之，变成了CV工程师。本文针对不同的加载方式，讲解实现思路。

前言 澄清一个事实：本系列涉及到的加载均为收集所得，非本笔者所实现，本文只做 CSS 解析。不喜勿喷！！！。 喜欢的求个免费的赞 为什么会写这种文章呢？平时开发的时候，我们遇到加载，要么是 UI 框架

backdrop-filter 可以说是 CSS 中为毛玻璃量身定制的一个属性了。这也就是我在标题中使用熠熠生“毛”的原因了。

在登录twitter的时候发现他的输入框的placeholder是可以浮动的。当输入框获取到焦点的时候，placeholder 会跑到上面去。我觉得这样的登录方式的好处是：可以减少一个label.

掘金在登录输入密码的时候，这个小人会挡住自己的眼睛，有很多作者用各种方法实现这个效果,:focu-within有同样可以实现这个效果。

每个公司，每个人的管理方式都是不一样的。大家可以借鉴，取他之长。补己之短。合理的管理方式，提高CSS的开发效率！

截断文本的方式有很多，line-clamp胜在可以指定行数。这样截断文本，就多了很多灵活性！！！！！

某次浏览沸点的时候，无意间的打开控制台，偶遇了text-rendering。 这个没有用过的新鲜属性，让我瞬间开心了起来，又可以水一篇文章了学会新的属性了。 兼容性 掘金都在用，我觉得行！