Thuộc tính hiển thị (display) trong CSS

Thuộc tính display trong CSS xác định cách một phần tử được hiển thị trên trang web. Hiểu và sử dụng đúng thuộc tính này sẽ giúp bạn kiểm soát cách bố cục của trang web hoạt động. Trong bài học này, bạn sẽ tìm hiểu các giá trị phổ biến như block, inline, inline-block, và none.

1. Giới thiệu về thuộc tính display

• Định nghĩa: Thuộc tính display quyết định cách trình bày của một phần tử trên trang.
• Cú pháp:

  selector {
    display: value;
  }
  

2. Các giá trị phổ biến của display

a. block

• Phần tử được hiển thị như một khối.
• Chiếm toàn bộ chiều ngang của container.
• Ví dụ: <div>, <p>, <h1> mặc định là display: block.
• Ứng dụng: Tạo các khu vực nội dung riêng biệt.

b. inline

• Phần tử được hiển thị trên cùng một dòng với các phần tử khác.
• Chỉ chiếm diện tích nội dung thực tế.
• Ví dụ: <span>, <a> mặc định là display: inline.
• Ứng dụng: Sử dụng cho các phần nội dung nhỏ trong đoạn văn.

c. inline-block

• Kết hợp đặc tính của cả inline và block:
  • Hiển thị trên cùng một dòng.
  • Có thể đặt kích thước bằng width và height.
• Ứng dụng: Tạo các phần tử như nút hoặc hình ảnh nằm cạnh nhau nhưng vẫn có thể định kích thước.

d. none

• Phần tử không hiển thị trên trang và không chiếm không gian.
• Lưu ý: Không giống visibility: hidden, display: none sẽ loại bỏ phần tử khỏi flow tự nhiên.
• Ứng dụng: Ẩn các phần tử tạm thời.

3. So sánh các giá trị

4. Thực hành

Bài tập 1: So sánh các giá trị của display

Tạo một tệp HTML với các phần tử có giá trị block, inline, inline-block, và none. Quan sát cách chúng hiển thị trên trang.

<div style="display: block; background-color: lightblue;">Block</div>
<span style="display: inline; background-color: lightgreen;">Inline</span>
<div style="display: inline-block; background-color: lightcoral;">Inline-block</div>
<div style="display: none; background-color: lightgray;">None</div>

Bài tập 2: Ẩn và hiện phần tử

Sử dụng JavaScript để thay đổi thuộc tính display của một phần tử từ none sang block khi nhấn vào nút.

<button onclick="showElement()">Hiện</button>
<div id="hiddenElement" style="display: none;">Phần tử đã bị ẩn</div>
<script>
  function showElement() {
    document.getElementById('hiddenElement').style.display = 'block';
  }
</script>

Kết quả mong đợi

• Hiểu được cách các giá trị display ảnh hưởng đến bố cục và hiển thị phần tử.
• Có thể ứng dụng display để tạo các thiết kế giao diện linh hoạt và trực quan.