Display CSS và cách sử dụng hiệu quả trong layout web hiện đại

Bạn đã từng thắc mắc vì sao cùng một đoạn mã HTML nhưng khi thêm một dòng CSS, các phần tử lại có thể hiển thị theo nhiều cách khác nhau? Có lúc tự động xuống dòng, có lúc nằm trên cùng một hàng, cũng có khi biến mất hoàn toàn khỏi giao diện hoặc được sắp xếp thành những bố cục hiện đại, linh hoạt. Điều này được quyết định bởi thuộc tính display trong CSS - một trong những thuộc tính quan trọng nhất trong kiểm soát bố cục web.

Tuy nhiên, nhiều người mới học CSS vẫn gặp khó khăn trong phân biệt các giá trị như block, inline, inline-block, flex hay grid, dẫn đến bố cục hiển thị không đúng như mong muốn. Lựa chọn sai giá trị display không chỉ khiến giao diện hiển thị không đúng ý mà còn làm mã CSS trở nên phức tạp và khó bảo trì. Vậy thuộc tính display trong CSS là gì? Có các thuộc tính display trong CSS nào, cách sử dụng ra sao và làm thế nào để ứng dụng hiệu quả trong các dự án thực tế? Cùng tìm hiểu chi tiết trong bài viết sau đây!
 

 

Thuộc tính display trong CSS là gì?

Thuộc tính display trong CSS được sử dụng để xác định cách một phần tử HTML hiển thị và tham gia vào bố cục của trang web (layout web). Nói cách khác, thuộc tính này quyết định phần tử sẽ được hiển thị dưới dạng khối (block), dòng (inline), kết hợp giữa hai dạng (inline-block) hay sử dụng các mô hình bố cục hiện đại như Flexbox và Grid. Mỗi phần tử HTML đều có một giá trị display mặc định. 

Ví dụ:

- Thẻ div thường có giá trị display: block, nghĩa là phần tử sẽ chiếm toàn bộ chiều rộng khả dụng trên trang web và tự động xuống dòng.

- Trong khi đó, các thẻ như span hoặc a thường sử dụng display: inline, chỉ chiếm không gian vừa đủ với nội dung bên trong và không tạo dòng mới.

Nhờ tính linh hoạt và vai trò quan trọng trong xây dựng bố cục, display được xem là một trong những thuộc tính CSS nền tảng mà bất kỳ lập trình viên front-end nào cũng cần nắm vững trước khi tìm hiểu sâu hơn về Flexbox, CSS Grid hay thiết kế giao diện responsive.
 

 

Vai trò của thuộc tính display CSS trong thiết kế web hiện đại

Trong quá trình phát triển giao diện website, thuộc tính display CSS không chỉ đơn thuần quyết định cách hiển thị của một phần tử mà còn đóng vai trò quan trọng trong xây dựng bố cục, tối ưu trải nghiệm người dùng và hỗ trợ các kỹ thuật thiết kế hiện đại. Từ những trang web đơn giản đến các ứng dụng web phức tạp, display luôn là một trong những công cụ cốt lõi giúp lập trình viên kiểm soát cách các thành phần tương tác và xuất hiện trên giao diện. Dưới đây là những vai trò nổi bật của thuộc tính display trong thiết kế web hiện đại.

1. Định hình cấu trúc dòng chảy

Thuộc tính display quyết định cách các phần tử HTML tham gia vào luồng bố cục của trang web. Mỗi giá trị như block, inline hay inline-block sẽ tạo ra cách hiển thị và sắp xếp nội dung khác nhau.

Ví dụ, các phần tử dạng block sẽ tự động xuống dòng và chiếm toàn bộ chiều rộng khả dụng, trong khi các phần tử inline chỉ chiếm không gian vừa đủ cho nội dung và có thể hiển thị trên cùng một hàng. Nhờ khả năng kiểm soát này, lập trình viên có thể xây dựng cấu trúc giao diện rõ ràng, hợp lý và phù hợp với từng mục đích sử dụng.

2. Nền tảng của thiết kế giao diện đáp ứng

Trong thời đại người dùng truy cập website từ nhiều loại thiết bị khác nhau, khả năng tạo giao diện responsive là yêu cầu gần như bắt buộc. Thuộc tính display đóng vai trò quan trọng trong hỗ trợ các kỹ thuật thiết kế đáp ứng thông qua những giá trị hiện đại như flex và grid.

Khi kết hợp với media query, lập trình viên có thể dễ dàng thay đổi cách hiển thị của các thành phần theo từng kích thước màn hình. Điều này giúp giao diện tự động thích nghi với máy tính, máy tính bảng hoặc điện thoại mà vẫn đảm bảo tính thẩm mỹ và khả năng sử dụng.

3. Tối ưu hóa trải nghiệm người dùng thông qua điều khiển hiển thị

Một trong những ứng dụng phổ biến của thuộc tính display CSS là kiểm soát hiển thị hoặc ẩn các thành phần giao diện. Với giá trị display: none, phần tử có thể được loại bỏ hoàn toàn khỏi bố cục trang mà không ảnh hưởng đến các thành phần còn lại.

