CSS基础知识

什么是幽灵空白节点？

在 HTML5 规范中有这样一句话：

Each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a 'strut'.

每个行框盒子都以一个具有元素的字体和行高属性的零宽度行内框开始。我们称这个假想的盒子为"支柱"。

在HTML5 文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。这个 “空白节点” 永远透明，不占据任何宽度，也无法通过脚本获取，就好像幽灵一样，但又确确实实地存在，表现如同文本节点一样。也就是官方规范中的“strut”，在张鑫旭《CSS 世界》一书中根据其特点，称之为 “幽灵空白节点”。

幽灵空白节点引起的典型问题是：内联元素与父元素的底部会留有空白，比如 img 标签图片空隙。留空白的具体原因及解决方法，可查看 img元素底部为何有空白？。

什么是空白字符？

浏览器会把内联元素间的空白字符（空格、换行、Tab 等）渲染成一个空格，该空格会占用一定宽度。而为了美观，我们通常在编写代码时，让一个标签占用一行。这样就导致标签之间会有空白字符。

空白字符与幽灵空白节点的区别：

• 相同点：都是不可见、有行高的行内框，都会引起内联元素与父元素的底部留空白问题；

• 不同点：空白字符是有宽度的，它还会导致两个相连内联元素在水平方向空白。

解决水平方向空白的办法：

• 父元素与子元素之间、多个子元素之间不要有空白字符（空格、换行、Tab 等）；

• 父元素的 font-size 设置为 0，在子元素内定义需要的 font-size（注意： Safari 浏览器可能依然会出现空白间隔）；

让 Chrome 支持小 12px 的文字

在 Chrome 下，CSS 设置字体大小为 12px 及以下时，显示都是一样大小，都是默认 12px。

• -webkit-text-size-adjust： -webkit-text-size-adjust:none，字体大小就不受限制了，但是 Chrome 更新到 27 版本之后就不可以用了。

• scale(0.5)： transform: scale(0.5) 可以缩小字体，默认是以元素的中心为源点，可以通过 transform-origin 修改。注意，缩小的是整个元素的大小，且元素必须是块元素。

• 使用图片。

常见的元素隐藏方式

• display: none： 元素不占空间，也不会响应绑定的监听事件。

• visibility: hidden： 元素仍占据空间，但是不会响应绑定的监听事件。

• opacity: 0： 元素仍占据空间，并且能够响应元素绑定的监听事件。

• z-index： 设置负值，使其他元素遮盖住该元素。

• clip/clip-path： 元素仍占据空间，但是不会响应绑定的监听事件。

• transform: scale(0,0)： 元素仍占据空间，但是不会响应绑定的监听事件。

• height: 0： 元素仍占据空间，但是不会响应绑定的监听事件。

• 通过绝对定位将元素移除可视区域内。