HTML 分割标记，简称为“div”，是一种特殊元素，可让您在网页上将相似的内容集组合在一起。您可以将其用作关联相似内容的通用容器。

标签是最常用的div标签之一，尽管引入了语义元素（这些元素让您可以使用多个标签作为容器），但它似乎并没有出现在任何地方。

在本教程中，我将向您展示div您可以使用标签执行的各种操作，如何在同一个 HTML 文件中使用多个 div 而不会感到困惑，以及如何设置它的样式。

何时使用div标签

div标签是多用途的——你可以用它在网页上做几件事。您将主要在 Web 布局和 CSS 艺术中使用它，但它非常灵活。

最终，您几乎总是会使用它来设置它包含的任何内容的样式，或者使用 JavaScript 操作这些东西。

1.div在 Web 布局中使用

您将主要使用div标签将相似的内容组合在一起，以便轻松设置样式。一个很好的例子是使用 div 将网页的不同部分组合在一起。您可以将页面的页眉、导航、部分和页脚放在一个单独的 div 标签中，以便它们可以一起设置样式。

在本教程的后面，我将带您了解如何制作具有多个div标签的网页布局而不会感到困惑。

Div 本身不会对内容的呈现产生直接影响，除非您对其进行样式设置。

2.div在 CSS 艺术中使用

使用 div 标签，您可以制作各种形状并绘制任何内容，因为它易于设置样式。

  • 如何用div标签做一个正方形

要制作带有div标签的正方形，您首先需要在 HTML 中定义一个空的 div 标签并为其附加一个类属性。在 CSS 中，选择具有 class 属性的 div，然后为其设置相等的高度和宽度。

<div class="square"></div>

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

  • 如何用div标签做一个圆圈

div您可以通过在 HTML 中编码一个空的 div，在 CSS 中为其设置相等的高度和宽度，然后将 a 设置border-radius为 50%来使用标记制作一个圆圈。

<div class="circle"></div>

body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }

    .circle {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
      border-radius: 50%;
    }

  • 如何用 CSS 制作尼日利亚国旗

用标签制作尼日利亚国旗div并不难。国旗呈长方形，颜色为绿色、白色和绿色。

为此，定义 3 个div标签并附加不同的类，然后在 CSS 中适当地设置它们的样式。

<div class="naija-flag">
    <div class="first-green"></div>
    <div class="white"></div>
    <div class="second-green"></div>
</div>
.naija-flag {
  display: flex;
}
.first-green {
  height: 100px;
  width: 60px;
  background-color: green;
}
.white {
  height: 100px;
  width: 60px;
  background-color: white;
}
.second-green {
  height: 100px;
  width: 60px;
  background-color: green;
}

如何设置div标签样式

正如我们上面所讨论的，div 标签很容易设置样式。这也是许多开发人员使用它来对相似内容进行分组的原因之一。

div 标签可以毫无问题地接受几乎所有的 CSS 属性。现在让我们看几个例子。

1.如何应用字体属性div

您可以将 CSS 属性（例如font-size、font-family、font-weight和）应用于与标签font-style组合在一起的内容：div

<div class="font-properties">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate quo
        ullam modi alias assumenda, itaque libero? Quas quidem sint illo.
      </p>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus
        ipsam eaque rem dicta, quos quas ipsum.
      </p>
</div>
body {
      max-width: 900px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }

.font-properties {
      font-family: cursive, sans-serif;
      font-size: 1.3rem;
      font-weight: bolder;
      font-style: italic;
    }

2. 如何使用 Div 标签应用颜色

您可以将 CSScolor和属性应用于与标签background-color一起分组的内容：div

<div class="color-properties">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate quo
    ullam modi alias assumenda, itaque libero? Quas quidem sint illo.
  </p>
  <p>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus
    ipsam eaque rem dicta, quos quas ipsum.
  </p>
</div>
.color-properties {
  color: white;
  background-color: #2ecc71;
}

3. 如何使用 Div 标签设置文本样式

您可以在标签上应用 CSStext-transform和text-decoration属性，如下所示：div

<div class="text-properties">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate quo
    ullam modi alias assumenda, itaque libero? Quas quidem sint illo.
  </p>
  <p>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus
    ipsam eaque rem dicta, quos quas ipsum.
   </p>
</div>
.text-properties {
    text-transform: uppercase;
    text-decoration: underline;
  }

4. 如何使用 Div 标签创建阴影效果

div您可以使用带有 box-shadow 属性的标签创建阴影效果：

<div class="box-shadow">
      <p>
        Before paying to learn programming, checkout freeCodeCamp.org
        <br />
        The HTML, CSS, and JavaScript curricula would take you from zero to hero
        in web development.
      </p>
      <p>
        There is a Python curriculum that will get you a considerable knowledge
        in Python <br />
        And an upcoming Data Science curriculum.
      </p>