Tính năng này thường được sử dụng cho menu điều hướng trên thiết bị di động, hộp thoại popup, thông báo, bộ lọc sản phẩm hoặc các nội dung được hiển thị theo hành vi của người dùng. Nhờ đó, website trở nên gọn gàng hơn, giảm sự phân tán và mang lại trải nghiệm tương tác trực quan, thuận tiện hơn.

4. Giải phóng sức mạnh sáng tạo với hệ thống bố cục hiện đại

Trước đây, xây dựng bố cục web thường phụ thuộc vào các phương pháp phức tạp như sử dụng bảng (table) hoặc kỹ thuật float. Sự xuất hiện của các giá trị display: flex và display: grid đã mở ra những cách tiếp cận hoàn toàn mới trong thiết kế giao diện. 

- Flexbox cho phép căn chỉnh và phân phối không gian linh hoạt giữa các phần tử trong một chiều.

- Trong khi CSS Grid hỗ trợ xây dựng các bố cục hai chiều mạnh mẽ và trực quan.

Nhờ đó, lập trình viên có thể dễ dàng tạo ra những giao diện hiện đại, sáng tạo và tối ưu hơn mà không cần sử dụng quá nhiều mã nguồn phức tạp.

5. Tác động đến hiệu năng render của trình duyệt

Thuộc tính display còn ảnh hưởng đến quá trình render của trình duyệt. Khi một phần tử được đặt giá trị display: none, trình duyệt sẽ không hiển thị và cũng không phân bổ không gian cho phần tử đó trong quá trình tính toán bố cục.

Điều này có thể giúp giảm khối lượng xử lý đối với những thành phần không cần thiết tại một thời điểm nhất định. Tuy nhiên, thay đổi thuộc tính display quá thường xuyên thông qua JavaScript cũng có thể làm tăng số lần trình duyệt phải tính toán lại bố cục (reflow), ảnh hưởng đến hiệu suất của trang web. Vì vậy, sử dụng thuộc tính display một cách hợp lý sẽ góp phần tối ưu tốc độ tải và trải nghiệm người dùng trên website.
 

 

Các giá trị display CSS cơ bản, phổ biến nhất

Thuộc tính display trong CSS cung cấp nhiều giá trị khác nhau để kiểm soát cách phần tử HTML hiển thị trên trang web. Mỗi giá trị sẽ tạo ra một kiểu bố cục riêng, ảnh hưởng trực tiếp đến cách các phần tử được sắp xếp và tương tác với nhau. Trong quá trình phát triển website, có một số giá trị display được sử dụng thường xuyên hơn cả nhờ tính đơn giản và khả năng đáp ứng nhiều nhu cầu thiết kế giao diện. Dưới đây là những giá trị display CSS cơ bản mà bất kỳ lập trình viên nào cũng nên nắm vững.

1. Display: block

Giá trị display: block biến phần tử thành một phần tử dạng khối (block-level element). Khi được hiển thị dưới dạng block, phần tử sẽ tự động chiếm toàn bộ chiều rộng khả dụng của phần tử cha và luôn bắt đầu trên một dòng mới. Điều này có nghĩa là mỗi phần tử block sẽ được hiển thị tách biệt với các phần tử khác theo chiều dọc. Các thẻ HTML như < div >, < section >, < article >, < header > và < footer > thường có giá trị display mặc định là block.

Giá trị này đặc biệt phù hợp khi xây dựng các khu vực nội dung lớn như khối bài viết, thanh điều hướng, phần đầu trang hoặc các thành phần cần chiếm toàn bộ chiều ngang của bố cục. Ngoài ra, phần tử block cho phép thiết lập đầy đủ các thuộc tính về chiều rộng, chiều cao, margin và padding, giúp việc tùy chỉnh giao diện trở nên linh hoạt hơn.

2. Display: inline

Giá trị display: inline giúp phần tử hiển thị theo dạng dòng (inline-level element). Khác với block, phần tử inline không tạo dòng mới mà sẽ nằm liên tiếp với các phần tử khác trên cùng một hàng nếu còn đủ không gian.

Các phần tử như < span >, < a >, < strong > hay < em > thường sử dụng display mặc định là inline. Khi áp dụng giá trị này, phần tử chỉ chiếm diện tích vừa đủ để chứa nội dung bên trong thay vì chiếm toàn bộ chiều rộng của vùng chứa. 

Lưu ý là phần tử inline không hỗ trợ thiết lập chiều rộng (width) và chiều cao (height) theo cách thông thường. Vì vậy, display: inline thường được sử dụng cho các thành phần văn bản, liên kết hoặc các nội dung ngắn cần hiển thị liền mạch trong một đoạn văn.
 

 

3. Display: inline-block

