<div> là một vùng chứa chung được sử dụng trong HTML để nhóm các phần tử lại với nhau để có thể áp dụng phong cách cho chúng bằng cách sử dụng CSS; Các phần tử div trống theo mặc định và phải được lấp đầy bằng các phần tử HTML để hoạt động. <div> các thẻ thành từng cặp, một thẻ mở và một thẻ đóng:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
}
.first {
width: 500px;
border: 1px solid black;
padding: 20px
}
.square {
width: 100%;
height: 250px;
color: white;
border: none;
}
.blue {
background-color: royalblue;
border: none;
}
.purple {
background-color: purple;
border: none;
}
</style>
</head>
<body>
<div class="first">
<h4>I'm a div that is holding two smaller divs.</h4>
<div class="square blue">1</div>
<div class="square purple">2</div>
</div>
</body>
</html>
Điều lớn nhất cần lưu ý về <div> thẻ là nó không phải một phần tử HTML ngữ nghĩa. Điều đó có nghĩa là nó không hiển thị rõ ràng những gì <div> thực hiện bằng cách xem thẻ (không giống như
Nếu sử dụng quá nhiều, nó có thể dẫn đến các vấn đề về khả năng tiếp cận mà trình đọc màn hình có liên quan. Đảm bảo sử dụng <div> là phương sách cuối cùng khi không có phần tử HTML ngữ nghĩa nào có thể là lựa chọn tốt hơn.
<div> vùng chứa là một phần tử cấp khối. Nó sẽ chiếm toàn bộ chiều rộng của khung nhìn trừ khi nó được nhà phát triển kiểm soát bằng cách sử dụng CSS hoặc tạo kiểu nội tuyến. Ngoài ra, có một dấu ngắt dòng trước và sau nó trừ khi thuộc tính hiển thị được thay đổi thành một số loại giá trị nội tuyến hoặc linh hoạt.
Về bố cục, div khá linh hoạt. Chúng có thể được lồng vào nhau. Điều đó đang được nói, <div> vùng chứa sẽ ngắt đoạn - vì vậy đừng lồng một <div> bên trong một <p> nhãn. Ngoài ra, có những bất thường kỳ lạ khi bạn chèn <div> vùng chứa bên trong các thẻ dòng tiêu đề (
, , v.v.) vì nó có vẻ là <h1> chiến thắng và <div> bị bỏ qua.
Các thuộc tính
<h1> chiến thắng và <div> bị bỏ qua. Các thuộc tính
HTML <div> các phần tử có quyền truy cập vào các thuộc tính toàn cầu và sự kiện của HTML. Các thuộc tính sự kiện là những thuộc tính được sử dụng khi người dùng tương tác với trang web của bạn theo một cách nào đó - ví dụ:một lần nhấp chuột, khi người dùng nhấp vào một hình ảnh hoặc chuyển tiếp khi người dùng hướng dẫn con chuột của họ qua một phần tử. Thuộc tính toàn cục là những thuộc tính có sẵn cho tất cả các phần tử HTML.
Bạn có thể tìm thấy danh sách đầy đủ các thuộc tính HTML này trên trang web Mạng nhà phát triển Mozilla.
Cách tạo kiểu
Tạo kiểu cho một <div> khá đơn giản và có thể được thực hiện theo nhiều cách. Tạo kiểu nội tuyến có thể được thực hiện bằng cách thêm thuộc tính kiểu vào <div> với các thuộc tính và giá trị kiểu được thêm vào dưới dạng một chuỗi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline Styling</title>
<body>
<div style="width:500px;border: 3px solid black; padding: 20px;">
<h4>I'm a div that is holding two smaller divs.</h4>
<div style="background-color: royalblue; border: none;">1</div>
<div style="background-color: purple; border: none;">2</div>
</div>
</body>
</html>
Việc tạo kiểu cũng có thể được thực hiện trong <style> trong thẻ <head> của tài liệu HTML hoặc trên một biểu định kiểu bên ngoài. Đây là nơi <div> thuộc tính class hoặc id sẽ phát huy tác dụng.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia chương trình đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Các lớp có thể được sử dụng trên nhiều phần tử mà bạn muốn được tạo kiểu giống nhau. Một id chỉ có thể được sử dụng một lần trong tài liệu HTML. Hãy nghĩ về nó như thế này:bạn có thể có nhiều học sinh được nhóm lại với nhau, học cùng lớp với cùng độ tuổi, giáo viên và môn học, nhưng mỗi học sinh có thuộc tính id cá nhân riêng để mô tả họ là ai.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
}
.first {
width: 500px;
border: 3px solid black;
padding: 20px
}
.square {
width: 100%;
height: 250px;
color: white;
border: none;
}
#blue {
background-color: royalblue;
border: none;
}
#purple {
background-color: purple;
border: none;
}
</style>
</head>
<body>
<div class="first">
<h4>I'm a div that is holding two smaller divs.</h4>
<div id="blue" class="square">1</div>
<div id="purple" class="square">2</div>
</div>
</body>
</html>
Thuộc tính class và thuộc tính id có thể được sử dụng cùng lúc trên một <div> . Id được coi là cụ thể hơn thuộc tính lớp, vì vậy bất kỳ kiểu nào cụ thể cho <div> cụ thể đó có thể sử dụng thuộc tính id để nó ghi đè bất kỳ kiểu lớp nào.
Kết luận
Hôm nay chúng ta đã học <div> là, các thuộc tính của nó là gì và phần tử được tạo kiểu như thế nào. Để biết thêm thông tin về cách thuộc tính hiển thị ảnh hưởng đến <div> hộp đựng, hãy xem các bài viết của CareerKarma về mô hình hộp và mô hình flexbox.