CSS3 中的 Flexbox 详解

什么是 Flexbox ? Flexbox 是指 CSS 中将元素的 display 规则设置为 flex 或者 inline-flex 时所展示出来的布局模式。 主要为了解决什么问题? 高效灵活地布局,对齐。 在 Flexbox 尚未出现之前,页面的布局通常都是用浮动或者绝对定位和相对定位来实现。布局方式不多,但是也勉强可用。但是到后来,随着前端技术的快速发展以及页面布局需求的快速迭代,传统的布局方式在越来越酷炫和高大上的设计稿前面,就显得表现力不足以及布局变得麻烦而且不够灵活。特别是对于元素的对齐, ... read more

CSS Specificity 以及 CSS 规则优先级详解

也许你也有经历过这样的情况:明明自己已经为某个元素指定了一条 CSS 规则了,怎么在浏览器中显示出来的却跟期望的相差很多呢?你是否有仔细研究过这里面的问题?你是否有了解到 CSS 样式的优先级算法?如果没有,那么可以请接下来看看我对 CSS 优先级算法的一个讲解吧。 在开始之前: 我们先来了解一下 CSS 选择器都有哪些: 通配选择符: * { SRule } ,如: * { font-size: 14px; } 类型选择符: element { sRule } ,如: ... read more