<div>: Phần tử Phân chia nội dung

Try it

<div class="warning">
  <img
    src="/shared-assets/images/examples/leopard.jpg"
    alt="An intimidating leopard." />
  <p>Beware of the leopard</p>
</div>

.warning {
  border: 10px ridge red;
  background-color: yellow;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
}

.warning img {
  width: 100%;
}

.warning p {
  font: small-caps bold 1.2rem sans-serif;
  text-align: center;
}

Là một vùng chứa "thuần túy", phần tử <div> không đại diện cho bất cứ điều gì cụ thể. Thay vào đó, nó được sử dụng để nhóm nội dung để có thể dễ dàng tạo kiểu bằng cách sử dụng các thuộc tính class hoặc id, đánh dấu một phần của tài liệu được viết bằng ngôn ngữ khác (sử dụng thuộc tính lang), v.v.

Thuộc tính

Phần tử này bao gồm các thuộc tính toàn cục.

Ghi chú sử dụng

• Phần tử <div> chỉ nên được sử dụng khi không có phần tử ngữ nghĩa nào khác (chẳng hạn như <article> hoặc <nav>) phù hợp.

Khả năng tiếp cận

Phần tử <div> có vai trò ngầm định là generic, chứ không phải none. Điều này có thể ảnh hưởng đến một số khai báo kết hợp ARIA yêu cầu một phần tử con trực tiếp có vai trò nhất định để hoạt động đúng.

Ví dụ

Ví dụ cơ bản

<div>
  <p>
    Any kind of content here. Such as &lt;p&gt;, &lt;table&gt;. You name it!
  </p>
</div>

Kết quả

Ví dụ có tạo kiểu

Ví dụ này tạo một hộp có bóng bằng cách áp dụng kiểu cho <div> bằng CSS. Lưu ý cách sử dụng thuộc tính class trên <div> để áp dụng kiểu có tên "shadowbox" cho phần tử.

HTML

<div class="shadowbox">
  <p>Here's a very interesting note displayed in a lovely shadowed box.</p>
</div>

CSS

.shadowbox {
  width: 15em;
  border: 1px solid #333333;
  box-shadow: 8px 8px 5px #444444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, white, #dddddd 40%, #cccccc);
}

Kết quả

Tóm tắt kỹ thuật

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Các phần tử phân mục ngữ nghĩa: <section>, <article>, <nav>, <header>, <footer>
• Phần tử <span> dùng để tạo kiểu cho nội dung diễn đạt