Nếu HTML là bộ xương cung cấp cấu trúc cho một trang web, thì CSS (Cascading Style Sheets) chính là phần da thịt, quần áo và phong cách, quyết định toàn bộ diện mạo của trang web đó. Trong vô vàn thuộc tính của CSS, có một thuộc tính đóng vai trò nền tảng, được xem là “chìa khóa vạn năng” để kiểm soát cách sắp xếp và bố cục của mọi phần tử. Đó chính là display.
Việc hiểu và làm chủ thuộc tính này là một trong những kỹ năng quan trọng nhất của bất kỳ nhà phát triển web nào. Vậy thực sự CSS Display là gì? Nó có những giá trị nào và làm thế nào để sử dụng chúng một cách hiệu quả? Bài viết này sẽ là một cẩm nang toàn diện, dẫn dắt bạn đi từ những khái niệm cơ bản nhất.
Kiến thức nền tảng: Hiểu về Box Model và luồng trang
Trước khi đi sâu vào các giá trị cụ thể của CSS Display, chúng ta cần nắm vững hai khái niệm cốt lõi của CSS. Đây là những quy tắc nền tảng chi phối cách mọi thứ được hiển thị trên trình duyệt.
Mọi phần tử HTML đều là một chiếc “hộp” (Box Model)
Trong con mắt của trình duyệt, mọi phần tử HTML mà bạn viết ra, từ một đoạn văn <p>, một tiêu đề <h1>, cho đến một tấm ảnh <img> hay một đường link <a>, đều được xem là một chiếc hộp hình chữ nhật. Mô hình hộp (Box Model) này bao gồm bốn lớp xếp chồng lên nhau từ trong ra ngoài. Lớp trong cùng là content (nội dung), chứa văn bản hoặc hình ảnh của bạn. Bao quanh content là padding (vùng đệm), một khoảng không trong suốt dùng để tạo khoảng cách giữa nội dung và đường viền.
Tiếp theo là border (đường viền), đường kẻ bao quanh padding và content. Lớp ngoài cùng là margin (lề), một khoảng không trong suốt dùng để tạo khoảng cách giữa hộp này với các hộp khác xung quanh nó. Việc hiểu rõ mô hình này rất quan trọng. Bởi vì thuộc tính CSS Display sẽ quyết định cách những chiếc hộp này hành xử và tương tác với nhau trên trang.
Luồng văn bản (Document Flow): Quy tắc sắp xếp mặc định
Khi bạn viết code HTML mà không có bất kỳ CSS nào, trình duyệt sẽ tự động sắp xếp các “hộp” theo một quy tắc mặc định gọi là luồng văn bản thông thường (normal document flow). Quy tắc này rất đơn giản. Các phần tử sẽ được xếp chồng lên nhau theo chiều dọc, từ trên xuống dưới, theo đúng thứ tự chúng xuất hiện trong mã HTML.
Mỗi phần tử khối (block element) sẽ bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn. Các phần tử nội tuyến (inline element) sẽ nằm trên cùng một dòng với nhau, cho đến khi không còn đủ không gian thì mới xuống dòng mới. Toàn bộ thuộc tính CSS Display về cơ bản là một công cụ để chúng ta can thiệp và thay đổi quy tắc sắp xếp mặc định này. Nó cho phép chúng ta ra lệnh cho các “hộp” phải xếp theo chiều ngang, ẩn đi, hay sắp xếp theo các quy tắc phức tạp hơn.
Các giá trị cơ bản của CSS Display
Đây là những giá trị nền tảng và được sử dụng nhiều nhất. Việc nắm vững chúng là yêu cầu bắt buộc đối với mọi người học CSS.
CSS Display: block – Các phần tử khối độc lập
display: block là giá trị mặc định của nhiều thẻ HTML quan trọng. Các phần tử này được gọi là phần tử khối (block-level elements). Đặc điểm nhận dạng quan trọng nhất của chúng là luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng của phần tử chứa nó. Hãy tưởng tượng mỗi phần tử block giống như một viên gạch lớn, nó sẽ chiếm trọn một hàng trong bức tường.
Bạn có thể toàn quyền kiểm soát kích thước của viên gạch này bằng các thuộc tính width và height. Chúng cũng “tôn trọng” các giá trị margin và padding ở cả bốn phía (trên, dưới, trái, phải). Các thẻ HTML mặc định có display: block:
- <div>: Thẻ khối chung, dùng để nhóm các phần tử.
- <p>: Thẻ đoạn văn.
- <h1>, <h2>, …, <h6>: Các thẻ tiêu đề.
- <ul>, <ol>, <li>: Các thẻ danh sách.
- <form>, <header>, <footer>, <section>…
Ví dụ:
HTML
<p style="background-color: lightblue;">Đây là một đoạn văn.</p> <p style="background-color: lightcoral;">Đây là đoạn văn thứ hai.</p>
Kết quả là hai đoạn văn này sẽ nằm trên hai dòng riêng biệt, mỗi đoạn chiếm toàn bộ chiều rộng của trang. Đây là hành vi cơ bản nhất khi tìm hiểu CSS Display là gì.
CSS Display: inline – Các phần tử nội tuyến trên cùng một dòng
Trái ngược với block, các phần tử inline lại hòa mình vào dòng chảy của văn bản. Chúng không bắt đầu trên một dòng mới. Thay vào đó, chúng nằm nối tiếp nhau trên cùng một dòng, giống như các từ trong một câu văn. Đặc điểm quan trọng nhất cần nhớ là các phần tử inline không tôn trọng các thuộc tính width và height. Kích thước của chúng được quyết định bởi nội dung bên trong nó.
Ngoài ra, chúng cũng chỉ tôn trọng margin và padding theo chiều ngang (trái, phải), còn các giá trị margin-top, margin-bottom, padding-top, padding-bottom sẽ không có tác dụng đẩy các phần tử khác ra xa. Các thẻ HTML mặc định có display: inline:
- <span>: Thẻ nội tuyến chung, dùng để nhóm các phần tử nội tuyến.
- <a>: Thẻ liên kết.
- <img>: Thẻ hình ảnh (một trường hợp đặc biệt).
- <strong>, <em>: Các thẻ nhấn mạnh văn bản.
Ví dụ:
HTML
<p> Đây là một <a href="#" style="background-color: yellow;">đường link</a> và đây là một thẻ <span style="background-color: lightgreen;">span</span>. </p>
Kết quả là đường link và thẻ span sẽ nằm trên cùng một dòng với đoạn văn. Đây là một khái niệm quan trọng khác khi tìm hiểu CSS Display là gì.
CSS Display: inline-block – Sự kết hợp linh hoạt
Đây là một giá trị cực kỳ hữu ích, ra đời để giải quyết các hạn chế của cả block và inline. Một phần tử có display: inline-block sở hữu những đặc tính tốt nhất của cả hai thế giới. Về mặt bên ngoài, nó hành xử như một phần tử inline. Tức là nó sẽ nằm trên cùng một dòng với các phần tử khác và không tự động xuống dòng.
Tuy nhiên, về mặt bên trong, nó lại hành xử như một phần tử block. Tức là bạn có thể toàn quyền thiết lập width, height, cũng như margin và padding ở cả bốn phía cho nó. Đây là lựa chọn hoàn hảo khi bạn muốn tạo ra một danh sách các mục nằm ngang (như menu điều hướng) mà mỗi mục lại có kích thước và khoảng cách được tùy chỉnh chính xác. Việc sử dụng inline-block là một bước tiến lớn trong việc làm chủ CSS Display. Ví dụ:
<div style="display: inline-block; width: 100px; height: 100px; background-color: lightblue; margin: 10px;"></div> <div style="display: inline-block; width: 100px; height: 100px; background-color: lightcoral; margin: 10px;"></div>
Kết quả là bạn sẽ có hai hộp vuông nằm cạnh nhau trên cùng một dòng, mỗi hộp có kích thước 100×100 và cách nhau một khoảng lề.
CSS Display: none – Ẩn hoàn toàn một phần tử
Giá trị display: none được dùng để ẩn một phần tử khỏi trang web. Điểm khác biệt cốt lõi và cực kỳ quan trọng của display: none so với visibility: hidden là cách nó ảnh hưởng đến layout. Khi bạn đặt một phần tử là visibility: hidden, phần tử đó sẽ trở nên vô hình, nhưng nó vẫn chiếm một khoảng không gian trên trang. Bố cục của trang sẽ không thay đổi.
Ngược lại, khi bạn đặt một phần tử là display: none, phần tử đó không chỉ bị ẩn đi mà còn bị loại bỏ hoàn toàn khỏi luồng trang. Nó sẽ không chiếm bất kỳ không gian nào. Các phần tử xung quanh sẽ tự động dịch chuyển để lấp vào khoảng trống đó, như thể phần tử bị ẩn chưa từng tồn tại. display: none thường được sử dụng kết hợp với JavaScript để tạo ra các menu thả xuống, các hộp thoại pop-up, hoặc các nội dung có thể ẩn/hiện khi người dùng tương tác. Việc hiểu rõ sự khác biệt này là rất cần thiết khi học về CSS Display là gì.
Kỷ nguyên Layout hiện đại với Flexbox và Grid
Các giá trị block, inline là nền tảng, nhưng để xây dựng các bố cục phức tạp một cách hiệu quả, các nhà phát triển hiện đại dựa vào hai công cụ mạnh mẽ hơn rất nhiều: Flexbox và Grid.
Làm chủ sự linh hoạt với CSS Display: flex (Flexbox)
Flexbox là một cuộc cách mạng trong việc sắp xếp và căn chỉnh các phần tử theo một chiều (ngang hoặc dọc). Để kích hoạt Flexbox, bạn chỉ cần đặt thuộc tính display: flex cho phần tử cha (container). Ngay lập tức, tất cả các phần tử con trực tiếp (items) bên trong nó sẽ được sắp xếp linh hoạt theo một hàng ngang. Sức mạnh của Flexbox nằm ở các thuộc tính đi kèm, cho phép bạn kiểm soát việc căn chỉnh một cách dễ dàng.
- justify-content: Dùng để căn chỉnh các phần tử con theo trục chính (thường là trục ngang). Bạn có thể căn giữa (center), dàn đều (space-between), hoặc dồn về một phía.
- align-items: Dùng để căn chỉnh các phần tử con theo trục phụ (thường là trục dọc). Bạn có thể căn giữa theo chiều dọc (center), căn trên, căn dưới. Trước khi có Flexbox, việc căn giữa một phần tử theo cả chiều ngang và dọc là một tác vụ rất phức tạp. Với Flexbox, bạn chỉ cần 3 dòng CSS. Đây là một cách sử dụng CSS Display cực kỳ mạnh mẽ.
Xây dựng bố cục phức tạp với CSS Display: grid (Grid)
Nếu Flexbox là bậc thầy của layout một chiều, thì Grid là bậc thầy của layout hai chiều. display: grid cho phép bạn tạo ra một hệ thống lưới vô hình bao gồm cả hàng và cột. Sau đó, bạn có thể đặt các phần tử con vào chính xác các ô trong lưới đó. Điều này giúp việc xây dựng các bố cục phức tạp như giao diện của một trang báo điện tử, một trang thương mại điện tử trở nên đơn giản và logic hơn rất nhiều.
Để bắt đầu với Grid, bạn cũng đặt display: grid cho phần tử cha. Sau đó, bạn sử dụng các thuộc tính như grid-template-columns và grid-template-rows để định nghĩa số lượng và kích thước của các cột và hàng. Thuộc tính gap cho phép bạn tạo ra khoảng cách đều nhau giữa các ô trong lưới. Grid và Flexbox không loại trừ lẫn nhau. Một kỹ thuật phổ biến là sử dụng Grid để tạo ra bố cục tổng thể của trang và sử dụng Flexbox để căn chỉnh các phần tử bên trong mỗi ô của Grid. Việc tìm hiểu cả hai là rất cần thiết để làm chủ CSS Display.
Kết luận
Qua bài viết chi tiết này, hy vọng bạn đã có một câu trả lời toàn diện cho câu hỏi “CSS Display là gì?”. Nó không chỉ là một thuộc tính đơn lẻ, mà là một khái niệm nền tảng, một bộ công cụ quyền năng giúp bạn điều khiển hoàn toàn bố cục của một trang web. Từ những viên gạch cơ bản như block và inline, sự kết hợp linh hoạt của inline-block, cho đến sức mạnh sắp xếp của Flexbox và Grid, mỗi giá trị của display đều mở ra một khả năng mới. Việc dành thời gian để hiểu rõ và thực hành với từng giá trị này là bước đi quan trọng nhất trên con đường trở thành một nhà phát triển front-end chuyên nghiệp.