Nội dung chính
Thuộc tính display CSS có ảnh hưởng lớn đến cách sắp xếp và bố trí của phần tử HTML trên mỗi trang web. Chẳng hạn, khi muốn sử dụng các mô hình hiện đại như Flexbox, Grid, bạn cần áp dụng thuộc tính display mới có thể khai thác được hết tính năng và giá trị của chúng. Vậy display CSS gồm những tính năng gì và cách áp dụng như thế nào?
Qua bài viết, ITviec sẽ giúp bạn hiểu rõ hơn:
- Display CSS là gì? Mục đích sử dụng là gì?
- Chi tiết 9 cách sử dụng thuộc tích Display CSS kèm ví dụ cụ thể
Display CSS là gì? Vai trò của display CSS trong thiết kế web
Thuộc tính display CSS là công cụ giúp các Front end developer kiểm soát cách thức hiển thị của các phần tử HTML trên trang web bằng cách thay đổi kiểu hiển thị mặc định của phần tử đó.
Ví dụ: Mỗi phần tử HTML có một kiểu mặc định bởi trình duyệt web. Phần tử <div> hiển thị như một khối (block), phần tử <span> hiển thị như nội tuyến (inline). Với thuộc tính display CSS, bạn có thể ghi đè kiểu mặc định này và thay đổi cách chúng hiển thị. Chẳng hạn, bạn có thể thay đổi phần tử khối thành nội tuyến hoặc ngược lại.
Thuộc tính display CSS giúp bố cục trang web trở nên liên kết hơn, thu hút người dùng và tăng tính tương tác hơn nhờ 4 khả năng:
- Kiểm soát hành vi mặc định của phần tử
Thuộc tính display cho phép thay đổi hoàn toàn hiển thị mặc định của phần tử, mang đến sự linh hoạt trong việc điều chỉnh bố cục trang. Bạn không chỉ có thể biến một phần tử khối thành nội tuyến hoặc ngược lại như ví dụ trên mà còn có thể tạo ra các bố cục phức tạp với nhiều cột và hàng.
- Tạo bố cục trang web phức tạp
Nhờ khả năng kiểm soát chính xác cách hiển thị từng phần tử, thuộc tính display trở thành công cụ đắc lực cho việc tạo ra các bố cục trang web phức tạp và độc đáo.
Ví dụ:
- Sử dụng display: flex để tạo bố cục flexbox, sắp xếp các phần tử con theo nhiều hướng;
- Sử dụng display: grid để tạo bố cục lưới, sắp xếp các phần tử con thành hàng và cột một cách ngay ngắn, khoa học.
Thậm chí, bạn còn có thể kết hợp nhiều giá trị display khác nhau để tạo ra các bố cục phức tạp hơn.
- Hiển thị nội dung theo ý muốn
Thuộc tính display cung cấp khả năng ẩn hoặc hiển thị các phần tử một cách linh hoạt, giúp bạn kiểm soát chính xác nội dung hiển thị trên trang web. Điều này đặc biệt hữu ích trong việc tạo ra các hiệu ứng động, hiển thị hay ẩn nội dung theo tương tác của người dùng, hoặc đơn giản là tối ưu hóa bố cục trang cho từng thiết bị khác nhau.
- Tăng cường khả năng tiếp cận
Việc sử dụng thuộc tính display hợp lý sẽ giúp nâng cao khả năng tiếp cận của trang web, đảm bảo mọi người dùng dù sử dụng thiết bị nào đi nữa cũng có thể truy cập và tương tác một cách dễ dàng.
Cú pháp và các giá trị của thuộc tính display CSS
| Giá trị | Mô tả | Cú pháp |
| inline | Hiển thị một phần tử dưới dạng phần tử nội tuyến (inline). Mọi thuộc tính chiều cao và chiều rộng đều không có hiệu lực. |
display: inline;
|
| block | Hiển thị một phần tử dưới dạng phần tử khối. Nội dung sẽ bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng. |
display: block;
|
| contents | Làm cho vùng chứa (container) biến mất, khiến các phần tử con trở thành phần tử con trực tiếp của phần tử cha ban đầu trong DOM. |
display: contents;
|
| flex | Hiển thị một phần tử dưới dạng thùng chứa linh hoạt cấp khối (block-level flex container). |
display: flex;
|
| grid | Hiển thị một phần tử dưới dạng vùng chứa lưới cấp khối (block-level grid container). |
display: grid;
|
| inline-block | Hiển thị một phần tử dưới dạng vùng chứa khối cấp độ nội tuyến (inline-level block container). Phần tử này được định dạng như một phần tử inline, nhưng bạn có thể áp dụng các giá trị chiều cao và chiều rộng. |
display: inline-block;
|
| inline-flex | Hiển thị một phần tử dưới dạng vùng chứa linh hoạt cấp độ nội tuyến (inline-level flex container), nhưng chúng sử dụng bố cục flexbox để sắp xếp các phần tử con một cách linh hoạt. |
display: inline-flex;
|
| inline-grid | Hiển thị một phần tử dưới dạng vùng chứa lưới cấp độ nội tuyến (inline-level grid container), nhưng chúng sử dụng bố cục lưới để sắp xếp các phần tử con thành hàng và cột. |
display: inline-grid;
|
| inline-table | Phần tử được hiển thị dưới dạng bảng cấp độ nội tuyến (inline-level table). Giá trị này ít được sử dụng trong thực tế vì nó có thể gây ra một số vấn đề về bố cục và khả năng tương thích. |
display: inline-table;
|
| list-item | Các phần tử hoạt động giống như phần tử <li> và <ul>. |
display: list-item;
|
| run-in | Hiển thị một phần tử dưới dạng khối hoặc nội tuyến, tùy thuộc vào ngữ cảnh. Giá trị này ít được sử dụng trong thực tế vì nó có thể dẫn đến hành vi không mong muốn và khó kiểm soát bố cục. |
display: run-in;
|
| table | Thiết lập cách phần tử hoạt động giống như phần tử <table>. |
display: table;
|
| table-caption | Thiết lập cách phần tử hoạt động giống như phần tử <caption>. |
display: table-caption;
|
| table-column-group | Thiết lập cách phần tử hoạt động giống như phần tử <colgroup>. | display: table-column-group; |
| table-header-group | Thiết lập cách phần tử hoạt động giống như phần tử <thead>. | display: table-header-group; |
| table-footer-group | Thiết lập cách phần tử hoạt động giống như phần tử <tfoot>. | display: table-footer-group; |
| table-row-group | Thiết lập cách phần tử hoạt động giống như phần tử <tbody>. | display: table-row-group; |
| table-cell | Thiết lập cách phần tử hoạt động giống như phần tử <td>. | display: table-cell; |
| table-column | Thiết lập cách phần tử hoạt động giống như phần tử <col>. | display: table-column; |
| table-row | Thiết lập cách phần tử hoạt động giống như phần tử <tr>. | display: table-row; |
| none | Phần tử bị loại bỏ hoàn toàn. | display: none; |
| initial | Thiết lập phần tử về giá trị mặc định. | display: initial; |
| inherit | Phần tử được kế thừa thuộc tính từ phần tử cha. | display: inherit; |
Các giá trị phổ biến của display CSS kèm ví dụ
Trong CSS có hai loại phần tử là cấp dòng và cấp khối. Phần tử cấp khối chiếm toàn bộ không gian trên một dòng mới, phần tử cấp dòng thì ngược lại. Mỗi giá trị của thuộc tính display CSS có ảnh hưởng đến cách một phần tử được bố cục và hiển thị trên trang web. Để hiểu rõ hơn về từng giá trị, hãy theo dõi nội dung bên dưới đây nhé.
display: inline;
Giá trị inline biến các phần tử HTML thành phần tử nội tuyến. Các phần tử này sẽ xuất hiện trên cùng một dòng mà không bị ngắt quãng, giống như cách các phần tử <span> hoạt động. Đặc biệt, chiều rộng và chiều cao của các phần tử nội tuyến được xác định bởi nội dung mà chúng chứa. Do đó, bạn không thể đặt chiều rộng và chiều cao của chúng bằng CSS.
Ví dụ về display: inline;
| HTML | CSS |
|
<body> <div id=”div-0″>div 1</div> <div id=”div-1″>div 2</div> <div id=”div-2″>div 3</div> <br> <span id=”span-0″>span 1</span> <span id=”span-1″>span 2</span> <span id=”span-2″>span 3</span> </body> |
body { font-family: “Arial”; } div, span { background-color: #2e3f50; border-radius: 5px; display: inline; } div { color: #fd8f59; } span { color: #1ebda5; } |
Kết quả hiển thị:
display: block;
Giá trị block làm cho một phần tử trở thành phần tử khối. Các phần tử khối bắt đầu một dòng mới và chiếm toàn bộ chiều rộng của khung nhìn theo mặc định, tương tự cách các phần tử <div> hoạt động.
Ví dụ về display: block;
| HTML | CSS |
|
<body> <div id=”div-0″>div 1</div> <div id=”div-1″>div 2</div> <div id=”div-2″>div 3</div> <br> <span id=”span-0″>span 1</span> <span id=”span-1″>span 2</span> <span id=”span-2″>span 3</span> </body> |
body { font-family: “Arial”; } div, span { background-color: #2e3f50; border-radius: 5px; display: block; } div { color: #fd8f59; } span { color: #1ebda5; } |
Kết quả hiển thị:
display: inline-block
inline-block có thể xem là sự kết hợp giữa hai giá trị inline và block. Khi được gán giá trị này, phần tử được thiết lập như inline nhưng có thể điều chỉnh chiều rộng và chiều cao, điều mà inline không làm được.
Ví dụ về display: inline-block;
| HTML | CSS |
|
<body> <div id=”div-0″>div 1</div> <div id=”div-1″>div 2</div> <div id=”div-2″>div 3</div> <br> <span id=”span-0″>span 1</span> <span id=”span-1″>span 2</span> <span id=”span-2″>span 3</span> </body> |
body { font-family: “Arial”; } div, span { background-color: #2e3f50; border-radius: 5px; display: inline-block; } div { color: #fd8f59; } span { color: #1ebda5; } |
Kết quả hiển thị:
display: none
Khi đặt thuộc tính display của một phần tử thành none, phần tử sẽ biến mất hoàn toàn khỏi trang và không ảnh hưởng đến bố cục. Điều này cũng khiến trình đọc màn hình không truy cập được phần tử đó.
Ví dụ về display: none;
| HTML | CSS |
|
<body> <div id=”div-0″>div 1</div> <div id=”div-1″>div 2</div> <div id=”div-2″>div 3</div> <br> <span id=”span-0″>span 1</span> <span id=”span-1″>span 2</span> <span id=”span-2″>span 3</span> </body> |
body { font-family: “Arial”; } div, span { background-color: #2e3f50; border-radius: 5px; display: none; } div { color: #fd8f59; } span { color: #1ebda5; } |
Kết quả hiển thị:
display: table
Thuộc tính display: table được sử dụng để hiển thị một phần tử HTML như một bảng. Có nghĩa là, khi bạn áp dụng thuộc tính này cho một phần tử, nó sẽ tạo ra một bảng với một hàng và một cột duy nhất, trong đó phần tử được đặt trong ô bảng.
Trước khi có Flex, Float, Grid, display: table được sử dụng rất phổ biến. Tuy nhiên hiện nay, với các thuộc tính hữu dụng vừa liệt kê, bạn sẽ không còn dùng display: table nhiều.
Ví dụ về display: table;
| HTML | CSS |
|
<div class=”table-container”> <div> <div>STT</div> <div>Họ và tên</div> <div>Email</div> </div> <div> <div>1</div> <div>Nguyễn Văn A</div> <div>nguyenvana@gmail.com</div> </div> <div> <div>2</div> <div>Trần Thị B</div> <div>tranthib@gmail.com</div> </div> </div> |
.table-container { display: table; border: 1px solid #ccc; padding: 10px; } .table-container > div border-bottom: 1px solid #ccc; } .table-container > div > div padding: 5px; text-align: center; } |
Kết quả hiển thị:
display: flex
Thuộc tính display: flex được sử dụng để tạo bố cục flexbox cho các phần tử HTML. Flexbox là một mô hình bố cục linh hoạt cho phép bạn sắp xếp các phần tử theo nhiều cách khác nhau, chẳng hạn theo chiều ngang, chiều dọc hoặc cả hai hướng.
Ví dụ về display: flex;
| HTML | CSS |
|
<div class=”container”> <div class=”child”> Lorem ipsum dolor sit amet consectetur adipisicing elit. <span>This is an inline element</span> Modi eaque debitis eos quodlabore maiores delectus asperiores voluptatem voluptas soluta! </div> <div class=”child”> Lorem ipsum dolor sit amet consectetur adipisicing elit. <span>This is an inline element</span> Modi eaque debitis eos quodlabore maiores delectus asperiores voluptatem voluptas soluta! </div> </div> |
.container { display: flex; align-items: center; justify-content: center; height: 100vh; font-size: 2rem; } span { visibility: hidden; background-color: #006100; width: 140px; height: 140px; } .child { border: 2px solid crimson; margin: 4px; } |
Kết quả hiển thị:
display: grid
Trong CSS, display: grid là một thuộc tính được sử dụng để tạo bố cục dạng lưới cho các phần tử HTML. Grid layout là một mô hình linh hoạt cho phép bạn sắp xếp các phần tử theo hàng, cột hoặc cả hai. So với các mô hình bố cục truyền thống như display: table và display: flex, grid layout dễ sử sụng và có hiệu suất tốt hơn.
Ví dụ về display: grid;
| HTML | CSS |
|
<div class=”container”> <div class=”child”> Lorem ipsum dolor sit amet consectetur adipisicing elit. <span>This is an inline element</span> Modi eaque debitis eos quodlabore maiores delectus asperiores voluptatem voluptas soluta! </div> <div class=”child”> Lorem ipsum dolor sit amet consectetur adipisicing elit. <span>This is an inline element</span> Modi eaque debitis eos quodlabore maiores delectus asperiores voluptatem voluptas soluta! </div> </div> |
.container { display: grid; place-items: center; height: 100vh; font-size: 2rem; }
span { visibility: hidden; background-color: #006100; width: 140px; height: 140px; } .child { border: 2px solid crimson; margin: 4px; } |
Kết quả hiển thị:
display: list-item
Các phần tử được gán display: list-item hoạt động giống như các phần tử <li> . Toàn bộ phần tử trở thành phần tử cấp khối, văn bản bên trong trở thành phần tử nội tuyến riêng và có dấu hiển thị đầu dòng (bullet point).
Ví dụ về display:list-item;
| HTML | CSS |
|
<body> <div id=”div-0″>div 1</div> <div id=”div-1″>div 2</div> <div id=”div-2″>div 3</div> <br> <span id=”span-0″>span 1</span> <span id=”span-1″>span 2</span> <span id=”span-2″>span 3</span> </body> |
body { font-family: “Arial”; } div, span { background-color: #2e3f50; padding: 10px; border-radius: 5px; display: list-item;body { font-family: “Arial”; } div, span { background-color: #2e3f50; padding: 10px; border-radius: 5px; display: list-item; margin-left: 30px; } div { color: #fd8f59; } span { color: #1ebda5; } margin-left: 30px; } div { color: #fd8f59; } span { color: #1ebda5; } |
Kết quả hiển thị:
display: contents
Trong CSS, display: contents là một giá trị thuộc tính display tương đối mới, được giới thiệu trong CSS Spec Level 3. Khi bạn áp dụng display: contents cho một phần tử, trình duyệt sẽ thay thế phần tử đó bằng nội dung trực tiếp của nó.
Điều này có nghĩa là bất kỳ phần tử con nào của phần tử được đặt display: contents sẽ được di chuyển lên một cấp và hiển thị trực tiếp trong bố cục.
Ví dụ về display: contents;
| HTML | CSS |
|
<div class=”content”> <div class=”inner”> <p>Đây là inner box. Nếu hiển thị: Nội dung chạy trong trình duyệt của bạn, bạn sẽ thấy một hộp full width có viền màu đỏ.</p> <p>Nếu hiển thị: Nội dung không chạy hoặc nếu bạn xóa thuộc tính display khỏi .content, bạn sẽ thấy một hộp 400 pixel có viền và màu nền màu xám, bên trong sẽ được lồng hộp có viền màu đỏ.</p> </div> </div>
|
.content { border: 2px solid #999; background-color: #ccc; border-radius: 5px; padding: 10px; width: 400px; display: contents; } .inner { border: 2px solid red; border-radius: 5px; padding: 10px; } |
Kết quả hiển thị:
Các câu hỏi thường gặp về display CSS
Sự khác biệt giữa display:inline-flex và display:flex trong CSS là gì?
Cả hai thuộc tính display: inline-flex và display: flex đều được sử dụng để tạo bố cục. Tuy nhiên cả hai vẫn có những điểm khác biệt trong cách hoạt động.
| display: inline -flex | display: flex |
| Hoạt động như một phần tử nội tuyến | Hoạt động như một phần tử khối |
| Chỉ chiếm không gian cần thiết theo yêu cầu của nội dung của nó. | Chiếm tất cả chiều rộng của vùng chứa nó. |
| Đặt trục chéo thành dọc. | Có thể có trục ngang hoặc dọc. |
| Thường được sử dụng cho các thành phần cấp khối như nút, menu điều hướng, v.v. | Thường được sử dụng cho các phần tử cấp khối như div, phần, v.v. |
Sự khác biệt giữa display: inline và display: inline-block trong CSS là gì?
| Inline | Inline-block |
| Chiều rộng và chiều cao của màn hình không thay đổi các phần tử display: inline. | Chiều rộng và chiều cao của màn hình có thể điều chỉnh các phần tử inline-block. |
| Inline có thể có phần đệm và lề theo chiều ngang, không có đệm và lề theo chiều dọc. | Inline-block có thể có phần đệm và lề ở cả bốn hướng. |
| Inline không thể có phần tử khối con. Chỉ có thể chứa các phần tử inline khác (chữ, hình ảnh, v.v.). | Inline-block có thể chứa một phần tử con là khối. Có thể chứa các phần tử con bất kỳ (inline hoặc block). |
Tổng kết
Sử dụng thành thạo thuộc tính display giúp bạn thiết kế được những trang web có bố cục hấp dẫn, cách hiển thị các phần tử trong CSS cũng được kiểm soát cao hơn. Hy vọng bài viết này sẽ là tài liệu tham khảo hữu ích cho bạn trong quá trình tìm hiểu và thực hành display CSS.
Tham khảo các bài viết thuộc chủ đề CSS trên ITviec:
- Transition CSS là gì? Phân biệt transition CSS và animation CSS
- Border CSS: Hướng dẫn chi tiết 9 cách sử dụng border CSS
- Box shadow CSS là gì? 7 cách dùng box shadow CSS cơ bản
- Animation CSS: Tổng hợp 11 hiệu ứng Animation CSS phổ biến
- Tailwind CSS: Hướng dẫn 3 cách thiết lập Tailwind chi tiết
- Grid CSS: Cẩm nang sử dụng Grid CSS cơ bản
- Hướng dẫn chi tiết cách dùng 8 thuộc tính background CSS
- Hover CSS: Chi tiết cách tạo Hover CSS và các ví dụ cụ thể
- Transform CSS: Chi tiết cách chuyển đổi phần tử 2D và 3D
- Overflow CSS là gì? Cách ứng dụng thuộc tính Overflow