CSS `display: none` 帮助开发者隐藏元素，将 display 属性设置为 none。对于 display 属性设置为 none 的元素，不会为其生成任何盒子，即使其子元素的 display 属性设置为除 none 之外的值。语法以下是 CSS `display: none` 的语法：选择器 { display: none; }示例让我们来看一个 CSS `display: none` 的示例： 在线演示 CSS `display: none` 表单 { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; box-sizing: border-box; } input[type="button"] { ... 阅读更多

CSS `display` 属性的值为 `block` 时，元素将使用父元素的全部可用宽度渲染，并且还会强制换行。 display 属性设置为 block 的元素将呈现为块级元素或元素。让我们通过一些示例来了解 display: block 的语法。语法以下是 CSS `display: block` 的语法：选择器 { display: block; } display: block 让我们来看一个 CSS `display: block` 的示例。`display: block` 将元素显示为块级元素：em{ background-color: #C303C3; color: #fff; ... 阅读更多

可以定义 `outline-style` 属性来在元素的边界周围绘制一条线，但与 `border` 属性不同，轮廓不是元素维度的一部分。语法CSS `outline-style` 属性的语法如下：选择器 { outline-style: /*值*/ }值可以是以下任何一个：dotted - 设置点状边框 dashed - 设置虚线边框 solid - 设置实线边框 double - 设置双线边框 groove - 设置 3D 凹槽边框 ridge - 设置 3D 凸起边框 inset - 设置 3D 内嵌边框 ... 阅读更多

行内元素的 CSS `display` 属性设置为“inline”、“inline-table”或“inline-block”，这些元素不会在其上下强制换行。每个行内元素都会生成行内框，它是定位方案的一部分，并且包含子框。行内框是其内容遵循行内格式化上下文的框。行内框被分割成多个行内框，而那些从未被分割的行内框被称为原子行内框。匿名行内框是开发者无法控制的那些框。如果块框... 阅读更多

CSS 伪元素可以应用于元素，也可以应用于 CSS 类。首先，让我们看看伪元素。伪元素允许为元素的特定部分设置样式，例如，在元素之后插入内容，为第一行设置 CSS 样式等。语法如下：语法 选择器::伪元素 { } 以下是一些伪元素：::after - 在特定元素内容之后插入内容 ::before - 在特定元素内容之前插入内容 ::first-letter - 选择特定元素的第一个字母 ::first-line - 选择特定元素的第一行 ... 阅读更多

CSS `::before` 和 CSS `::after` 伪元素分别用于在元素之前和之后插入一些内容。`::after` 伪元素如果要在元素之后插入内容，则使用 `::after` 伪元素。要放置在后面的内容使用 `content` 属性设置：p::after { content: " is Virat Kohli"; background-color: red; font-weight: bold; } 示例让我们来看一个示例：p { ... 阅读更多

块级元素的 CSS `display` 属性设置为“block”、“list-item”或“table”，这些元素会在其上下强制换行。每个块级元素都会生成块级框，它是定位方案的一部分，并且包含子框。块容器框包含块级框并遵循块级格式化上下文，或者包含行内级框并遵循行内格式化上下文。如果块级框也是块容器，则使用块框一词。匿名块框是开发者无法控制的那些框。如果行内框包含块... 阅读更多

在可视化格式化模型下处理文档树中的每个元素后，都会为其生成一个或多个框。生成的框具有一些与其关联的 CSS 属性，并相应地在 HTML 中呈现。要显示元素，以下两个常用值：block - 从新行开始。占用全部可用宽度 inline - 不从新行开始。仅占用所需宽度 CSS 中生成的框如下：块级元素和块框 匿名块框 行内元素和行内框 匿名行内框 ... 阅读更多

我们可以使用 CSS 伪类为 HTML 中的现有元素添加特定样式，CSS 伪类选择具有特定状态的元素，例如（悬停、已访问、已禁用等）注意 - 为区分 CSS 伪类和伪元素，在 CSS3 中，伪类使用单冒号表示法。语法以下是使用 CSS 伪类处理元素的语法：选择器:伪类 { css-属性: /*值*/; }以下是所有可用的 CSS 伪类：序号 伪类和描述 1 active 选择活动的元素 2 checked ... 阅读更多

开发者在使用 CSS `float` 属性时遇到的许多问题之一是，如果所有子元素都浮动，则父容器将折叠。为了避免父容器折叠，我们可以使用以下解决方案之一。问题由于所有内容都在其内部浮动，因此父容器会折叠。由于 CSS `background-color` 属性，只能看到容器的填充。示例以下是需要纠正的问题代码：避免父容器折叠 body{ ... 阅读更多