CSS3 学习第二天：对齐、选择器和单位

前端

2023-10-15 14:06:09

CSS3 学习第二天

对齐

文本对齐

CSS 中有三个文本对齐属性：text-align、text-align-last 和 text-justify。

text-align：控制文本在行内的水平对齐方式。值可以是 left、right、center 或 justify。
text-align-last：与 text-align 类似，但仅控制最后一行文本的对齐方式。
text-justify：使文本两端对齐，就像在书本中一样。

块对齐

块对齐控制元素在容器内的水平对齐方式。有四个值：left、right、center 和 inline。

left：将元素左对齐到容器的左侧。
right：将元素右对齐到容器的右侧。
center：将元素水平居中对齐到容器。
inline：使元素与周围的文本内联。

CSS 选择器

CSS 选择器用于选择 HTML 文档中的元素。有许多类型的选择器，包括：

元素选择器：选择特定元素，如 <p>、<div> 或 <span>。
类选择器：选择具有特定类名的元素，如 .my-class。
ID 选择器：选择具有特定 ID 的元素，如 #my-id。
通用选择器：选择任何元素，如 *。
后代选择器：选择元素的后代，如 p span。
子元素选择器：选择元素的直接子元素，如 p > span。
相邻兄弟选择器：选择与元素相邻的兄弟元素，如 p + span。
通用兄弟选择器：选择元素的所有兄弟元素，如 p ~ span。

CSS 单位

CSS 单位用于指定长度、大小和位置。有几种类型的单位，包括：

相对单位：相对于其他值，如 em（相对于父元素的字体大小）和 %（相对于父元素的宽度或高度）。
绝对单位：指定固定长度，如 px（像素）、cm（厘米）和 in（英寸）。
灵活单位：随着浏览器窗口或设备屏幕大小的变化而改变，如 vw（视口宽度）和 vh（视口高度）。

实践示例

<style>
p {
  text-align: center;  /* 文本居中对齐 */
  margin: 0 auto;      /* 块居中对齐 */
}

.my-class {
  background-color: red;
}
</style>

<p>这段文本居中对齐。</p>
<div class="my-class">这是一个带有红色背景的块。</div>