定义

:before和 :after 是CSS中的伪元素，用于在所选中的元素前后插入样式化内容。通过 content 属性，我们可以为这两个伪元素添加修饰性的内容。默认情况下，它们是行内元素，但可以通过 display 属性更改。

最近在写文章时用到了一些CSS布局方式，让我突然思考CSS布局的基本种类究竟有多少种。目前，我在实际工作中最常使用的是弹性布局display: flex，而对于一些需要指定行列的情况，我会采用网格布局（或称格栅布局）display: grid。在接触这两者之前，我主要使用的是普通的简单布局、浮动布局、定位布局以及表格布局。后来，为了实现响应式设计，我还了解了响应式布局，同时在实现瀑布流时接触到了多列布局column。

在进行设计工作时，获取优质素材和灵感是至关重要的。下面介绍一些能够为你提供素材和激发创意的网站。当你在设计过程中遇到困难时，不妨前往这些网站一探究竟。

Icon素材

在前端开发中，页面布局往往是一个相对耗时的任务。有没有一种方法能够减少开发时间呢？或许你会说：“当然有，直接使用UI库啊！” 但是请注意，并非每个项目都有可用的UI库。同时，依赖他人的UI库并不能完全解决所有问题。如果我们对CSS选择器有更深入的了解，或许就能在很多情况下减少对JavaScript的依赖。比如，处理鼠标的移入移出效果、选项卡的背景图切换、图片的渐隐渐显等等。熟练掌握这些（包括不太常见的）CSS选择器，无论是在前端UI布局还是替代JavaScript实现特效，都将显著提升我们的工作效率。

导言：

网页布局是前端入门时必学、必须熟练掌握的关键技能。入门的标志之一是能够迅速分析网站结构并构建模型。在学习初期，前端初学者可能会使用一些传统的盒模型布局方式（display + position + float）。然而，随着学习的深入，许多开发者发现传统布局方式在编写样式时相对繁琐、不够便捷，尤其是在处理垂直居中时。

在阅读九边大佬的文章《笨功夫是普通人最后的依靠》之前，我被其中的一些文字深深打动。怀着分享的心情，我想将其中的精华分享给大家。以下是我认为最令人印象深刻的一段文字，如果你想阅读全文，可以搜索文章名字查阅。

“开窍”的本质在于积累。当积累到一定程度时，突然之间就会有新的理解，打开了通向新世界的大门。在“超大积累”的基础上，又会出现一个巨大的爆发，直接将其他人远远甩在身后。“超大积累”既是一种负担，也是一个门槛，更是一道壁垒。要想过这个门槛，是相当困难的，别人同样难以逾越。过不去就白费，唯一的办法就是死磕，不管“认知”和“思维高度”如何，都需要老老实实下硬功夫。

CSS Grid（网格）布局是当今最强大的 CSS 布局解决方案之一，专为构建二维布局而设计。该布局系统将整个页面划分为灵活的网格，使得我们能够自由组合这些网格，从而实现多样化的布局效果。下面我们将深入了解如何灵活运用 CSS Grid 布局，为您呈现图解和实例！

前言

在计算机专业学习的过程中，熟练掌握各种知识点至关重要。然而，仅仅通过听课和阅读教材可能难以真正理解和灵活应用所学内容。在这个信息爆炸的时代，我们需要更主动、高效地学习，以提升在计算机领域的竞争力。实践记录和笔记作为学习的得力助手，不仅有助于更好地理解知识点、加深记忆，还能提供一个有组织的学习框架。通过不断总结和反思，我们可以发现自身的不足，逐步提升学习和问题解决的能力。让我们一同踏上笔记和实践记录的学习之旅吧！

在 CSS 布局中，掌握 z-index 属性对于构建 Web 页面至关重要。随着 Web 技术的不断演进，我们有了多种布局方式，而本系列文章旨在通过深入剖析 CSS 中各种布局、实现方式和常用技巧，帮助你全面提升对 CSS 布局的理解。

📔z-index 的含义

在Web开发中，对CSS布局的熟练掌握直接影响着页面开发的效率。由于Web技术的不断演进，实现各种独特布局的方式也层出不穷。近期，我利用碎片时间花费了半个月整理了一个系列，该系列涵盖了CSS中多种布局方式、实现技术以及常用技巧。通过这一系列文章，旨在为读者提供对CSS布局全新的认知。

📔三列布局概述