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

前言 最近已经结束了项目的学习，因为里实习的时间越来越近，我也开始看一些面试题，这次主要是学习CSS方面的知识，分享一些水平垂直居中和盒子塌陷内容 正文 盒子塌陷（第一种情况） html代码 css代

相信对于 CSS 选择器大家都不陌生吧，但其实选择器的种类还是十分繁多的，直接抱着 W3C 的草案啃也没有什么意思。所以本文对 CSS 选择器做了一些总结，希望可以帮大家巩固一下选择器的知识。

伪类经常与伪元素混淆，伪元素的效果类似于通过添加一个实际的元素才能达到，而伪类的效果类似于通过添加一个实际的类来达到。实际上css3为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。伪类与伪元素的本质区别就是是否抽象创造了新元素。具体的伪类和伪元素相…

在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ，我的第一反应也是，感觉很麻烦啊。所以我一直在想，有没…

就是顶部黄色的滚动进度条，随着页面的滚动进度而变化长短。 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascrip…

巧用伪元素:before、:after等，让你的页面按钮眼前一亮。更多内容：https://github.com/reng99/blogs

position定位这里我们有必要先了解一下 position 定位static 元素出现在正常的流中relative 相对定位absolute 绝对定位fixed 绝对定位flex布局详细内容见 C

CSS3中的Flex布局flex布局是2009年W3C提出的一种新的布局方案，可以非常简洁方便的完成网页布局，与平常的浮动，定位相比，flex布局显得更灵活更好上手和理解什么是flex布局？flex意