CSS实用技巧（中）

CSS 是开发前端页面设计的主力语言，我们常常使用CSS来进行页面的设计，但你是否真的全面了解CSS呢？又是否在使用过程中对一些特性的忽视而导致设计的出现问题呢？

实际上，CSS中的一些特性我们经常在开发过程中没有注意到，这些特性在使用过程中容易被我们忽略，但其实它们却非常重要，了解和运用这些特性可以帮助我们设计出更精良更完美的页面。

本篇将对 vertical-align、BFC、position这三个CSS特性进行简要的总结和介绍，从本文中，你将了解到以下内容：

• vertical-align 的使用及在使用过程中的需要注意的点。
• BFC 的定义以及如何在页面中形成 BFC。
• position 的四种值以及在使用过程中如何根据实际需求进行使用。

vertical-align 是 CSS 中的一个属性，用于设置文本的垂直对齐方式。它可以取以下值：

• baseline ：文本的基线与父元素的基线对齐。
• top ：文本的顶部与父元素的顶部对齐。
• middle ：文本的中间与父元素的中间对齐。
• bottom ：文本的底部与父元素的底部对齐。
• inherit ：从父元素继承 vertical-align 的值。

在使用 vertical-align 时需要注意以下几点：

• vertical-align 只能对行内元素（如 span、a）生效，对块级元素无效。
• vertical-align 只能改变文本的垂直对齐方式，不能改变文本的水平对齐方式。
• vertical-align 只能对文本元素生效，不能对其他元素（如图片、表格）生效。

BFC（Block Formatting Context）是一个 CSS 布局概念，它可以隔离元素的内容，使其不会影响页面中其他元素的布局。在 CSS 中，可以形成 BFC 的元素有：

• 块级元素 ：如 div、p、h1 等。
• 浮动元素 ：如 img、iframe 等。
• 表格元素 ：如 table、td、th 等。
• 绝对定位元素 ：如 position: absolute; 的元素。
• flex 布局元素 ：如 display: flex; 的元素。

当一个元素形成 BFC 时，它的内容将在一个独立的容器中进行布局，不会影响页面中其他元素的布局。这在一些特殊情况下非常有用，例如当我们需要对一个元素进行复杂布局时，或者当我们需要隔离元素的内容以防止它影响页面中其他元素时。

position 是 CSS 中一个属性，用于设置元素的定位方式。它可以取以下值：

• static ：元素的定位方式为默认值，即元素在页面中占用的空间由其内容决定。
• relative ：元素的定位方式为相对定位，即元素在页面中占用的空间由其内容决定，但元素可以相对于其默认位置进行偏移。
• absolute ：元素的定位方式为绝对定位，即元素在页面中的位置由其 top、right、bottom 和 left 属性决定，元素脱离文档流，不会占用页面空间。
• fixed ：元素的定位方式为固定定位，即元素在页面中的位置由其 top、right、bottom 和 left 属性决定，元素脱离文档流，但始终位于视口范围内。

在使用 position 时需要注意以下几点：

• position 只能对块级元素生效，对行内元素无效。
• position 属性的值为 absolute 或 fixed 时，元素脱离文档流，因此元素不会占用页面空间。
• position 属性的值为 absolute 或 fixed 时，元素的位置由其 top、right、bottom 和 left 属性决定。