你不知道的CSS

transition（过渡）：用于设置元素的样式过渡 transition和animation有着类似的效果，但细节上有很大的不同。`transition`属性是 `transition-proper

animation（动画）：动画属性。 接下来我们来看看动画的有关内容。 CSS animation 属性是 animation-name，animation-duration`,` anima

一、浮动的概念 浮动其实就像是我们在一片海当中，不是海内的固定的珊瑚之类的生物，而是漂浮着的。 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的

一、行内元素居中 行内元素的居中比较简单，因为行内元素无法设置宽高，所以我们想让行内元素居中只需要给父元素设置样式即可。 1、水平居中 2、垂直居中 垂直居中只需要设置line-height为父容器的

一、什么是层叠上下文 层叠上下文（stacking context）： 其实就是我们虚构的一个概念，就像是我们看页面的时候，你看着好像只有一层，其实有很多层。如果是层叠上下文的元素，就拥有优先接近我们

1、避免使用@import 在CSS模块化的时候有说到可以通过 @import来实现CSS模块化，但是这种方式是不建议使用的。 因为我们使用@import来引入css文件，会使得页面在加载的时候增加延

什么是CSS模块化 CSS模块化就是通过将分模块进行封装，就像是我们在写vue组件的时候一样,也是一个一个模块的封装。 为什么要用CSS模块化 一

关于伪类选择器，其实就是匹配确定状态的元素，也就是在特定状态下才能呈现对应的样式。其他选择器的话可以看这篇《一次性搞懂CSS的选择器》 1、链接伪类：作用域链接元素

一、圣杯布局与双飞翼布局 首先我们需要知道两种布局的需求是什么。 需求都是实现如下的三列布局，（重点！！） 1、两侧内容宽度固定，中间内容宽度自适

一、什么是优先级： 即通过优先级来判断如何在页面上显示这些样式。优先级是基于不同种类的选择器组成的匹配规则。 关于CSS的选择器可以看这篇《一次性搞懂CSS选择器》，这里就不重复讲啦。 二、优先级是怎

一、概念 Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 是是一种一维的布局模型（这里可以对比[网格布局]

1、静态定位 静态定位就是position的默认值，一般我们不会特地进行设置。它意味着讲元素放进文档布局流的正常位置。 看下面这个例子，盒子的位置

什么是BFC BFC：Block Formatting Context 块格式化上下文 按照MDN的定义， 是Web页面的可视CSS渲染的一部分，是

选择器的类别 一、简单选择器 通过元素类型、元素的类以及元素id匹配元素。 1、类型选择器（元素选择器） 类型选择器就是选择一个HTML元素名（不区

盒模型的两种分类 盒模型，我们做前端最常见的盒子，也成为框模型（Box Model）。 随便在网页控制台截取一个盒子，可以看到： 盒模型由元素的内容

一、定义 网格布局，顾名思义，像是网格一样将页面中的元素进行排列组合。专业点来讲，就是一组相交的水平线和垂直线构成了网格的列和行。我们根据业务需求将网格元素放在这些位置上。由于之前学习过弹性布局，刚好

实现思路：首先是正常的字体样式：接着加上这三个属性解释一下这三个属性1、background-image属性用于为一个元素设置一个或者多个背景图像，当设置为-webkit-linear