</div>
.box-shadow {
      font-family: cursive, sans-serif;
      background-color: #2ecc71;
      color: white;
      padding: 10px;
      border-radius: 4px;
      box-shadow: 2px 2px 20px 23px #7fecad;
    }

上面的 CSS 发生了什么？

我能够使用 CSS box-shadow 属性创建阴影效果。

  • 第一个值（2px）表示x轴上的偏移量（offset-x）
  • 第二个（另外2px）表示y轴上的偏移量（offset-y）
  • 接下来的 20px 用于模糊半径，即您希望阴影的模糊程度。
  • 23px 值是散布半径（您希望阴影散布多远）
  • 最后一个值是阴影颜色——在本例中为#7fecad。

输出如下所示：

如何在不混淆的情况下使用多个 div 元素

div 标签通常用于将相似的内容组合在一起。在较旧甚至一些较新的网页中，您会发现到处都是 div，尽管推荐使用语义标签以获得可访问性和更好的 SEO。

由于div标签仍然很常见，我建议对它们应用 class 和 id 属性，以便您可以使用这些属性操作单个 div 元素。

我将通过制作基本的 Web 布局来指导您如何将其付诸实践。

您要制作的第一部分是标题，包含徽标和导航栏：

 <div class="header">
      <h2 class="logo">freeCodeCamp</h2>

      <ul class="nav">
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Serices</a></li>
        <li><a href="">Contact</a></li>
      </ul>
</div>

在设置导航栏样式之前，我进行了一些 CSS 重置以使内容正确对齐并很好地显示：

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

.hero,
.about,
.services,
.contact {
  max-width: 1000px;
  margin: 0 auto;
  margin-bottom: 20px;
}

在上面的代码片段中：

  • 我删除了默认边距和填充
  • 我为主要部分设置了最大宽度，这样它们就不会为了更好的用户体验而全面
  • 我在每个部分的底部设置了一个边距，给它们一些空间
  • 我在顶部和底部设置了一个边距 0，在左侧和右侧设置了自动以使它们居中。

为了适当地设置导航栏的样式，我将获取容器div标签及其类属性header. 我会给它一个显示flex，以及其他一些属性，以便很好地布置它。我还将按其类抓取div导航栏（元素）周围的包裹，ul并使用 Flexbox 进行布局。

.header {
      padding: 0 70px;
      display: flex;
      align-content: center;
      justify-content: space-between;
      margin-top: 20px;
      margin-bottom: 20px;
    }

.nav {
      display: flex;
      align-content: center;
      justify-content: center;
      gap: 60px;
      list-style-type: none;
    }

.nav li a {
      text-decoration: none;
      color: black;
      font-size: 1.2rem;
    }

对于除页脚之外的其余部分，HTML 和样式是通用的：

<div class="hero">
      <h1>Hero Section</h1>
</div>
<div class="about">
      <h1>About Us</h1>
</div>
<div class="services">
      <h1>Our Services</h1>
</div>
<div class="contact">
      <h1>Contact Us</h1>
</div>
<div class="footer">
      <p>&copy; 2021 All Rights Reserved</p>
</div>
.hero {
      background-color: #eee;
      height: 200px;
    }

.hero h1 {
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 6;
    }

.about {
      background-color: #eee;
      height: 200px;
    }

.about h1 {
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 6;
    }

.services {
      background-color: #eee;
      height: 200px;
    }

.services h1 {
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 6;
    }

.contact {
      background-color: #eee;
      height: 200px;
    }

.contact h1 {
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 6;
    }

.footer {
      background-color: #777;
      height: 40px;
    }

.footer p {
      margin: 0 auto;
      line-height: 1.7;
    }

我给各个部分一个灰色的背景颜色和 200 像素的高度。我使用 Flexbox 将 h1 标签放置在它们的中心，并line height为每个标签应用 1.5 的 a。

最后，我给页脚一个更深的灰色背景颜色以使其与众不同，并将其中的内容以line height1.7 居中。

生成的布局如下所示：

结论

HTML div 标签在世界各地的 Web 开发人员中普遍使用。

请记住，您通常应该使用语义 HTML 来代替 div 标签，除非它们（语义标签）都不真正匹配要组合在一起的内容。这是因为语义标签更适合可访问性和 SEO。

简而言之，div 标签仍然很有用，并且不会很快消失，因此请在必要时随意使用它。

感谢您阅读并祝您度过愉快的时光。

# javascript # html # 前端
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

cover

GitTalk | 使用面向业务的狮偶编程语言提升开发效率

avatar GitCode 开源社区
cover

GitTalk | DevUI Admin 前端项目构建

avatar GitCode 开源社区
cover

GitTalk | DevUI Suits 场景解决方案

avatar GitCode 开源社区