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

方法一 父元素设置:grid栅格布局,align-content: center;justify-content: center; 居中展

居中对齐: 指的是将元素定位在相对父元素的水平和垂直的中心 本文整理在多种情况下，使元素居中对齐的方法

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

在学习的过程中,发现CSS有很多可以描述单位的尺寸。比如px,em,rem,vw等等。平时也没有深究，一来是没时间，二来是在我学习清单中优先级过低。一直想彻底弄明白，一直耽搁到现在。现在花上一点时间来整理一下，彻底弄懂它。 绝对长度单位。 绝对长度单位表示为一个固定的值，不会改…

六、盒模型 1、文档流（normalflow） 网页是一个多层的结构，一层摁着一层 通过 CSS 可以分别为每一层来设置样式，作为用户来讲只能看到最顶上一层 这些层中，最底下的一层称为文档流 文档流是

标准盒子模型 和 怪异盒子模型 ‼ 可以简单理解为每个元素就是一个盒子模型 盒子的组成：内容 + 内边距 + 边框 + 外边距 两种盒子模型（以宽度为例子） 标准盒子模型：margin + borde

本文将比较全面细致的梳理一下 CSS 动画的方方面面，针对每个属性用法的讲解及进阶用法的示意，希望能成为一个比较好的从入门到进阶的教程。 CSS 动画介绍及语法 首先，我们来简单介绍一下 CSS 动画

今天的主角不是响应式页面怎么写,这个话题有点广,以后有时间再写好了.今天我们就来聊一聊响应式布局中很重要的一个点:媒体查询. 定义不同的样式.通常在设计响应式页面中,media属性是非常有用的.我们可以将这个属性设置在style标签上.下面是一个媒体功能查询,其作用是查询屏幕的…