CSS - Đặc tính Display: Cánh cửa dẫn đến Phép màu thị giác!
Xin chào các nhà thuật toán CSS tương lai! ? Tôi rất vui mừng được bắt đầu hành trình này cùng các bạn khi chúng ta khám phá thế giới kỳ diệu của đặc tính display trong CSS. Như một người đã dạy CSS hơn một thập kỷ, tôi có thể đảm bảo với các bạn rằng việc thành thạo đặc tính này giống như mở kho báu của vô vàn khả năng thiết kế web. Hãy cùng lặn xuống!
Đặc tính Display là gì?
Trước khi chúng ta đi vào chi tiết, hãy hiểu xem đặc tính display thực sự làm gì. Nói đơn giản, nó kiểm soát cách một phần tử được hiển thị trên trang web. Hãy tưởng tượng nó như một đạo diễn trong một vở kịch, hướng dẫn từng diễn viên (phần tử) cách hành xử trên sân khấu (trang web của bạn).
Giá trị có thể sử dụng
Đặc tính display giống như một cây kéo đa năng - nó có nhiều công cụ (giá trị) cho các tình huống khác nhau. Dưới đây là bảng các giá trị phổ biến nhất chúng ta sẽ thảo luận:
| Giá trị | Mô tả |
|---|---|
| inline | Hiển thị phần tử như một phần tử inline (như <span>) |
| block | Hiển thị phần tử như một phần tử block (như <div>) |
| inline-block | Hiển thị phần tử như một bộ chứa block mức inline |
| none | Phần tử hoàn toàn bị loại bỏ khỏi tài liệu |
| flex | Hiển thị phần tử như một bộ chứa flex mức block |
| inline-flex | Hiển thị phần tử như một bộ chứa flex mức inline |
| grid | Hiển thị phần tử như một bộ chứa grid mức block |
| inline-grid | Hiển thị phần tử như một bộ chứa grid mức inline |
| table | Cho phép phần tử hành xử như một phần tử <table>
|
| list-item | Cho phép phần tử hành xử như một phần tử <li>
|
Áp dụng cho
Đặc tính display áp dụng cho tất cả các phần tử HTML. Đúng vậy, bạn đã nghe đúng - tất cả chúng! Từ những phần tử khiêm tốn như <span> đến những phần tử mạnh mẽ như <div>, mỗi phần tử đều có thể bị ảnh hưởng bởi đặc tính mạnh mẽ này.
Cú pháp DOM
Khi làm việc với JavaScript và Đối tượng tài liệu (DOM), bạn có thể thao tác đặc tính display như sau:
element.style.display = "value";Ví dụ:
document.getElementById("myElement").style.display = "none";Điều này sẽ ẩn phần tử có ID là "myElement". Phép thuật, phải không?
CSS display - Giá trị inline
Hãy bắt đầu với giá trị inline. Đây là giá trị mặc định cho các phần tử như <span>, <a>, và <img>.
<style>
.inline-element {
display: inline;
background-color: yellow;
padding: 5px;
}
</style>
<p>Đây là một đoạn văn với <span class="inline-element">phần tử inline</span> bên trong.</p>Trong ví dụ này, phần tử <span> sẽ chảy cùng với văn bản, không bắt đầu trên một dòng mới. Nó giống như một từ trong một câu - nó không làm gián đoạn luồng.
CSS display - Giá trị block
Tiếp theo là giá trị block. Đây là giá trị mặc định cho các phần tử như <div>, <p>, và <h1> đến <h6>.
<style>
.block-element {
display: block;
background-color: lightblue;
padding: 10px;
margin: 10px 0;
}
</style>
<div class="block-element">Đây là một phần tử block.</div>
<div class="block-element">Đây là một phần tử block khác.</div>Phần tử block bắt đầu trên một dòng mới và kéo dài ra toàn bộ chiều rộng có sẵn. Chúng giống như các đoạn văn trong một cuốn sách - mỗi đoạn bắt đầu trên một dòng mới.
CSS display - Giá trị inline-block
Giá trị inline-block là một sự kết hợp giữa inline và block.
<style>
.inline-block-element {
display: inline-block;
width: 100px;
height: 100px;
background-color: lightgreen;
margin: 5px;
}
</style>
<div class="inline-block-element"></div>
<div class="inline-block-element"></div>
<div class="inline-block-element"></div>Các phần tử này sẽ nằm cạnh nhau (như inline), nhưng bạn có thể đặt chiều rộng và chiều cao cho chúng (như block). Nó rất phù hợp để tạo các bố cục kiểu lưới mà không cần sử dụng lưới hoặc flex thực tế.
CSS display - Giá trị none
Giá trị none giống như một tấm chăn vô hình cho các phần tử của bạn.
<style>
.hidden {
display: none;
}
</style>
<p>Bạn có thể thấy đoạn văn này.</p>
<p class="hidden">Nhưng bạn không thể thấy đoạn văn này!</p>Các phần tử có display: none hoàn toàn bị loại bỏ khỏi bố cục. Nó như thể chúng không tồn tại trên trang.
CSS display - Giá trị table
CSS có thể làm cho các phần tử hành xử như các phần tử bảng, ngay cả khi chúng không phải là thẻ <table>.
<style>
.table {
display: table;
width: 100%;
border-collapse: collapse;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
border: 1px solid black;
padding: 5px;
}
</style>
<div class="table">
<div class="table-row">
<div class="table-cell">Ô 1</div>
<div class="table-cell">Ô 2</div>
</div>
<div class="table-row">
<div class="table-cell">Ô 3</div>
<div class="table-cell">Ô 4</div>
</div>
</div>Điều này tạo ra một cấu trúc kiểu bảng mà không cần sử dụng các thẻ bảng thực tế. Nó rất hữu ích cho việc tạo các bố cục cần hành xử như bảng nhưng với nhiều tính linh hoạt hơn.
CSS display - Giá trị flex
Flexbox là một công cụ bố cục mạnh mẽ, và nó bắt đầu với display: flex.
<style>
.flex-container {
display: flex;
justify-content: space-around;
background-color: lightgray;
}
.flex-item {
background-color: white;
margin: 10px;
padding: 20px;
}
</style>
<div class="flex-container">
<div class="flex-item">Phần tử Flex 1</div>
<div class="flex-item">Phần tử Flex 2</div>
<div class="flex-item">Phần tử Flex 3</div>
</div>Điều này tạo ra một bộ chứa flex với các phần tử có thể dễ dàng căn chỉnh và phân phối. Nó giống như có một nhóm người nhảy dù có thể giãn và teo để phù hợp với không gian của họ.
CSS display - Giá trị inline-flex
inline-flex tương tự như flex, nhưng bộ chứa本身的 hành xử như một phần tử inline.
<style>
.inline-flex-container {
display: inline-flex;
background-color: lightpink;
}
.flex-item {
margin: 5px;
padding: 10px;
background-color: white;
}
</style>
<div class="inline-flex-container">
<div class="flex-item">Phần tử 1</div>
<div class="flex-item">Phần tử 2</div>
</div>
<div class="inline-flex-container">
<div class="flex-item">Phần tử 3</div>
<div class="flex-item">Phần tử 4</div>
</div>Điều này cho phép bạn có nhiều bộ chứa flex trên cùng một dòng, rất hữu ích cho việc tạo các bố cục phức tạp.
CSS display - Giá trị grid
Grid là một công cụ bố cục mạnh mẽ khác, bắt đầu với display: grid.
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: lightblue;
padding: 10px;
}
.grid-item {
background-color: white;
padding: 20px;
text-align: center;
}
</style>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>Grid cho phép bạn tạo các bố cục phức tạp với hàng và cột. Nó giống như có một bảng tính hoàn hảo cho các phần tử của bạn!
CSS display - Giá trị inline-grid
Tương tự như inline-flex, inline-grid tạo ra một bộ chứa lưới hành xử như một phần tử inline.
<style>
.inline-grid-container {
display: inline-grid;
grid-template-columns: auto auto;
gap: 10px;
background-color: lightyellow;
padding: 10px;
}
.grid-item {
background-color: white;
padding: 10px;
text-align: center;
}
</style>
<div class="inline-grid-container">
<div class="grid-item">A</div>
<div class="grid-item">B</div>
</div>
<div class="inline-grid-container">
<div class="grid-item">C</div>
<div class="grid-item">D</div>
</div>Điều này cho phép bạn có nhiều bộ chứa lưới trên cùng một dòng, mở ra nhiều khả năng bố cục hơn.
CSS display - Giá trị list-item
Cuối cùng, chúng ta có list-item, làm cho một phần tử hành xử như một phần tử danh sách.
<style>
.custom-list {
display: list-item;
list-style-type: square;
margin-left: 20px;
}
</style>
<div class="custom-list">Đây là một phần tử danh sách tùy chỉnh</div>
<div class="custom-list">Đây là phần tử danh sách tùy chỉnh khác</div>Điều này rất hữu ích khi bạn muốn tạo các cấu trúc kiểu danh sách mà không cần sử dụng các thẻ <ul> hoặc <ol>.
Và thế là bạn đã có nó, các bạn! Chúng ta đã hành trình qua vùng đất của các đặc tính display, từ inline đến grid. Nhớ rằng, chìa khóa để thành thạo CSS là sự thực hành. Vậy hãy đi thử nghiệm và khám phá các đặc tính này. Ai biết được? Bạn có thể tạo ra điều lớn lao tiếp theo trong thiết kế web!
Chúc các bạn may mắn và các bố cục của bạn luôn chính xác đến từng pixel! ??
Credits: Image by storyset