zz130428的博客

分享 20 个最佳 CSS 动画库它们中的大多数将生成纯 CSS 代码，而不需要任何外部库。1.Animate.css一个开箱即用型的跨浏览器动画库，可供你在项目中使用。2.Magic Animations CSS3一组简单的动画，可以包含在你的网页或应用项目中。3.Animista - On-Demand CSS Animations Library

实现样式1、底部容器设置定位，按钮和文本容器利用z-index设计容器层级，并使按钮定位在右下角；2、设置高度=指定隐藏行数*一行文本的高度，此处一行高度为21px，指定两行隐藏，最大高度就为42px；3、设置按钮背景为白色，覆盖在文本上方；

组件库，同一组件在不同平台的功能一致，但是样式有所不同，如果仍然使用上面的方式进行打包，显然很难满足不同平台对不同样式的需求，因此我开始调研相关的解决方案。发现在诸如 ant-design 这样的知名组件库中，React 组件的书写和样式的书写是分开的，用户在使用过程中，除了需要引入 React 组件之外，还需要统一引入打包好的 css 样式文件。到这里，其实基本上完成了我的需求，只需要将不同主题的各个样式文件统一到对应的入口 less 文件中，之后统一运行编译命令即可生成对应主题的 css 文件。

可以通过给module.red {color: red;

动画这个平常用的也很多，主要是做一个预设的动画。和一些页面交互的动画效果，结果和过渡应该一样，让页面不会那么生硬。（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更美观。background-size属性常用来调整背景图片的大小，主要用于设定图片本身。通常情况，背景都是覆盖整个元素的，利用这个属性可以设定背景颜色或图片的覆盖范围。能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。当我们设置背景图片时，图片是会以左上角对齐，但是是以。

内联首屏关键CSS在打开一个页面，页面首要内容出现在屏幕的时间影响着用户的体验，而通过内联css关键代码能够使浏览器在下载完html后就能立刻渲染而如果外部引用css代码，在解析html结构过程中遇到外部css文件，才会开始下载css代码，再渲染所以，CSS内联使用使渲染时间提前注意：但是较大的css代码并不合适内联（初始拥塞窗口、没有缓存），而其余代码则采取外部引用方式资源压缩利用webpack、gulp/grunt、rollup等模块化工具，将css代码进行压缩

例如：这样的设计解决方案并不是只可以使用颜色渐变，我们可以使用两个div拼接，将文字放置两个div中间，但是有颜色渐变的话，我们就不需要那么复杂的解决。这里的 to top是默认的值，颜色渐变会从上而下由黄色到绿色有过渡渐变。但也不可避免的会出现导航栏是渐变色这种情况或者别的不是单一颜色的情况，红色 ，黄色 ，绿色三色在0-100之间依照顺序有过渡的变化。0为红色，0-50为红色到黄色渐变， 100黄色。效果图如下，左边是没有角度的，右边是45deg的。0-50%都为红色，50-100都为黄色。

在页面布局的时候，经常出现以下情况：这个元素高度怎么没了？这两栏布局怎么没法自适应？这两个元素的间距怎么有点奇怪的样子？......原因是元素之间相互的影响，导致了意料之外的情况，这里就涉及到BFC概念BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：内部的盒子会在垂直方向上一个接一个的放置对于同一个 BFC 的俩个相邻的盒子的 margin 会发生重叠，与方向无关。每个元素的左外边距与包含块的左边

类选择器出现了 1 次， 属性选择器出现了 0 次，伪类选择器出现 0 次，所以 C = (1 + 0 + 0) = 1。经过上面的优先级计算规则，我们知道内联样式的优先级最高，如果外部样式需要覆盖内联样式，就需要使用。后代选择器（#box div），选择 id 为 box 元素内部所有的 div 元素。子选择器（.one>one_1），选择父元素为.one 的所有.one_1 的元素。相邻同胞选择器（.one+.two），选择紧接在.one 之后的所有.two 元素。

在移动端，css中的1px并等于移动设备的1px，因为手机屏幕有不同的像素密度。window中的devicePixelRatio就是反应css中像素与真实像素的比例，也就是设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。所以造成了通过css设置1px，在移动端屏幕上会变粗。

css3中引入与视口有关的新的单位vw和vh, vw表示相对于视口的宽度，vh表示相对于视口高度。在这里插入图片描述那么问题来了，平时拿到的设计图都是基于px标记的，怎么将px转为vw呢? vw单位换算:视口宽度为100vw占满整个视口区域，那么1vw .相当于占整个视口宽度的1%，所以1px= 1/375*100vw所有的页面元素都可以直接进行计算换算成vw单位，但是这样计算和百分比方案计算比较类似，都会比较麻烦。

【代码】CSS 实现七彩圆环loading动画。如何绘制一个半圆环？定义一个div元素，假设宽为200px，高为200px/2（即为宽度的一半），圆角，设置border边框。在父容器内定义七个半圆环，为每个圆环添加自定义变量，–c表示当前圆环的边框颜色，–i表示当前圆环的索引位置（从0开始，依次+1）

上述方法不知道元素大小 但仍然可以实现水平垂直居中的有定位 + transform负值定位 + margin: autoflex布局table布局grid网格布局行内元素的居中布局水平居中text-align: center父元素 display: flex justify-content: center垂直居中单行文本：height = line-height多行文本：disaply: table-cell; vertical-align: middle块级元素居中布局水平

​通常情况下，我们会使用图片或者在以前也讲过盒子模型，默认情况下是一个矩形，实现也很简单当分别取消边框的时候，发现下面几种情况：取消一条边的时候，与这条边相邻的两条边的接触部分会变成直的当仅有邻边时， 两个边会变成对分的三角当保留边没有其他接触时，极限情况所有东西都会消失

目前主流的 css 模块化分为 css modules 和 css in js 两种方案。CSS Modules 指的是我们像 import js 一样去引入我们的 css 代码，代码中的每一个类名都是引入对象的一个属性, 编译时会将 css 类名 加上唯一 hash。CSS-in-JS是一种技术（technique），而不是一个具体的库实现（library）。简单来说CSS-in-JS就是将应用的CSS样式写在JavaScript文件里面，而不是独立为一些.css，.scss或者less之类的文件，这

它和预处理器的不同就在于，预处理器处理的是 类CSS，而 PostCss 处理的就是 CSS 本身。PostCss 做的是类似的事情：它可以编译尚未被浏览器广泛支持的先进的 CSS 语法，还可以自动为一些需要额外兼容的语法增加前缀。更强的是，由于 PostCss 有着强大的插件机制，支持各种各样的扩展，极大地强化了 CSS 的能力。这就和本来用 JS 也可以实现所有功能，但最后却写 React 的 jsx 或者 Vue 的模板语法一样。这三点是传统 CSS 所做不到的，也正是预处理器所解决掉的问题。

clear：both：本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来。: 需要手动添加高度，如何后面的高度发生变化，还要再次修改高度，给后期的维护带来麻烦。给谁清除浮动，就在其后额外添加一个空白标签 ，给其设置clear：both。：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout。：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。：添加许多无意义的标签，结构化比较差。：符合闭合浮动思想，结构语义化正确。：通俗易懂，书写方便。