? 遇到的问题 在一个新项目中，设计统一了项目中所有的字体，并提供了字体包。在项目中需要按需引入这些字体包。 首先，字体包的使用分为了以下几种情况： 无特殊要求的语言使用字体A，阿拉伯...

1.什么是flex布局 Flexible Box 模型，通常被称为flexbox。是一种一维布局。也就是只处理一个维度（一行或一列）的元素布局。 1.1 flex的基本使用(display: flex| inline-flex) 当使用flex 布局...

欢迎关注我的公众号：前端侦探 之前在这篇文章（CSS 实现树状结构目录）中实现了一个树状结构，效果是这样的 整个实现没有用到任何 JavaScript，非常巧妙，有兴趣可以回顾一下。 不过有时候还需...

Web 字体优化 本文是 网页字体度量及渲染 的下文。 本文将从字体加载、字体传输、字体渲染三个部分，介绍字体如何在对应生命周期内工作并给出优化方法。 先说结论： 字体优化其实就两种方案： ...

偶然间翻阅某官网样式时，发现一些属性并不熟悉，以此文章来记录总结。希望积跬步，至千里。 mask 【遮罩】 mask在各个浏览器中的兼容并不友好，可通过can I use查阅，可见大多数浏览器并不支持...

1. 什么是网格布局 网格是水平线与垂直线相交形成了有列与行的网格。放在列与行交汇的位置 为网格元素。 网格布局为二位布局, 弹性盒子(flexbox)为一维布局。如何选择用那种布局？ 只需要按行或...

loading 效果是一种常见的用户体验设计，它可以让用户在等待页面加载的过程中感受到动态和趣味。 大家好，我是渡一前端子辰老师 今天，我们就来学习一种简单而有趣的 loading 效果，它的原理是...

repeat与minmax grid 为我们提供了强大的布局能力，基本使用可以参考阮一峰老师的教程. 我们在本篇文章主要讨论如何使用 auto-fill 与 auto-fit 来实现自适应布局，以及二者的区别有哪些。 auto...

什么是巡检报告 巡检报告是指对某一个系统或设备进行全面检查，并把检查结果及建议整理成报告的过程。 巡检报告通常用于评估系统或设备的运行状况与性能，以发现问题、优化系统、提高效率、降低...

下图这个情景，你是否也遇到过？ 当你右键点击网页上的某个元素时，弹出的菜单被屏幕边缘遮挡了，导致你无法看清或选择菜单项？ 我是渡一前端子辰老师，今天我们就来探讨如何用简单而有效的方法...

本文翻译自 Learn CSS radial-gradient by Building Background Patterns，作者：Temani Afif 略有删改 如果你是CSS渐变的新手，你可能听说过radial-gradient()。如果以前从未使用过它，那么这...

这个是CSS代码 display: flex; cursor: pointer; border: 1px solid #d8dce5; background-color: #fff; margin-right: 30px; border-radius: 2.5px; padding: 6px 12px; box-sizing: border-box...

内含实验性功能，目前仅 Chrome Canary (115以上)版本浏览器支持此特性 前言 Scroll-driven animations 顾名思义，就是由滚动驱动的动画，是一种常见的交互模式，在提升网站的用户体验方面，扮...

前言 这篇文章我已经酝酿了半年之久，或者说拖沓了这么久吧。想说的东西很多，却又无从说起。如今轻量级框架如雨后春笋，层出不穷。我想每个人都应该归纳总结工作中的常见需求，编写一套适合自...

本文翻译自 How to Center a Div Using CSS Grid，作者：Fimber Elemuwa, Ralph Mason。 略有删改 在本文中，我们将介绍使用CSS Grid在水平和垂直方向上居中div的五种方法，当然这些技术可用于...

我正在参加「掘金·启航计划」 先看一道题目：谈谈你对CSS盒模型的理解，思考应该如何回答... 涉及知识点(层层递进): 基本概念：标准模型+ IE模型(区别) JS如何设置获取盒子模型对应的宽和高 实...

前言 我正在参加「掘金·启航计划」,最近UI小姐姐不知道中了什么邪,要我把一个简单的表单,长这样 改成这个样子 咱也不懂啊,这样更好看了吗,只能照着改了,谁让我只是个卑微的切图仔呢. 实现过程 ...

小编从前端工作也有一些年头了，最近也一直打算对自己的所学进行梳理沉淀，将软件开发过程中优秀的方法、理论、实践进行梳理，形成一套完整的实践架构。本文主要讲述 CSS 领域中如何从前端架构...

前言： CSS可以说是网页样式的灵魂，特别是CSS3发布后，更是让网页在无需借助JS的情况下，便可直接使用CSS实现以往无法实现的效果。本文根据日常的开发经验，总结出几个使用CSS就可实现的效果，...