作者：大漠Flexbox布局已是目前最为流行的Web布局方式之一，它给Web开发者在完成页面或组件的UI布局带来了极大的灵活性和便利性。但也是因为它有极大的灵活性，里面隐藏了一些不为人知的细节，如果不

css盒子模型 又称为框模型（Box Model），包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如下图： 图中的内层是content依次是padding border margin。通常我们设置背景时就是内容…

一个元素有多个样式对他进行设置的时候，那么哪个样式会起作用呢？这就需要一个规则计算，这个规则就是权重。谁的权重大，就使用那个样式。 我们按照刚才的规则进行分类计算，计算一下有几个a，几个 b ， 几个 c 。 这个按照a,b,c这种格式计算的结果就是：1,2,2。 我们来分析一…

配图是小孩叠的积木，觉得刚好符合这个主题，所以就拿来做封面了哈。 CSS权重，我们可以简单理解为CSS优先级。来看下MDN官网对优先级的描述： 运行后，可以看到p标签文本的颜色为蓝色。 那么为什么会是蓝色的？这就是CSS权重来决定的。决定最终用哪个样式作用到该p标签上。 上面代…

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

出来混，那些混过去的，迟早是要还的 (￣Д ￣)┍ 。 1. 什么是 viewport ? 它的的作用是啥？ 提到 viewport，之前总感觉挺突兀的，但是当我最近做移动端项目时，突然关注到一直被忽略的 meta 标签的时候，才恍然大悟（o(╯□╰)o）。那么，首先让我们来了…

本文的每一条，都是我曾经发过的掘金沸点，其中有很多条超过了百赞（窃喜）。 鉴于时不时有童鞋翻我以前的沸点，因此，本文收集了个人目前发过的所有CSS知识点动图，以便阅读。 需要说明的是，顺序仍是按当时发布顺序罗列的，还没有系统的总结，多多包涵。 另外这里，老姚谢谢各位一如既往的支…