什么是 HTML div标签以及如何使用 CSS 设置样式

柔情只为你懂 2023-09-28 08:19 15阅读 0赞

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，然后为其设置相等的高度和宽度。

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

![c5abfcd3686bd4a8dbe780b3f538172c.png][]

*  如何用`div`标签做一个圆圈

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

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

![a1413785e683265967781ef1a2cd0a34.png][]

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

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

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

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

![8535503420937e18979e2a949b01d9fa.png][]

### **如何设置`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;
        }

![a42a4e00e164de6ed64a77cddd44e559.png][]

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

您可以将 CSS`color`和属性应用于与标签`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;
    }

![753a432aa9d9d8423eff5b457977d177.png][]

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

您可以在标签上应用 CSS`text-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;
      }

![44dd996df26a58def44034017bd79208.png][]

#### **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。

输出如下所示：

![08cfdd468ac1ceeb321b19ebff9608ef.png][]

### **如何在不混淆的情况下使用多个 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>© 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 height`1.7 居中。

生成的布局如下所示：

![9c4f6fc8cd324c32e434ec3223d0d177.gif][]

### **结论** ###

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

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

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

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

[c5abfcd3686bd4a8dbe780b3f538172c.png]: https://img-blog.csdnimg.cn/img_convert/c5abfcd3686bd4a8dbe780b3f538172c.png
[a1413785e683265967781ef1a2cd0a34.png]: https://img-blog.csdnimg.cn/img_convert/a1413785e683265967781ef1a2cd0a34.png
[8535503420937e18979e2a949b01d9fa.png]: https://img-blog.csdnimg.cn/img_convert/8535503420937e18979e2a949b01d9fa.png
[a42a4e00e164de6ed64a77cddd44e559.png]: https://img-blog.csdnimg.cn/img_convert/a42a4e00e164de6ed64a77cddd44e559.png
[753a432aa9d9d8423eff5b457977d177.png]: https://img-blog.csdnimg.cn/img_convert/753a432aa9d9d8423eff5b457977d177.png
[44dd996df26a58def44034017bd79208.png]: https://img-blog.csdnimg.cn/img_convert/44dd996df26a58def44034017bd79208.png
[08cfdd468ac1ceeb321b19ebff9608ef.png]: https://img-blog.csdnimg.cn/img_convert/08cfdd468ac1ceeb321b19ebff9608ef.png
[9c4f6fc8cd324c32e434ec3223d0d177.gif]: https://img-blog.csdnimg.cn/img_convert/9c4f6fc8cd324c32e434ec3223d0d177.gif