响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。下面是博客网站对不同设备适配后的结果，分别是iPhone5/SE,iphone6/7/8,iphone 6/7/8 p…

经常会遇到一些需求是页面铺满整个屏幕，即：屏幕有多高页面就有多高不能出现滚动条。

这篇文章会介绍CSS中大部分布局方式以及技巧，包括但不限于浮动、定位、flex、grid。 先来看最常用的一种，利用margin属性设置外边距，当要居中当元素是display:block时可以用这种方法。 使用text-align,将元素当成文字直接居中。当要居中元素是inli…

48张图带你从0到1掌握flex布局方式。 需要本文的Xmind导图的话，移步公众号--前端UpUp,回复flex关键字即可。 从上面图来看，我们将flex布局分为两部分讲，轴和容器。 打个预防针，flex布局涉及到12个CSS属性，父容器,子容器各6个。 接下来先梳理常见的属…

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