CSS 中的相对长度单位用于指定相对于另一个长度属性的长度。让我们看看 CSS 中一些关键单位及其描述 - 序号 单位 & 描述 1 em 相对于元素的字体大小，即 4em 表示当前字体的 4 倍大小。 2 ex 相对于当前字体的 x 高度 3 ch 相对于 0 的宽度 4 rem 相对于根元素的字体大小 5 vw 相对于视口宽度* 的 1% 6 ... 阅读更多

要设置列规则，可以使用简写 `column-rule` 属性，该属性允许设置以下属性 - `column-rule-width`：设置列之间规则的宽度 `column-rule-style`：设置列之间规则的样式 `column-rule-color`：设置列之间规则的颜色 列规则的值可以设置为 - `column-rule: column-rule-width column-rule-style column-rule-color|initial|inherit;` `column-rule: column-rule-width column-rule-style column-rule-color|initial|inherit;` 此外，这些属性也可以单独使用。我们将看到这两个例子。`column-rule` 简写属性 在此示例中，我们使用简写属性设置了 `column-rule` - `column-rule:` ... 阅读更多

背景位置用于设置背景图像的起始位置。为此，请使用 `background-position` 属性。示例 现在让我们来看一个例子 - 动态演示 `body {    background-image: url("https://tutorialspoint.com/images/Swift.png");    background-repeat: no-repeat;    background-attachment: fixed;    color: blue;    background-position: left center; } .demo {    text-decoration: overline underline; }` 详细信息 考试中心在 ABC 学院附近。考试于上午 9 点开始。输出示例 现在让我们来看另一个例子 - 动态演示 `body {    background-image: url("https://tutorialspoint.com/images/Swift.png");    background-repeat: no-repeat;    background-attachment: fixed;    color: blue;    background-position: 50% 50%; }` 详细信息 考试中心在 ABC 学院附近。考试于上午 9 点开始。输出

要使用 CSS 设置背景颜色，请使用 `background-color` 属性。示例 现在让我们来看一个例子 - 动态演示 `.demo {    text-decoration: overline underline;    background-color: red; }` 详细信息 考试中心在 ABC 学院附近。考试于上午 9 点开始。输出示例 现在让我们来看另一个例子 - 动态演示 `.demo {    text-decoration: overline underline; }` 详细信息 考试中心在 ABC 学院附近。考试于上午 9 点开始。输出

使用相对定位，元素相对于其正常位置进行定位。为此，请使用 `position: relative` 示例 现在让我们来看一个例子 - 动态演示 `div.demo {    position: relative;    color: white;    background-color: orange;    border: 2px dashed blue;    left: 50px; }` 演示标题 这是演示文本。这是演示文本。`position: relative;` 这是另一个演示文本。输出

使用静态定位，元素不受 `top`、`bottom`、`left` 和 `right` 属性的影响。为此，请使用 `position: static`。示例 现在让我们来看一个例子 - 动态演示 `div.static {    position: static;    color: white;    background-color: orange;    border: 2px dashed blue; }` 演示标题 这是演示文本。这是演示文本。`position: static;` 这是另一个演示文本。输出

要设置行高，请使用 `line-height` 属性。以下是属性值 - `line-height: normal|number|length|initial|inherit;` 示例 现在让我们来看一个例子 - 动态演示 `div {    line-height: 1.9; }` 演示标题 这是演示文本。这是另一个演示文本。输出示例 现在让我们来看另一个例子 - 动态演示 `div {    line-height: 200%; }` 演示标题 这是演示文本。这是另一个演示文本。输出

字体、高度、宽度、边距、填充等都使用长度单位设置在网页上。例如，`height 100px`、`width 100px`、`font 2em` 等。这些长度单位分为绝对单位和相对单位。CSS 绝对单位 绝对长度单位彼此之间是固定的。当输出格式已知时，使用这些单位。以下是部分绝对长度单位 - 序号 单位 & 描述 1 cm 厘米 2 mm 毫米 3 in 英寸 (1in = 96px = 2.54cm) 4 px 像素 (1px ... 阅读更多

CSS 中的 `translate()` 函数用于在水平和垂直方向上重新定位元素。如果要沿 X 轴和 Y 轴从当前位置移动元素，请使用 `translate()` 函数。语法 语法如下 - `Transform: translate(x, y)` 以上，沿 x 轴和 y 轴变换元素。转换图像在此示例中，我们将使用 `translate()` 方法转换（即移动）图像。使用 `transform` 属性设置它 - `.translate_img { transform: translate(50px, 20px); }` 示例 现在让我们看... 阅读更多

列表是有序的和无序的。使用 CSS，您可以设置列表项标记或标记的图像。除此之外，使用 CSS，我们还可以设置列表项标记的位置。现在让我们来看一些例子 - `list-style-type` `list-style-type` 用于设置列表项标记的类型。示例 现在让我们来看一个示例，我们在这个示例中格式化有序列表 (ol) - 动态演示 `ul {    list-style-type: upper-roman; }` 团队 印度 澳大利亚 英国 西印度群岛 南非 斯里兰卡 输出 `list-style-image` `list-style-image` 属性用于将图像设置为... 阅读更多