那些你不知道的CSS

**开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 14 天，[点击查看活动详情](https://juejin.cn/post/7194721470063312933 "htt

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 27 天，点击查看活动详情 AndroidiOS 1、ios端兼容input光标高度 问题详情描述： input输入框光标，在安卓

首先简单介绍一下 `:` 和 `::` ： - `:` 指的是伪类，例如`:visited`或`:hover` - `::` 用于伪元素，例如`::first-of-type`或`::after`

contain contain属性允许指定特定的 DOM 元素和它的子元素，让它们能够独立于整个 DOM 树结构之外。目的是能够让浏览器有能力只对部分元素进行重绘、重排，而不必每次都针对整个页面。 c

简写（语法糖）可能给编码带来了很多便利，但简写也会带来一些问题，来讨论一下 CSS 中的简写的"爱恨情仇"。<br />为什么说是爱恨情仇呢？因为简写带来了很多的便利，但凡事都有好有坏，不能说简写一点

在 CSS 中，其实存在各种各样的函数。具体分为： Transform functions Math functions Filter functions Color functions Image

基本概念 CSS filter 属性将模糊或颜色偏移等图形效果应用于元素形成滤镜，滤镜通常用于调整图像，背景和边框的渲染。它的值可以为 filter 函数 <filter-function> 或使用

CSS Houdini 是一项新的 Web 技术，它允许 Web 开发人员通过 JavaScript 访问底层 CSS 渲染引擎，从而实现对 CSS 样式的完全自定义。这项技术被称为 "Houdini

现象 1、同样一篇文章，在 macOS 操作系统的浏览器中能正常显示文字的加粗效果，在 Windows 操作系统中无论如何都不显示加粗效果。 2、显示粗体的文字位于 <strong> 标签中。 3、浏

1、超级居中：place-items: center 对于第一个“单行”布局，解决所有 CSS 领域中最大的谜团：居中。使用 place-items: center 会让此操作比想象的容易。首先指定

创建高级动画听起来是一个很难的话题，但好消息是，在CSS中，可以将多个简单的动画相互叠加，以创建一个更复杂的动画 学习如下几点： - 什么是贝塞尔曲线，以及如何用一行CSS来创建一个 "复杂"的动

众所周知，函数节流（throttle）是 JS 中一个非常常见的优化手段，可以有效的避免函数过于频繁的执行。 举个例子：一个保存按钮，为了避免重复提交或者服务器考虑，往往需要对点击行为做一定的限制，比

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 14 天，点击查看活动详情 HTML5 移动端 移动端 H5 相关基础技术概览 iOS 滑动不流畅 表现上下滑动页面会产生卡顿，手

介绍 像任何其他语言一样，CSS也有自己的功能。可以将它们插入要放置值的位置，或者在某些情况下，将其插入另一个值声明。一些CSS函数甚至允许将其他函数嵌套在其中。 1、CSS attr函数 该函数at

一、filter 滤镜 "滤镜"这个名字很贴切了, 可以理解成为元素添加各种显示效果, 先不用记各种名词咱们直接看效果, 使用方法 & 效果图: 看上图里的这些效果, 比如第一排第一个, 会想到在某些

### 一、浏览器渲染 回顾一下浏览器的渲染过程，先上图： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/90458840c83540

前言 如何写出一套可维护的CSS库？不妨谈谈CSS的设计模式/架构吧。接下来将分析三个主流的CSS设计思想和一个最近通用的CSS设计思想：OOCSS、SMACSS、BEMCSS、METACSS。 OO

很多时候，希望有一种方法可以避免某种CSS问题或行为的发生。网页内容是动态的，网页上的东西可以改变，从而增加了出现CSS问题或奇怪行为的可能性。 防御式 CSS是一个片段的集合，可以编写受保护的CSS

CSS是如何工作的？ CSS阻止渲染 当一个页面有CSS可用时，无论是内联还是外部样式表，浏览器都会延迟渲染，直到CSS被解析。这是因为没有CSS的页面通常是不可用的。如果浏览器展示了一个没有CSS的