Lee的博客

IntersectionObserver解决元素在可视区判断问题。

1. 多列布局（Multi-column Layout）MDN - CSS Multi-column LayoutCan I Use - CSS3 Multi-column LayoutCSS 提供了对多列布局的支持。支持设置布局中的列数 (column-count)、内容应如何列之间的流动规则、列之间的间距 (column-gap) 以及列分割线（column-rule）的样式。比如可以实现下面的瀑布流效果：Codepen demo点击预览主要样式：.mas.

本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。1、交错动画有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。那么如何将动画变得稍微有趣一点呢？很简单，既然它们都是同一时刻开始运动的，那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢？注意到CSS动画有延迟（delay）这一属性。举个栗子，比如有十个元素播放十个动画，将第二个元素的动画播放时间设定为比第一个元素晚0.5秒（也就是将延迟设为0.5秒），其

div > p { color: red;}//表示父元素为div的所有p元素div + p//表示紧接在 <div> 元素之后的所有 <p> 元素p:first-letter//表示每个p元素的首个字符p:first-line//表示p元素的首行p:nth-child(2)// 表示选择属于其父元素的第二个子元素的每个 <p> 元素。p:nth-last-child(2)//同上 总后向前数.

本文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下：水平居中1.行内元素水平居中利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。1.parent{//在父容器设置2...

1.背景图如何才能完美适配视口让背景图适配视口很容易，需要使用下面 CSS 即可：body { background-image: url('https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2253&q=80'); background-repeat:

如果你正在开发前端应用，那么最后你肯定需要关心样式方面的问题。尽管开发前端应用的技术水平持续增长，CSS 仍然是给 Web 应用赋予样式的唯一方式（而且最近，在某些情况下，原生应用也一样）。目前在市面上有两大类样式解决方案，即：CSS 预编译器，已经存在很长时间了（如 SASS、LESS 及其他）CSS-in-JS 库，一个相对较新的样式解决方案（如 free-style 和很多其他的）

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .arrows{ display: inline-block; /* mar

var observe;     if (window.attachEvent) { observe = function (element, event, handler) { element.attachEvent('on'+event, handler); }; } else { observe = function (el...

变量的声明声明变量的时候，变量名前面要加两根连词线 -- 。:root { --color:#000; --Color:#001;}:root伪类可以看做是一个全局作用域，在里面声明的变量，他下面的所有选择器都可以拿到body { color : var(--color); color : var(--Color);}使用自定义属性来设置变量名，并使用特定的 ...

1、利用 CSS 的 content 属性 attr 抓取资料需求鼠标悬浮实现一个提示的文字，类似github的这种，如图：想必大家都想到了伪元素 after，但是文字怎么获得呢，又不能用 JavaScript。CSS 的伪元素是个很強大的东西，我们可以利用他做很多运用，通常为了做一些效果，content:" " 多半会留空，但其实可以在里面写上 attr 抓资料哦！&lt;div data-ms...

2.过渡与动画概念理解css3过渡化用菜鸟教程的说法，CSS3过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：1.指定要添加效果的CSS属性。2.指定效果的持续时间。css3动画化用菜鸟教程的说法，CSS3动画是根据@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。指定至少这两个CSS3的动画属性绑定向一个选择器：1.规定动画的名称。2...

在现代网页设计中，大背景图设计非常流行。随着高清（现在是4K）显示器的出现，越来越多的网页设计师使用大背景图来填充屏幕。 为什么？因为这样可以造成很大的视觉冲击力，并有助于更好的传递所要表现的内容。但是，如果只是吧大背景简单的放在网页上效果有限。 使用 CSS，偶尔结合 JavaScript ，可以创造出一些惊人的特效。让我们来探讨一些设计师激发背景特效的方式。 我们还会为每种技术添加一个简单的说...

CSS中如何完美做到居中，一直是令前端工程师头疼的问题。最近读到CSS-TRICKS中的一篇帖子，将居中问题的解决方案策略化。感觉收获很大，翻译过来供大家交流学习。当我们书写CSS时，让元素居中，是抱怨的爆发点之一：为什么会这么难？我认为问题的关键，不在于怎么做，而在于我们如何从诸多居中方法中选择出适应当前情景的。所以接下来，让我们一起创建一颗决策树，希望可以让居中变得简单。水平居中行内元素我们可...

主要目标但更具体地说，怎样才能被称为健壮且可扩展呢？面向组件 - 处理 UI 复杂性的最佳实践就是将 UI 分割成一个个的小组件。如果你正在使用一个合理的框架，JavaScript 方面就将原生支持（组件化）。举个例子，React 就鼓励高度组件化和分割。我们希望有一个 CSS 架构去匹配。沙箱化（Sandboxed） - 如果一个组件的样式会对其他组件产生不必要以及意想不到的影响，那么将 UI ...

这12个问题，基本上就是HTML和CSS基础中的重点个难点了，也是必须要弄清楚的基本问题，其中定位的绝对定位和相对定位到底相对什么定位？这个还是容易被忽视的，浮动也是一个大坑，有很多细节。这12个知识点是我个人认为的，下面我们就来看看这12个知识点。1.怎么让一个不定宽高的 DIV，垂直水平居中?使用Flex只需要在父盒子设置：display: flex; justify-content: cen...

前几天看了一篇文章 ， 颠覆了我对 CSS 认识，心中无数次蹦出一个念头：'卧槽，卧槽，还能特么这么用，这特么太叼了' ...于是我迫不及待想跟你们一起分享分享，以后你也可以在别人面前炫（装）耀（逼）了~ps：本文原创不是我，我只是搬运工，看到好东西与大家分享而已，作者 github 主页请戳 这里~装逼指南本文中，所有的图形都是在单个标签内实现的，大量使用了 CSS3 中的 ::before 、...

1.正方形square {width: 100px; height: 100px; background: red;}2.长方形rectangle { width: 200px; height: 100px; background: red;}3.左上三角triangle-topleft { width: 0; height: 0; border-top: 100px solid red; bor...

CSS 自定义属性的策略指南CSS 自定义属性(也称为“CSS 变量”)，在目前所有的现代浏览器中都得到了支持，开发者已经在项目中开始使用，但是它们与预处理器中的变量不同，虽然我已经看到过很多例子，却没有搞清楚他们真正的优势在哪里。自定义属性有很大的潜力可以改变我们编写和组织 CSS 的方式，并且在一定程度上改变 JavaScript 与 UI 组件的调用方式。我并不关心语法和它们的工作方式（为此...