Display: inline-block là sự kết hợp giữa đặc điểm của phần tử inline và block. Khi sử dụng giá trị này, phần tử có thể hiển thị trên cùng một hàng giống như inline nhưng vẫn hỗ trợ đầy đủ các thuộc tính về chiều rộng, chiều cao, margin và padding như một phần tử block. Đây là giải pháp rất hữu ích khi cần sắp xếp nhiều phần tử cạnh nhau mà vẫn muốn kiểm soát kích thước của từng thành phần. Ví dụ, các nút bấm, thẻ sản phẩm, menu điều hướng hoặc các khối nội dung nhỏ thường được thiết kế bằng inline-block.

Trước khi Flexbox và CSS Grid trở nên phổ biến, inline-block từng là một trong những phương pháp được sử dụng rộng rãi để xây dựng bố cục nhiều cột trên website. Mặc dù hiện nay có nhiều giải pháp hiện đại hơn, nhưng giá trị này vẫn rất hữu ích trong nhiều tình huống thực tế.

4. Display: none

Giá trị display: none được sử dụng để ẩn hoàn toàn một phần tử khỏi giao diện người dùng. Khi áp dụng giá trị này, phần tử sẽ không được hiển thị trên trang và cũng không chiếm bất kỳ không gian nào trong bố cục.

Khác với thuộc tính visibility: hidden, vốn chỉ làm phần tử trở nên vô hình nhưng vẫn giữ nguyên vị trí trong bố cục, display: none sẽ loại bỏ hoàn toàn phần tử khỏi luồng hiển thị của trang web. Các phần tử xung quanh sẽ tự động dịch chuyển để lấp đầy khoảng trống còn lại.

Display: none được sử dụng rất nhiều cho các chức năng tương tác như menu dropdown, popup, tab nội dung, thông báo tạm thời hoặc các thành phần chỉ hiển thị khi người dùng thực hiện một hành động nhất định. Đây là một trong những kỹ thuật cơ bản nhưng cực kỳ quan trọng trong việc xây dựng giao diện website động và hỗ trợ tối ưu trải nghiệm người dùng.

Những giá trị CSS display nâng cao

Bên cạnh những giá trị cơ bản như block, inline, inline-block hay none, thuộc tính display trong CSS còn cung cấp nhiều tùy chọn nâng cao giúp lập trình viên xây dựng các bố cục phức tạp và hiện đại hơn. Những giá trị này được thiết kế để giải quyết các bài toán về căn chỉnh giao diện, quản lý cấu trúc nội dung và tối ưu khả năng hiển thị trên nhiều thiết bị khác nhau.

1. Display: flex

Display: flex là một trong những giá trị được sử dụng phổ biến nhất trong thiết kế web hiện đại. Khi áp dụng giá trị này cho một phần tử cha, tất cả các phần tử con bên trong sẽ trở thành các flex item và được sắp xếp theo mô hình Flexbox. Điểm mạnh của Flexbox nằm ở khả năng căn chỉnh và phân phối không gian linh hoạt giữa các phần tử. Lập trình viên có thể dễ dàng sắp xếp các thành phần theo chiều ngang hoặc chiều dọc, căn giữa nội dung theo cả hai trục và kiểm soát khoảng cách giữa các phần tử mà không cần sử dụng các kỹ thuật phức tạp như float trước đây.

Flexbox đặc biệt phù hợp trong xây dựng thanh điều hướng, bố cục thẻ sản phẩm, danh sách tính năng, khu vực nút bấm hoặc các thành phần giao diện cần căn chỉnh động theo kích thước màn hình. Nhờ tính linh hoạt cao, display: flex đã trở thành một trong những công cụ quan trọng nhất trong thiết kế giao diện responsive.

2. Display: grid

Display: grid là giá trị kích hoạt hệ thống CSS Grid Layout - một mô hình bố cục mạnh mẽ cho phép quản lý các phần tử theo cả chiều ngang và chiều dọc. Nếu Flexbox tập trung vào sắp xếp các phần tử trong một chiều thì Grid được thiết kế để xử lý bố cục hai chiều một cách trực quan và hiệu quả hơn.

Với CSS Grid, lập trình viên có thể chia giao diện thành các hàng và cột, sau đó định vị các phần tử vào từng khu vực cụ thể. Điều này giúp việc xây dựng các trang web có cấu trúc phức tạp như trang tin tức, dashboard quản trị, landing page hoặc trang thương mại điện tử trở nên dễ dàng hơn.
 

3. Display: contents

Display: contents là một giá trị tương đối đặc biệt trong CSS. Khi áp dụng giá trị này, phần tử chứa sẽ không còn được hiển thị như một hộp (box) trong bố cục, nhưng các phần tử con bên trong vẫn được giữ nguyên và hiển thị bình thường.

Nói cách khác, trình duyệt sẽ bỏ qua phần tử cha trong quá trình xây dựng bố cục và chỉ xử lý trực tiếp các phần tử con. Điều này có thể hữu ích trong những trường hợp cần tối ưu cấu trúc HTML hoặc khi muốn các phần tử con tham gia trực tiếp vào bố cục Flexbox hoặc Grid mà không bị ảnh hưởng bởi lớp bao ngoài.

4. Display: table, table-row, table-cell

