ViệtTrong CSS, thuộc tính display là một trong những thuộc tính quan trọng nhất, vì nó quyết định cách các phần tử HTML sẽ hiển thị và bố trí trên trang web. display không chỉ kiểm soát việc hiển thị phần tử mà còn ảnh hưởng đến cách chúng tương tác với các phần tử khác trong dòng và trên trang. Việc hiểu rõ các thuộc tính và giá trị của display giúp bạn làm chủ bố cục và thiết kế web một cách hiệu quả hơn.
Bài viết này sẽ cung cấp một hướng dẫn chi tiết về các thuộc tính display, từ các giá trị cơ bản như block, inline, đến các giá trị nâng cao như flex và grid, kèm theo các ví dụ minh họa cụ thể.
1. Tổng quan về thuộc tính display
display xác định cách phần tử HTML được hiển thị và bố trí trong tài liệu. Nó điều khiển cách phần tử chiếm không gian trên trang và tương tác với các phần tử khác.
Cú pháp:
element {
display: value;
}Trong đó:
element: Phần tử HTML mà bạn muốn điều chỉnh hiển thị.value: Giá trị của thuộc tínhdisplay.
2. Các giá trị phổ biến của display
2.1. display: block
Giá trị block biến một phần tử trở thành phần tử khối (block-level element). Các phần tử block sẽ chiếm toàn bộ chiều ngang của vùng chứa (container), mỗi phần tử block sẽ bắt đầu trên một dòng mới và đẩy các phần tử khác xuống dòng tiếp theo.
Các phần tử block mặc định: <div>, <p>, <h1> - <h6>, <header>, <footer>, <section>,...
Ví dụ:
div {
display: block;
background-color: lightblue;
width: 100%;
padding: 10px;
}Trong ví dụ này, phần tử <div> được hiển thị như một khối và chiếm toàn bộ chiều ngang của vùng chứa.
2.2. display: inline
Giá trị inline biến phần tử thành phần tử nội tuyến (inline-level element). Các phần tử inline không bắt đầu trên một dòng mới và chỉ chiếm không gian cần thiết cho nội dung của chúng. Chúng có thể nằm trên cùng một dòng với các phần tử khác.
Các phần tử inline mặc định: <span>, <a>, <em>, <strong>, <img>,...
Ví dụ:
span {
display: inline;
color: red;
}Trong ví dụ này, phần tử <span> sẽ hiển thị trên cùng một dòng với các phần tử khác mà không bắt đầu một dòng mới.
2.3. display: inline-block
inline-block kết hợp đặc điểm của cả block và inline. Phần tử có hiển thị như một phần tử inline (nằm trên cùng một dòng với các phần tử khác), nhưng có thể sử dụng các thuộc tính như width, height, padding giống phần tử block.
Ví dụ:
button {
display: inline-block;
padding: 10px 20px;
background-color: green;
color: white;
}Trong ví dụ này, nút button sẽ nằm trên cùng một dòng với các phần tử khác, nhưng vẫn có chiều rộng, chiều cao, và khoảng đệm (padding) giống như một phần tử khối.
2.4. display: none
Giá trị none ẩn hoàn toàn phần tử, không hiển thị phần tử đó trên trang và không chiếm bất kỳ không gian nào. Không giống như visibility: hidden (ẩn phần tử nhưng vẫn giữ chỗ), display: none loại bỏ hoàn toàn phần tử khỏi bố cục.
Ví dụ:
div {
display: none;
}Trong ví dụ này, phần tử <div> sẽ bị ẩn hoàn toàn và không xuất hiện trên trang.
2.5. display: flex
display: flex kích hoạt Flexbox, một mô hình bố cục hiện đại trong CSS giúp tạo ra các bố cục phức tạp một cách dễ dàng. Khi sử dụng flex, phần tử sẽ trở thành container (hộp chứa), và các phần tử con bên trong sẽ được gọi là flex items (phần tử con linh hoạt).
Ví dụ:
.container {
display: flex;
justify-content: space-between;
}
.item {
background-color: lightcoral;
padding: 10px;
}Trong ví dụ này, phần tử container sử dụng flexbox để bố trí các phần tử con item. Các phần tử con sẽ được sắp xếp trên cùng một dòng và giãn đều khoảng cách.
2.6. display: grid
display: grid kích hoạt CSS Grid, một hệ thống bố cục mạnh mẽ, giúp bạn tạo ra các lưới bố cục phức tạp với các hàng và cột. CSS Grid cung cấp kiểm soát tốt hơn về vị trí và kích thước của các phần tử con trong container.
Ví dụ:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
.item {
background-color: lightgreen;
padding: 20px;
}Trong ví dụ này, CSS Grid được sử dụng để tạo ra một bố cục ba cột với khoảng cách giữa các cột là 10px. Các phần tử item sẽ được xếp theo cấu trúc lưới.
2.7. display: inline-flex
Giống như inline-block, giá trị inline-flex cho phép phần tử hiển thị linh hoạt theo dạng inline, nghĩa là phần tử container sẽ nằm trên cùng một dòng với các phần tử khác, nhưng các phần tử con bên trong sẽ được bố trí bằng flexbox.
Ví dụ:
.container {
display: inline-flex;
justify-content: center;
}
.item {
background-color: lightpink;
padding: 10px;
}Trong ví dụ này, phần tử container sẽ nằm trên cùng một dòng với các phần tử khác nhưng vẫn sử dụng flexbox để bố trí các phần tử con.
3. Các giá trị display khác
3.1. display: table
display: table biến phần tử thành một bảng giống như cách <table> hoạt động trong HTML. Phần tử này có thể chứa các phần tử con với giá trị display: table-row, display: table-cell để tạo thành các hàng và ô.
Ví dụ:
.container {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
padding: 10px;
border: 1px solid black;
}Trong ví dụ này, phần tử container sẽ hiển thị giống như một bảng HTML, với các phần tử row là hàng và cell là ô trong bảng.
3.2. display: list-item
display: list-item biến phần tử thành một mục danh sách giống như <li> trong thẻ <ul> hoặc <ol>. Phần tử sẽ có dấu đầu dòng (bullet point) mặc định.
Ví dụ:
div {
display: list-item;
list-style-type: disc;
}Trong ví dụ này, phần tử <div> sẽ hiển thị giống như một mục trong danh sách với dấu đầu dòng.
3.3. display: inline-table
inline-table tương tự như display: table, nhưng phần tử sẽ hiển thị trên cùng một dòng với các phần tử khác.
Ví dụ:
.table {
display: inline-table;
border: 1px solid black;
}Trong ví dụ này, phần tử table sẽ được hiển thị như một bảng nhưng vẫn nằm trên cùng một dòng với các phần tử khác.
4. Các ví dụ
Ví dụ 1: Sử dụng display: block và display: inline
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ về display - codetuthub.com</title>
<style>
.block {
display: block;
background-color: lightblue;
margin: 10px 0;
}
.inline {
display: inline;
background-color: lightgreen;
margin: 10px;
}
</style>
</head>
<body>
<div class="block">Phần tử Block</div>
<span class="inline">Phần tử Inline 1</span>
<span class="inline">Phần tử Inline 2</span>
</body>
</html>Ví dụ 2: Sử dụng Flexbox với display: flex
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ về Flexbox - codetuthub.com</title>
<style>
.container {
display: flex;
justify-content: space-around;
align-items: center;
height: 100vh;
}
.item {
background-color: lightcoral;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>Ví dụ 3: Sử dụng Grid với display: grid
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ về Grid - codetuthub.com</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.item {
background-color: lightblue;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>5. Kết luận
Thuộc tính display trong CSS là một công cụ mạnh mẽ giúp bạn kiểm soát cách các phần tử hiển thị và tương tác với nhau trên trang web. Từ các giá trị cơ bản như block, inline, đến các hệ thống bố cục hiện đại như Flexbox và Grid, việc hiểu và sử dụng tốt thuộc tính display sẽ giúp bạn xây dựng bố cục trang web linh hoạt và đẹp mắt hơn.
Hy vọng bài viết này đã giúp bạn nắm vững các khái niệm và cách sử dụng display trong CSS. Hãy thử nghiệm với các ví dụ và áp dụng chúng vào dự án của bạn để làm chủ cách hiển thị và bố trí các phần tử trên trang web!
Xem thêm bài viết về 23 thuộc tính và giá trị của display tại đây!
