HTML Div——什么是 Div 标签以及如何用 CSS 为其设置样式

原文： HTML Div – What is a Div Tag and How to Style it with CSS

HTML 分割标签，简称 “div”，是一个特殊的元素，可以让你在网页上把类似的内容集合起来。你可以把它作为关联类似内容的通用容器来使用。

div 标签是使用最多的标签之一，尽管引入了语义元素（这些元素让你使用几个标签作为一个容器），但这个标签仍然被广泛使用。

在本教程中，我将向你展示你可以用 div 标签做的各种事情，你如何在同一个 HTML 文件中使用多个 div 而不混淆它们，以及如何设置其样式。

什么时候使用 `div` 标签

div 标签的用途很多——你可以用它在一个网页上做几件事。你大部分时间是在网页布局和 CSS 中使用它，但它是超级灵活的。

总的来说，你几乎总是要用它来设计它所包含的任何东西的样式，或者用 JavaScript 来操作这些东西。

在网页布局中使用 div

你将主要使用 div 标签把类似的内容组合在一起，这样你就可以轻松地对其设置样式。一个很好的例子是使用 div 将网页的不同部分组合在一起。你可以把一个页面的标题、导航、章节和页脚放在一个单独的 div 标签中，这样它们就可以一起被设置样式了。

在本教程的后面，我将带你了解如何用多个 div 标签制作网页布局而不至于混淆。

除非你对其进行样式设计，否则 div 本身对内容的呈现没有直接影响。

在 CSS 中使用 `div`

使用 div 标签，你可以做出各种形状，画出任何东西，因为设置它的样式很容易。

如何用 div 标签制作一个正方形

要用 div 标签制作一个正方形，你首先需要定义一个空的 div 标签，并在 HTML 中为其附加一个 class 属性。在 CSS 中，选择带有类属性的 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 标签制作一个圆

你可以通过在 HTML 中编码一个空的 div，在 CSS 中为它设置一个相等的高度和宽度，然后设置一个 50% 的 border-radius，来用 div 标签制作一个圆。

<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 属性。现在让我们看几个例子。

如何用 div 应用字体属性

你可以在用 div 标签分组的内容上应用 CSS 属性，如：font-size、font-family、font-weight 和 font-style。

<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;
    }

如何用 Div 标签应用颜色

你可以在用 div 标签分组的内容上应用 CSS color 和 background-color属性。

<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;
}

如何用 Div 标签设置文本的样式

你可以像这样在一个 div 标签上应用 CSS text-transform 和 text-decoration属性：

<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;
  }

如何用 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 元素。

我将通过制作一个基本的网页布局来指导你如何将此付诸实践。

你要做的第一个部分是标题，包含 logo 和导航条：

 <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;
}

在上面的代码片断中：

我删除了默认的 margin 和 padding
我为主要部分设置了一个最大宽度，这样它们就不会占用太多空间，以提高用户体验
我在每个部分的底部设置了一个边距，给它们一些空间
我在顶部和底部设置了 margin 为 0，在左侧和右侧设置了 auto 以使它们居中

为了使导航条具有适当的样式，我将对于 class 属性为 header 的容器 div 标签进行设置。我将给它一个 flex 的 display，以及一些其他属性来很好地设置它。我还将处理包裹导航条（ul 元素）的 div，并用 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;
    }

我给各个部分的背景颜色为灰色，高度为 200px。我用 Flexbox 将 h1 标签置于其中心位置，并对每个标签应用了 1.5 的行高 line-height。

最后，我给了页脚一个更深的灰色背景颜色，以使其突出显示，并将内容置于中心位置，行高 line-height 为 1.7。

最终的布局是这样的：

总结

Web 开发人员经常使用 HTML div 标签。

只要记住，你通常应该使用语义 HTML 来代替 div 标签，除非它们（语义标签）都没有真正符合要分组的内容。这是因为语义标签更有利于可访问性和 SEO。

简而言之，div 标签仍然很有用，而且不会很快消失，所以在必要的时候，请放心使用它。

谢谢你阅读本文，祝你过得愉快！

什么时候使用 div 标签