Các giá trị display: table, display: table-row và display: table-cell cho phép mô phỏng hành vi của bảng HTML bằng CSS mà không cần sử dụng thẻ < table > thực tế. Khi một phần tử được đặt display: table, nó sẽ hoạt động giống như một bảng. Các phần tử con có thể được thiết lập thành table-row để tạo hàng và table-cell để tạo ô dữ liệu. Nhờ đó, lập trình viên có thể xây dựng các bố cục dạng bảng hoặc căn chỉnh nội dung theo hàng và cột một cách hiệu quả.

Trước khi Flexbox và CSS Grid xuất hiện, kỹ thuật này từng được sử dụng khá phổ biến để căn giữa nội dung theo chiều dọc hoặc xây dựng các bố cục nhiều cột. Mặc dù hiện nay ít được sử dụng hơn, các giá trị thuộc nhóm table vẫn có giá trị trong một số trường hợp cần mô phỏng cấu trúc bảng mà vẫn giữ được tính linh hoạt của CSS.

5. Display: list-item

Display: list-item được sử dụng để biến một phần tử bất kỳ thành một mục danh sách tương tự như thẻ < li > trong HTML. Khi áp dụng giá trị này, phần tử sẽ tự động hiển thị ký hiệu danh sách như dấu chấm, số thứ tự hoặc các kiểu marker khác tùy theo cấu hình của CSS.

Giá trị này thường được sử dụng khi cần tạo danh sách động hoặc khi muốn áp dụng hành vi của phần tử danh sách cho các thẻ HTML khác mà không thay đổi cấu trúc mã nguồn. Bên cạnh đó, display: list-item còn có thể kết hợp với các thuộc tính như list-style-type, list-style-position hoặc list-style-image để tùy chỉnh kiểu hiển thị của ký hiệu danh sách.
 

Hướng dẫn sử dụng các thuộc tính display CSS trong thiết kế website

Mỗi giá trị của thuộc tính display trong CSS sẽ phù hợp với một mục đích khác nhau từ xây dựng bố cục cơ bản, thiết kế menu điều hướng đến tạo các hệ thống lưới sản phẩm hiện đại. Dưới đây là những ví dụ giúp bạn hiểu rõ hơn cách sử dụng thuộc tính display CSS trong các dự án web.

1. Sử dụng display: block để xây dựng layout cơ bản

Giá trị display: block thường được sử dụng để tạo các khu vực nội dung chính của website như header, content, sidebar và footer. Khi áp dụng giá trị này, mỗi phần tử sẽ chiếm toàn bộ chiều rộng khả dụng và tự động xuống dòng.

Bước 1: Tạo cấu trúc HTML cho trang web

Trước tiên, lập trình viên cần xây dựng các phần tử HTML đại diện cho từng khu vực của giao diện.

< div class="header">Header

< div class="content">Nội dung chính

< div class="footer">Footer

Bước 2: Áp dụng thuộc tính display CSS

Các phần tử < div > mặc định đã là block, tuy nhiên có thể khai báo rõ ràng để dễ quản lý mã nguồn.

.header,

.content,

.footer {

    display: block;

    width: 100%;

    padding: 20px;

}

Bước 3: Kiểm tra kết quả hiển thị

Sau khi áp dụng CSS, mỗi phần tử sẽ xuất hiện trên một dòng riêng biệt và chiếm toàn bộ chiều rộng của vùng chứa. Đây là nền tảng cơ bản để xây dựng hầu hết các bố cục website hiện nay.

2. Cách xây dựng thanh điều hướng với inline-block hoặc flex

Thanh điều hướng (navigation bar) là một trong những ứng dụng phổ biến nhất của thuộc tính display trong CSS. Tùy thuộc vào yêu cầu thiết kế và khả năng tương thích, bạn có thể sử dụng inline-block hoặc flex để sắp xếp các mục menu theo hàng ngang.

Sử dụng inline-block

Với display: inline-block, các phần tử danh sách sẽ hiển thị trên cùng một dòng nhưng vẫn giữ được khả năng thiết lập kích thước, khoảng cách và các thuộc tính khối khác.

< nav >

    < ul class="navbar">

        < li> Trang chủ

        < li> Giới thiệu

        < li> Dịch vụ

        < li> Liên hệ

    < /ul>

< /nav>

.navbar {

    list-style : none;

    padding : 0;

    margin : 0;

}

.navbar li {

    display : inline-block;

    margin-right : 20px;

}

.navbar a {

    text -decoration: none;

    color : #333;

}

Phương pháp này đơn giản, dễ triển khai và hoạt động tốt trên hầu hết các trình duyệt. Tuy nhiên, việc căn chỉnh các phần tử hoặc phân bổ khoảng cách đều nhau có thể cần thêm CSS hỗ trợ.

Sử dụng Flexbox

Flexbox là lựa chọn hiện đại và linh hoạt hơn khi xây dựng thanh điều hướng. Chỉ cần áp dụng display: flex cho phần tử cha, các mục menu sẽ tự động được sắp xếp theo hàng ngang.

Ví dụ: 

.navbar {

    display : flex;

    list-style : none;

    padding: 0;

    margin: 0;

    gap: 20px;

}

