从零基础到轻松就业 | CSS——CSS 基本视觉格式化：② “行内盒子”格式化（ Ⅰ ）

原创：itsOli  @前端一万小时

本文首发于公众号「前端一万小时」

本文版权归做者全部，未经受权，请勿转载！
复制代码

1. line-height: 2; 和 line-height: 200%; 有什么区别?
2. 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例。
3. 行内元素的“边框”、“边界”等“框属性”是由 font-size 仍是 line-height 控制？
4. height=line-height 能够用来垂直居中单行文本？代码怎么实现？
5. inline-block 有什么特性？
6. inline-block 在实际工做中有什么做用？
7. 怎么去除两个按钮中间的缝隙问题？
8. 一个页面有一排高度不同的产品图，这时若是咱们用 inline-block，怎样使他们“顶端对齐”？
复制代码

---

前言： 做为学习“基本视觉格式化”的第二篇，咱们在对上一篇中“块盒子”整个“格式化”过程当中能够获得——所谓的“格式化”，其实就是肯定这个“块/行内 盒子”的自身长度、高度，以及与其上下左右相邻“盒子”之间的距离和协调的过程。在肯定这个“长度、高度、距离和协调”的过程当中会有不少“规则”，那咱们学的就是这个“规则”。

接下来的“行内盒子”格式化相对于“块盒子”格式化的知识点会更细、更分散。不过做为最基本的理论知识，这篇依然很重要。

1 “行内盒子”怎么来的

当元素的 display 属性为 inline、inline-block 或 inline-table 时，该元素将成为“行内级元素”。

选择器 {
  display: inline、inline-block 或 inline-table;
}
复制代码

这些元素不会在以前或以后生成“行分隔符”，因此处于正常流中的行内元素会 “水平” 摆放，它们是块级元素的后代。

显示时，它不会生成内容块，可是能够与其余行内级内容一块儿显示为多行。

同理，“行内级元素”会生成“行内级盒子”，该盒子同时会参与“行内格式化上下文（inline formatting context）”的建立。

🏆小总结：
“行内元素”在一个文本内生成“行内盒子”，而不会打断这行文本（即这种元素能够出如今另外一个元素的内容中，而不会破坏其显示，常见的如：a、 span 、 strong 、 em 等）。

2 “行内盒子”格式化

在正式学习前，有一个观念咱们须要创建：
从某种程度上来说，块级元素中包含的各“文本行”自己都是“行内元素”（即便它没有用行内元素的标记包围起来）。

既然“文本行”能够看做是“行内元素”，那咱们就能够把抽象化的“行内元素”、“行内盒子”具象成：给“文本”格式化。而后触类旁通，完全弄懂与之相关的全部知识。

接下来，咱们先学习一些前置基础知识，而后再细讲怎样“格式化”。

2.1 一些基本概念

2.1.1 匿名文本

<div>生活不像林黛玉<span>不会由于忧郁</span>而风情万种</div>
复制代码

未包含在行内元素的字符串（生活不像林黛玉 而风情万种）就叫“匿名文本”。

注意，空格也是匿名文本的一部分，由于空格与其余字符同样都是正常的字符。

2.1.2 非替换元素、替换元素

• 非替换元素： 若是元素的内容包含在文档中，则称之为“非替换元素”。

例如：若是一个段落的文本内容都放在该元素的自己以内，这个段落就是一个“非替换元素”。

• 替换元素： 指用做为其余内容占位符的一个元素。

例如：
img 元素，它只是指向一个图像文件，这个图像文件将插入到文档流中该 img 元素自己所在的位置；大多数“表单”元素也能够“替换”（如 <input type="radio"> ）。

下一篇咱们继续讲解 CSS“行内盒子”格式化相关的知识点。

祝好，qdywxs ♥ you！