会员专栏

伪元素能帮助我们做些什么

伪元素已经不是什么新东东了,平时大家在实际生产中肯定有使用过伪元素。但伪元素能帮助我们做些什么呢?针对该问题,有很多同学能很好的回答,但也有很多场景并不是所有开发人员都完全了解的。今天再次花时间来整理一下伪元素能帮助我们做些什么?我想接下来的内容和实例肯定会有不少同学感兴趣的。如果你是其中的一位,那么请继续往下阅读。

给网站添加暗黑模式指南

给网站添加暗黑模式是随着macOS中的暗黑模式(Dark Mode)出现之后的一个热门话题,今年上半年在《如何使用CSS实现暗黑模式和高亮模式的切换》一文中就和大家一起聊了聊怎么通过CSS来实现暗黑模式和高亮模式切换。事实上,社区上有关于这方面的讨论也很多,都在围绕着怎么给网站添加暗黑模式。今天在这篇文章再次和大家一起聊聊这个已久的话题,不同的是,这篇文章将和大家从不同的角度来聊怎么给网站添加暗黑模式。感兴趣的同学,请继续往下阅读。

React中的state

上一节中我们学习了如何使用React的props来改变组件(UI)以及如何在React中使用props。除了props可以改变组件之外还可以通过React的state,而且state也是React的重要概念和必须掌握的知识之一。通过上一节的学习,我们了解到props是纯静态的改变UI,而今天要聊的state是动态的,让你的组件真的能动起来,可以让用户和你的产品进行交互。用户和你的应用程序的每次交互都有可能更改state,从而导致对应的UI更改(或内容的重新渲染)。如果你从未接触过或者想学习这方面的知识的话,欢迎继续往下阅读。

React中的props

组件是React中重要特性之一。我们可以将一个复杂的UI分解成多个基本组件。在开发了基本组件之后,我们可以将所需的组件组合在一起创建一个复杂的UI(也称为复杂的组件)。React中使用propsstate控制组件中的数据流。但刚接触React的同学对这些所谓的propsstate都会感到困惑,那么要掌握React就有必要掌握propsstate。在接下来的内容中我们主要围绕着React的propsstate和大家一起讨论。

你真的了解CSS的flex-basis吗?

CSS的flex-basisFlexbox属性flex的简写属性之一。大部分同学在很多时候都认为flex(当然也包括flex-basis)属性非常的简单,但事实上并非如此,如果你阅读过《聊聊Flexbox布局中的flex的演算法》和《深入理解 flex 布局以及计算》会发现这flex并不容易。在W3C规范中flex-basis是一个基准值,它接受widthheight相同的值。如果你熟悉的话,widthheight是隶属于CSS Intrinsic & Extrinsic Sizing Module Level 3规范,而且该规范除了widthheight属性之外还有min-width(或min-height)、max-width(或max-height)、min-contentmax-contentfit-content等。那么问题就来了,在Flexbox布局中,flex-basisCSS Intrinsic & Extrinsic Sizing Module Level 3提到的各属性有何差异呢?这就是今天将要和大家一起探讨的。如果你感兴趣,欢迎继续往下阅读。

CSS如何实现交叉布局

随着Web技术不断的革新,以往很多依赖于图片展示的布局能较轻易地通过代码来实现,而且现在的布局也不仅仅局限于平面的布局。实际上也有一些伪3D,甚至是3D的布局效果。前两天看到@Preethi分享的一个效果就是我们平时难于用代码实现的一个效果。就这样的效果放到今天来说,我们通过CSS可以实现,而且这样的一个效果是一个典型的效果,所以今天和大家一起来探讨这样的一个布局效果。刚才提到借助于Web的一些特性,我们可以实现伪3D的效果(看上去像上一个3D的布局)。这样的布局主要目的是为了增强一个立体的空间感。

聊聊CSS中的圆

熟悉CSS的同学都知道,使用CSS可以绘制一些图形,在业内有很多这方面的案例,比如使用CSS绘制不同的纹理CSS绘制Icons、使用一个div绘制不同的图形等等。而在Web的实际开发中也经常会碰到一些图形的运用,比如我们今天要聊的圆(比如圆形容器,圆形缩略图,圆形按钮)。使用CSS绘制圆还是会碰到一些棘手的问题。如果你对这方面感兴趣的话,那么接着阅读下面的内容,你一定会有所收获。

React中列表渲染

在上一节中,我们学习了如何在React中实现条件渲染。今天我们一起来学习如何在React中实现列表渲染(在Vue中我们可以使用v-for指令)。因为在实际开发中我们时常要处理一些列表的渲染,比如在《列表渲染和Vue的v-for指令》一文中示例所示。在React中,处理列表渲染和处理条件渲染类似,需要借助JavaScript的一些原生能力来辅助我们实现列表渲染。如果你对这方面知识感兴趣的话,欢迎继续往下阅读。

React中的条件渲染

在Web中时常需要根据不同的状态来渲染对应状态下的部分内容。在React中也同样有这样的运用场景,只不过在React中可以创建不同的组件来封装各种所需要的行为,然后根据不同状态来渲染对应的内容。如果你熟悉Vue的话,知道他有一个v-if指令可以轻易帮助你根据不同的状态(条件)来渲染所需的组件(或UI),但在React没有这样的指令。虽然在React中没有v-if这样的指令,但它可以使用你熟悉的JavaScript条件语句(比如if...elseswitch)。接下来,我们就一起来看看如何在React中实现条件渲染。

这些用于布局的新属性能用吗?

这个话题是@Rachel Andrew于2019年9月在英国爱丁堡举办的Finch front的一场演讲,其原标题是Does it work? Using the new CSS Layout,我在这里将其译为这些用于布局的新属性能用吗?。这个话题中的内容非常的有意思,其中有些内容在小站上也有过相应的介绍。今天看了该PPT,觉得有些内容还是非常的有意思,值得和大家分享。

页面

返回顶部