.navbar a {

    text- decoration: none;

    color: #333;

}

Ngoài sắp xếp các phần tử, Flexbox còn cho phép căn giữa, phân bổ khoảng cách và tạo giao diện responsive một cách dễ dàng thông qua các thuộc tính như justify-content, align-items và flex-wrap.

 

 

3. Căn giữa một phần tử tuyệt đối bằng display: flex

Trong các dự án thiết kế giao diện web, nhiều thành phần như popup, modal, hộp thoại thông báo hay màn hình loading thường được đặt với position: absolute để hiển thị nổi trên các nội dung khác. Thay vì sử dụng cách căn giữa truyền thống với top: 50%, left: 50% và transform: translate(-50%, -50%), bạn có thể tận dụng display: flex trên phần tử cha để căn giữa phần tử tuyệt đối một cách đơn giản và dễ quản lý hơn.

Cách hoạt động của Flexbox trong việc căn giữa

Bước 1: Tạo cấu trúc HTML

< div class="container">

    < div class="box">Nội dung

< /div>

Bước 2: Thiết lập Flexbox cho phần tử cha và định vị phần tử con

.container {

    position : relative;

    display : flex;

    justify-content : center;

    align-items : center;

    height : 500px;

    border : 1px solid #ddd;

}

.box {

    position : absolute;

    padding : 20px 30px;

    background-color: #4CAF50;

    color: #fff;

}

Trong đó:

- Display: flex kích hoạt Flexbox cho phần tử cha.

- Justify-content: center căn giữa phần tử theo chiều ngang.

- Align-items: center căn giữa phần tử theo chiều dọc.

- Position: relative giúp .container trở thành mốc định vị cho phần tử tuyệt đối.

- Position: absolute giúp .box được đặt nổi bên trong vùng chứa mà vẫn được Flexbox căn giữa.

Bước 3: Kiểm tra kết quả

Sau khi áp dụng các thuộc tính trên, phần tử .box sẽ được đặt chính giữa .container theo cả chiều ngang và chiều dọc. Cách này giúp mã CSS ngắn gọn, dễ đọc và hạn chế việc phải tính toán vị trí bằng top, left hay transform.

Phương pháp này đặc biệt phù hợp khi xây dựng các thành phần như cửa sổ popup, modal, thông báo nổi hoặc màn hình loading, nơi phần tử cần được hiển thị ở vị trí trung tâm của vùng chứa.

4. Thiết kế layout lưới sản phẩm bằng display: grid

Khi cần hiển thị nhiều sản phẩm theo dạng lưới với nhiều hàng và nhiều cột, display: grid là lựa chọn phù hợp nhờ khả năng quản lý bố cục hai chiều một cách linh hoạt và hiệu quả. CSS Grid giúp các phần tử được sắp xếp đồng đều, dễ kiểm soát khoảng cách giữa các hàng và cột, đồng thời thuận tiện khi xây dựng giao diện web responsive.

Các bước thiết kế layout lưới sản phẩm như sau: 

Bước 1: Tạo cấu trúc HTML

< div class="products" >

    < div class="item">Sản phẩm 1

    < div class="item">Sản phẩm 2

    < div class="item">Sản phẩm 3

    < div class="item">Sản phẩm 4

< /div >

Bước 2: Kích hoạt CSS Grid

.products {

    display : grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

}

.item {

    padding : 20px;

    border: 1px solid #ddd;

    text-align: center;

}

Trong đó:

- Display: grid kích hoạt mô hình bố cục Grid cho phần tử cha.

- Grid-template-columns: repeat(4, 1fr) tạo 4 cột có chiều rộng bằng nhau. Hàm repeat() giúp rút gọn cú pháp thay vì phải khai báo 1fr 1fr 1fr 1fr, còn 1fr là đơn vị chia đều không gian còn lại cho mỗi cột.

- Gap: 20px tạo khoảng cách 20px giữa các hàng và cột, giúp bố cục thông thoáng và dễ nhìn hơn.

- Các thuộc tính của .item như padding, border và text-align giúp sản phẩm có khoảng đệm hợp lý, hiển thị rõ ràng và căn giữa nội dung.

Bước 3: Tùy chỉnh hiển thị trên thiết bị nhỏ

@media (max-width: 768px) {

    .products {

        grid-template-columns: repeat(2, 1fr);

    }

}

Đoạn code trên sử dụng Media Query để thay đổi số lượng cột khi kích thước màn hình nhỏ hơn 768px. Thay vì hiển thị 4 cột như trên máy tính, bố cục sẽ chuyển thành 2 cột nhằm đảm bảo các sản phẩm vẫn có đủ không gian hiển thị và người dùng dễ thao tác trên thiết bị di động.

Bước 4: Kiểm tra giao diện

Sau khi áp dụng CSS Grid, các sản phẩm sẽ được sắp xếp thành 4 cột có kích thước bằng nhau trên màn hình lớn. Khi truy cập bằng máy tính bảng hoặc điện thoại, bố cục tự động giảm xuống còn 2 cột, giúp giao diện luôn cân đối và thân thiện với người dùng.

