css又叫层叠样式表，层叠机制是css最基本的机制。 页面中的的每个html元素，都具有一整套css属性，每个css属性有且只有唯一值。 我们可以把每个元素看成一个盒模型，css属性用来描绘这个盒模型

本篇文章围绕了 CSS 的核心知识点和项目中常见的需求来展开。虽然行文偏长，但较基础，适合初级中级前端阅读，阅读的时候请适当跳过已经掌握的部分。 这篇文章断断续续写了比较久，也参考了许多优秀的文章，但或许文章里还是存在不好或不对的地方，请多多指教，可以评论里直接提出来哈。 小t…

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cro…

之前没有接触过::v-deep、/deep/、>>>这些深度选择器，但是考虑到最近接触到的项目封装程度比较高，所以有时候在改动公共组件而不影响其他地方使用的时候，这些东西就能起到作用了...

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。例如 `::first-line` 伪元素可用于更改段落首行文字的样式。

CSS Gird布局也叫二维网格布局系统，可用于布局页面主要的区域布局或小型组件。网格是一组相交的水平线和垂直线，它定义了网格的列和行。我们可以指定将网格元素放置在与这些行和列相关的位置上。

最近在做项目中，使用flex布局遇到了个老问题：当flex子元素里的子元素的宽度过大，超出flex父元素时，设置flex:1并不能限制flex子元素的尺寸

在前端开发中，经常需要将元素居中显示，无论是在水平方向还是垂直方向上。CSS提供了多种技术方法来实现元素的居中，在不同场景下有不同的使用方法，在不同场景下有不同的效果。

最近，在项目中遇到一个关于CSS中元素z-index属性的问题，具体问题不太好描述，总结起来就是当给元素和父元素色设置position属性和z-index相关属性后，页面上渲染的元素层级结果和我预想的不一样。根据自己之前的理解，也没找到一个合理的解释。我知道，肯定是我对相关属性…