这里面涉及到浏览器的影响，字体的设计等方面的知识。尤其是字体设计是一门高深的学问，而我们只是为了开发网页中控制文字大小和对齐，所以这里我们只取我们需要的部分，下面先介绍字体概念。 我们先来了解文字的各个概念。图看起来更直观，所以我简单画了个图。 对照着图，可以看出基线是位于字母…

在刚刚过去的第四届CSS大会上，不少人提到了布局的问题。那么这篇很适合重温一下。今日早读文章由@蔡剑涛投稿分享。 @蔡剑涛,来自海致星图前端团队,专注前端项目架构设计、组件库开发、开发流程精进和团队技术体系建设 正文从这开始～ 背景 前端圈有个“梗”：在面试时，问个css的po…

划重点，这是一道面试必考题，很多面试官都喜欢问这个问题，我就被问过好几次了 要实现上图的效果看似很简单，实则暗藏玄机，本文总结了一下CSS实现水平垂直居中的方式大概有下面这些，本文将逐一介绍一下，我将

这些基本概念有些可能不易理解但却都很重要，如果看完还是很不理解的话需要自己谷歌或百度，网上关于这些概念的文章不少。 “流”又叫文档流，是css的一种基本定位和布局机制。流是html的一种抽象概念，暗喻这种排列布局方式好像水流一样自然自动。“流体布局”是html默认的布局机制，如…

目前 animation 有下面 9 种属性，其中第一个是后面属性的简写形式。 该属性用于指定 @keyframes 动画的名称。定义关键帧需要使用 @keyframes 规则。样式块语句中可以使用 from...to 结构，也可以使用百分比来定义。 如下面这段代码，它在动画开…

以下技巧的具体原理和解释请支持张老师的《CSS世界》，在这里不做展开。 一部分没录入的技巧原因是部分属性将被标准废弃，如：clip。还有一部分是因为个人觉得兼容性不好，而且CSS3的一些特性可以弥补，比如text-align:justify;，完全可以用flex布局实现。 应网…

这是笔者整理的个人在CSS3动画上遇到的问题，全部都是笔者个人的经验，以及解决方案，并不相信网上会有重复的文章。大家可以点进每个小栏目的codeplay去地直观feel一下。 常见错误一：动画做完就disappear了！喂喂喂！没让你消失啊。code play~ 这个应该是an…

以上是 CSS 水平居中的 8 种方法。 注：① 子元素 line-height 值为父元素 height 值。② 单行文本。 适应 IE7。 元素高度可以动态改变, 不需再CSS中定义, 如果父元素没有足够空间时, 该元素内容也不会被截断。 IE6~7, 甚至IE8 beta…

我们都清楚当元素设置display:none后，界面上将不会显示该元素，并且该元素不占布局空间，但我们仍然可以通过JavaScript操作该元素。但为什么会这样呢？ 这个涉及到浏览器的渲染原理：浏览器会解析HTML标签生成DOM Tree，解析CSS生成CSSOM，然后将DOM…