Đây là phương pháp được áp dụng rộng rãi trong các website bán hàng, trang danh mục sản phẩm, thư viện hình ảnh và nhiều giao diện thương mại điện tử hiện đại nhờ khả năng xây dựng bố cục trực quan, linh hoạt và dễ bảo trì.

 

 

5. Ứng dụng display: none để làm menu pop-up/ ẩn hiện phần tử

Display: none là một trong những giá trị được sử dụng nhiều nhất của thuộc tính display. Khi áp dụng giá trị này, phần tử sẽ bị ẩn hoàn toàn khỏi giao diện và không chiếm bất kỳ không gian nào trong bố cục của trang. Đây là giải pháp phổ biến để xây dựng menu pop-up, hộp thoại, thông báo hoặc các thành phần chỉ hiển thị khi người dùng thực hiện một thao tác nhất định.

Các bước ẩn và hiển thị menu pop-up:

Bước 1: Tạo cấu trúc HTML

< button > Hiển thị menu

< div class="popup" >

    Nội dung menu pop-up

< /div >

Bước 2: Ẩn phần tử bằng display: none

.popup {

    display : none;

    padding : 20px;

    margin-top : 10px;

    border: 1px solid #ddd;

    background-color: #f8f9fa;

}

Bước 3: Hiển thị phần tử khi cần

.popup.show {

    display : block;

}

Khi JavaScript thêm lớp show vào phần tử .popup, giá trị display sẽ chuyển từ none sang block, giúp menu xuất hiện trên giao diện.

Ví dụ:

const popup = document.querySelector(".popup");

           popup.classList. add("show");     // Hiển thị

popup.classList. remove("show");  // Ẩn

Bước 4: Kiểm tra kết quả

Ban đầu, menu pop-up sẽ được ẩn hoàn toàn và không chiếm không gian trên trang. Khi người dùng nhấn nút hoặc thực hiện một sự kiện được lập trình sẵn, lớp show sẽ được thêm vào để hiển thị menu. 

Phương pháp này được sử dụng rộng rãi khi xây dựng menu điều hướng trên thiết bị di động, cửa sổ popup, modal, dropdown, thông báo và nhiều thành phần tương tác khác trong giao diện web.

6. Xử lý hiển thị responsive theo kích thước màn hình

Trong thiết kế web hiện đại, giao diện cần có khả năng thích ứng với nhiều kích thước màn hình khác nhau, từ máy tính để bàn đến máy tính bảng và điện thoại. Bên cạnh media query, thuộc tính display cũng đóng vai trò quan trọng trong việc thay đổi cách hiển thị của các phần tử để tối ưu trải nghiệm người dùng trên từng thiết bị.

Các bước xử lý hiển thị responsive

Bước 1: Tạo cấu trúc HTML

< header class="header">

    < div class="logo">Logo

    < nav class="menu">

        < a href="#">Trang chủ

        < a href="#">Giới thiệu

        < a href="#">Dịch vụ

        < a href="#">Liên hệ

    < button class="menu-toggle">☰

< /header>

Bước 2: Thiết lập giao diện trên màn hình lớn

.header {

    display : flex;

    justify-content : space-between;

    align-items : center;

}

.menu {

    display : flex;

    gap : 20px;

}

.menu-toggle {

    display: none;

}

Trong bố cục dành cho máy tính, menu điều hướng được hiển thị theo hàng ngang bằng display: flex, trong khi nút menu hamburger được ẩn bằng display: none.

Bước 3: Thay đổi cách hiển thị trên màn hình nhỏ

@media (max -width: 768px) {

    .menu {

        display: none;

    }

    .menu-toggle {

        display: inline-block;

    }

}

Đoạn mã trên sử dụng Media Query để thay đổi giá trị của thuộc tính display khi chiều rộng màn hình nhỏ hơn 768px:

- Display: none ẩn thanh điều hướng ngang nhằm tiết kiệm không gian hiển thị.

- Display: inline-block hiển thị nút menu để người dùng có thể mở menu khi cần.

Bước 4: Kiểm tra giao diện

Khi hiển thị trên máy tính, người dùng sẽ nhìn thấy đầy đủ thanh điều hướng ngang. Khi chuyển sang màn hình điện thoại hoặc máy tính bảng, menu sẽ được ẩn và thay thế bằng nút menu. Khi kết hợp với JavaScript, nút này có thể mở hoặc đóng menu dạng trượt (off-canvas), dropdown hoặc pop-up.
 

 

7. Tối ưu cấu trúc DOM và Semantic HTML với display: contents

Trong một số trường hợp, bạn cần thêm các phần tử bao ngoài (wrapper) để tăng tính ngữ nghĩa (Semantic HTML) hoặc phục vụ JavaScript, nhưng lại không muốn các phần tử này ảnh hưởng đến bố cục của trang. Khi đó, display: contents là một giải pháp hữu ích. Giá trị contents khiến phần tử vẫn tồn tại trong cấu trúc HTML nhưng không tạo ra hộp (box) trong quá trình hiển thị. Thay vào đó, các phần tử con sẽ được hiển thị như thể chúng là con trực tiếp của phần tử cha bên ngoài.

