<div>: Phần tử Phân chia nội dung
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Phần tử <div> trong HTML là vùng chứa chung cho nội dung luồng. Nó không có tác dụng đến nội dung hoặc bố cục cho đến khi được tạo kiểu theo một cách nào đó bằng CSS (ví dụ: kiểu được áp dụng trực tiếp cho nó, hoặc một số kiểu bố cục như Flexbox được áp dụng cho phần tử cha của nó).
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.
Note:
Thuộc tính align đã lỗi thời; đừng sử dụng nó nữa. Thay vào đó, bạn nên sử dụng các thuộc tính CSS hoặc kỹ thuật như CSS Grid hoặc CSS Flexbox để căn chỉnh và định vị các phần tử <div> trên trang.
Ghi chú sử dụng
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 <p>, <table>. 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
| Danh mục nội dung | Nội dung luồng, nội dung hữu hình. |
|---|---|
| Nội dung được phép |
Nội dung luồng. Hoặc (trong HTML WHATWG): Nếu cha là phần tử <dl>: một hoặc nhiều phần tử
<dt> theo sau là một hoặc nhiều phần tử
<dd>, tùy chọn xen kẽ với các phần tử
<script> và
<template>.
|
| Bỏ qua thẻ | Không, cả thẻ mở và thẻ đóng đều bắt buộc. |
| Phần tử cha được phép |
Bất kỳ phần tử nào chấp nhận
nội dung luồng. Hoặc (trong HTML WHATWG): phần tử <dl>.
|
| Vai trò ARIA ngầm định |
generic
|
| Vai trò ARIA được phép | Bất kỳ |
| Giao diện DOM | HTMLDivElement |
Thông số kỹ thuật
| Specification |
|---|
| HTML # the-div-element |