Các bước sử dụng display: contents

Bước 1: Tạo cấu trúc HTML

< section class="products">

    < div class="wrapper">

        < article class="item">Sản phẩm 1

        < article class="item">Sản phẩm 2

        < article class="item">Sản phẩm 3

    < /div>

< /section>

Trong ví dụ trên, phần tử wrapper được sử dụng để nhóm các sản phẩm nhưng không cần tham gia vào nhiệm vụ tạo bố cục website.

Bước 2: Áp dụng display: contents

.products {

    display : grid;

    grid-template-columns : repeat(3, 1fr);

    gap : 20px;

}

.wrapper {

    display : contents;

}

.item {

    padding : 20px;

    border : 1px solid #ddd;

    text-align: center;

}

Trong đó:

- Display: grid tạo bố cục dạng lưới cho phần tử .products.

- Display: contents loại bỏ hộp hiển thị của .wrapper nhưng vẫn giữ nguyên phần tử trong mã HTML.

- Các phần tử .item sẽ được Grid xem như con trực tiếp của .products, giúp bố cục hoạt động đúng như mong muốn.

Bước 3: Kiểm tra kết quả

Sau khi áp dụng display: contents, phần tử .wrapper sẽ không còn ảnh hưởng đến bố cục. Các phần tử .item được sắp xếp trực tiếp trong lưới Grid mặc dù trong HTML chúng vẫn nằm bên trong .wrapper. Điều này giúp bạn giữ được cấu trúc HTML rõ ràng mà không cần thêm các phần tử trung gian làm phức tạp việc xây dựng giao diện.

8. Kết hợp display với các thuộc tính CSS khác

Thuộc tính display trong HTML thường được sử dụng cùng với nhiều thuộc tính CSS khác để tạo nên các giao diện website tối ưu hoàn chỉnh:
 

Kết hợp display với các thuộc tính CSS phù hợp sẽ giúp bạn xây dựng bố cục linh hoạt, dễ mở rộng và thân thiện với nhiều kích thước màn hình. Đây cũng là kỹ thuật được sử dụng phổ biến trong các website doanh nghiệp, cửa hàng trực tuyến và ứng dụng web hiện đại.

Những lỗi thường gặp khi sử dụng các thuộc tính display trong CSS

Thuộc tính display là nền tảng trong xây dựng bố cục và điều khiển cách hiển thị của các phần tử HTML. Tuy nhiên, nếu chưa hiểu rõ đặc điểm của từng giá trị hoặc kết hợp không đúng với các thuộc tính CSS khác, bạn rất dễ gặp phải những lỗi khiến giao diện bị sai lệch, khó bảo trì hoặc không hiển thị như mong muốn. Dưới đây là những lỗi phổ biến nhất khi sử dụng display trong CSS và cách khắc phục hiệu quả.

- Cố định kích thước cho phần tử display: inline: Nhiều người mới học CSS thường thiết lập width hoặc height cho các phần tử có display: inline như < span > hoặc < a > và thắc mắc vì sao kích thước không thay đổi. Nguyên nhân là phần tử inline chỉ chiếm đúng diện tích của nội dung bên trong nên các thuộc tính width và height sẽ không có hiệu lực. Do đó nếu cần thiết lập kích thước, hãy chuyển phần tử sang display: inline-block hoặc display: block.

- Nhầm lẫn giữa display: none và visibility: hidden: Đây là một trong những lỗi phổ biến nhất khi ẩn phần tử. display: none sẽ loại bỏ hoàn toàn phần tử khỏi bố cục, khiến không còn chiếm bất kỳ không gian nào trên trang. Trong khi đó, visibility: hidden chỉ làm phần tử trở nên vô hình nhưng vẫn giữ nguyên vị trí trong bố cục. Sử dụng sai thuộc tính có thể làm khoảng trắng xuất hiện ngoài ý muốn hoặc ảnh hưởng đến cách sắp xếp giao diện. Do đó, bạn cần sử dụng display: none khi muốn ẩn hoàn toàn phần tử và dùng visibility: hidden khi cần giữ nguyên không gian hiển thị.
 

 

- Lỗi khoảng trắng khi dùng display: inline-block: Khi nhiều phần tử inline-block được đặt cạnh nhau trong HTML, khoảng trắng hoặc ký tự xuống dòng giữa các thẻ sẽ được trình duyệt xem như một khoảng cách, khiến giao diện xuất hiện các khe hở không mong muốn. Điều này thường xảy ra khi xây dựng menu điều hướng hoặc danh sách sản phẩm. Khi đó, bạn cần xóa khoảng trắng giữa các thẻ HTML, đặt các thẻ liền nhau hoặc ưu tiên sử dụng display: flex để loại bỏ hoàn toàn vấn đề này.

- Quên kích hoạt Flex/Grid cho thẻ cha mà cấu hình cho thẻ con: Một lỗi thường gặp là khai báo các thuộc tính như justify-content, align-items, flex-direction hoặc grid-column cho phần tử con nhưng quên thiết lập display: flex hoặc display: grid cho phần tử cha. Khi đó, các thuộc tính này sẽ không có tác dụng vì phần tử cha chưa trở thành Flex Container hoặc Grid Container. Cách tốt nhất là luôn kiểm tra và đảm bảo phần tử cha đã được khai báo display: flex hoặc display: grid trước khi cấu hình các thuộc tính liên quan.

Một số câu hỏi thường gặp về thuộc tính display trong CSS

Trong quá trình học và sử dụng CSS, nhiều lập trình viên thường gặp các thắc mắc liên quan đến cách hoạt động của thuộc tính display, đặc biệt khi xây dựng bố cục bằng Flexbox, Grid hoặc xử lý việc ẩn, hiện phần tử. Dưới đây là những câu hỏi phổ biến giúp bạn hiểu rõ hơn và áp dụng display hiệu quả trong các dự án thực tế.

1. Tại sao đặt display: none nhưng phần tử vẫn làm chậm trang web?

Display: none chỉ ẩn phần tử khỏi giao diện và loại bỏ nó khỏi luồng bố cục của trang, nhưng phần tử vẫn tồn tại trong DOM. Nếu phần tử chứa hình ảnh lớn, video, nhiều phần tử con hoặc được JavaScript liên tục thao tác, trình duyệt vẫn phải tải tài nguyên hoặc xử lý các đoạn mã liên quan. Vì vậy, sử dụng display: none không đồng nghĩa với việc giảm hoàn toàn chi phí tải hoặc xử lý của trang web.

2. Khi nào nên dùng display: flex và khi nào dùng grid?

Bạn nên sử dụng display: flex khi cần sắp xếp các phần tử theo một chiều, chẳng hạn như menu điều hướng, thanh công cụ, nút bấm hoặc các khối nội dung nằm trên cùng một hàng hoặc cột. Trong khi đó, display: grid phù hợp với các bố cục hai chiều có nhiều hàng và nhiều cột, ví dụ như danh sách sản phẩm, thư viện ảnh, dashboard hoặc các trang có cấu trúc phức tạp. Lựa chọn đúng giữa Flexbox và Grid sẽ giúp mã CSS ngắn gọn và dễ bảo trì hơn.

3. Tại sao phần tử inline không set được width và height?

Các phần tử có display: inline chỉ chiếm đúng không gian cần thiết để hiển thị nội dung, vì vậy trình duyệt sẽ bỏ qua các thuộc tính width và height. Đây là cơ chế mặc định của phần tử nội tuyến như < span >, < a > hoặc < strong >. Nếu cần thiết lập kích thước cho các phần tử này, bạn nên chuyển sang display: inline-block hoặc display: block.

4. CSS display có ảnh hưởng đến hiệu suất website không?

Có nhưng mức độ ảnh hưởng thường không lớn nếu sử dụng hợp lý. Lựa chọn đúng giá trị display giúp trình duyệt tính toán bố cục hiệu quả hơn, đặc biệt khi sử dụng Flexbox hoặc Grid thay cho các kỹ thuật cũ như float hoặc display: table. Tuy nhiên, thay đổi thuộc tính display liên tục bằng JavaScript có thể khiến trình duyệt phải thực hiện lại quá trình tính toán bố cục (reflow), từ đó ảnh hưởng đến hiệu suất của trang web.

5. Thuộc tính display trong CSS có thể tạo hiệu ứng chuyển động trên web được không?

Không. Thuộc tính display không hỗ trợ hiệu ứng chuyển tiếp (transition) hoặc hoạt ảnh (animation) vì đây là thuộc tính không thể nội suy giữa các giá trị. Ví dụ, bạn không thể tạo hiệu ứng chuyển đổi mượt mà từ display: none sang display: block. Nếu muốn tạo hiệu ứng xuất hiện hoặc biến mất, bạn nên kết hợp các thuộc tính như opacity, visibility, transform hoặc max-height cùng với transition để mang lại trải nghiệm mượt mà hơn.
 

 

Tóm lại, thuộc tính display trong CSS đóng vai trò quan trọng trong việc xây dựng bố cục và kiểm soát cách hiển thị của các phần tử trên website. Từ những giá trị cơ bản như block, inline, inline-block đến các kỹ thuật hiện đại như flex, grid hay display: contents, mỗi giá trị đều có những ưu điểm và ứng dụng phù hợp với từng tình huống. Nắm vững cách sử dụng display sẽ giúp bạn xây dựng giao diện trực quan, responsive, dễ bảo trì và tối ưu trải nghiệm người dùng. Hy vọng những kiến thức và ví dụ trong bài viết của Phương Nam Vina sẽ giúp bạn hiểu rõ hơn về các thuộc tính display trong CSS và áp dụng hiệu quả vào quá trình thiết kế website.

Tham khảo thêm:

 Object-fit CSS là gì​? Cách sử dụng CSS object-fit cho website

 CSS text-align là gì? Cách dùng text-align để căn chỉnh nội dung

 CSS box model là gì​? Làm chủ layout website với box model CSS