7 thuộc tính display CSS bạn cần biết

Display CSS là thuộc tính cơ bản mà bạn cần phải biết và học trong quá trình tiếp xúc với ngôn ngữ lập trình này. Vậy khái niệm, các thuộc tính cụ thể của nó bao gồm những gì và cách sử dụng nó như thế nào, hãy cùng Tenten tìm hiểu qua bài viết dưới đây.

💥💥Kiếm tiền ngay trên website của bạn. Tham gia ngay 💥💥

Display CSS là gì?

Display CSS là thuộc tính quan trọng nhất của CSS được sử dụng để kiểm soát bố cục của phần tử. Nó chỉ định cách phần tử được hiển thị.

Display CSS cho phép bạn xác định sự xuất hiện của các phần tử trang một cách khác đi so với cài đặt mặc định của chúng. Đây là một khả năng mạnh mẽ và hầu hết các trang web hiện đại – bao gồm cả những trang web được xây dựng bằng Bootstrap CSS- đều tận dụng nó ở một mức độ nào đó.
Mọi phần tử HTML được đại diện bởi một box chứa nội dung và xác định khoảng cách xung quanh nội dung. Thuộc tính display CSS chỉ định cách hộp này xuất hiện trên trang web so với các phần tử khác, cũng như hành vi của các phần tử con của nó (tức là các phần tử bên trong nó).
Mọi phần tử đều có giá trị hiển thị mặc định theo bản chất của nó. Mọi phần tử trên trang web là một hình hộp chữ nhật và thuộc tính CSS xác định hành vi của hình hộp chữ nhật đó.
Thuộc tính CSS hiển thị đặt xem một phần tử được coi là khối hay phần tử nội dòng và bố cục được sử dụng cho các phần tử con của nó, chẳng hạn như bố cục luồng, lưới hoặc linh hoạt.
Về mặt hình thức, thuộc tính display thiết lập các kiểu hiển thị bên trong và bên ngoài của một phần tử. Loại bên ngoài thiết lập sự tham gia của một phần tử vào bố cục luồng; loại bên trong thiết lập bố cục của trẻ em. Một số giá trị của màn hình được xác định đầy đủ trong các thông số kỹ thuật riêng của chúng; ví dụ, chi tiết về những gì sẽ xảy ra khi khai báo display: flex được xác định trong đặc tả Mô hình hộp linh hoạt CSS.
Trong CSS có hai “cấp độ” mà box này có thể áp dụng: block và inline:
Các phần tử cấp block tồn tại trên dòng riêng của chúng và kéo dài toàn bộ chiều rộng của trang (hoặc chiều rộng được chỉ định của block đó). <div> và <p> là các ví dụ về các phần tử cấp block.
Các phần tử cấp inline thì ngược lại, chúng có thể tồn tại trên cùng một dòng. <span>, <b> và <a> là các phần tử cấp inline.

Các thuộc tính Display CSS cụ thể:

1, Display CSS block:

Thành phần hiển thị như một khối, khi sử dụng giá trị block thành phần sẽ đứng một hàng độc lập so với thành phần trước và sau nó.

Đây là một phần tử có thuộc tính hiển thị được đặt để chặn bắt đầu trên một dòng mới và chiếm chiều rộng màn hình có sẵn.
Bạn có thể chỉ định các thuộc tính chiều rộng và chiều cao cho các phần tử như vậy. Ví dụ về các phần tử ở cấp khối theo mặc định là <div>, <section>, <p> và nhiều phần tử khác.
Bạn có thể đặt khoảng từ mã HTML trước để chặn hiển thị và nó sẽ hoạt động giống như một phần tử cấp khối.

2. Display CSS inline:

Thành phần sẽ hiển thị như một nội tuyến (inline, không ngắt dòng), đây là dạng mặc định.
Là phần tử có thuộc tính hiển thị được đặt thành nội tuyến, display inline sẽ không bắt đầu trên một dòng mới và nó sẽ chiếm chiều rộng màn hình còn lại/khả dụng. Nó chỉ chiếm không gian mà một phần tử bình thường sẽ chiếm.

Do đó, bạn không thể đặt chiều rộng và chiều cao của một phần tử có hiển thị nội dòng, vì nó không chiếm toàn bộ chiều rộng màn hình.
Một số phần tử là nội tuyến theo mặc định, như <span>, <a>, <i> và <img>.

3. Display CSS inline-block:

Ngoài block and inline display, còn có display inline-block.
Một phần tử bạn chỉ định hiển thị display inline-block được inline theo bản trình bày. Nhưng nó có thêm lợi thế là bạn có thể áp dụng chiều rộng và chiều cao cho nó, điều mà bạn không thể thực hiện khi phần tử được gán một điểm không phù hợp với inline.
Vì vậy, bạn có thể xem màn hình display inline-block như một phần tử inline và block trong một gói.
Giá trị display inline-block là sự kết hợp của display inline và block.
Hiển thị các phần tử được gán: display inline-block xuất hiện trên cùng một dòng với các phần tử inline khác, một đặc điểm của các phần tử inline. Tuy nhiên, các phần tử display inline-block cũng giống như các phần tử block ở chỗ bạn có thể thay đổi chiều rộng và chiều cao của chúng bằng CSS.

4. Display CSS list-item

Các phần tử được chỉ định hiển thị: 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 dòng của chính nó và một dấu đầu dòng được thêm vào bên trái:

5. Display CSS none

Khi bạn đặt thuộc tính hiển thị của một phần tử thành không, phần tử đó hoàn toàn bị xóa khỏi trang và nó không ảnh hưởng đến bố cục.
Điều này cũng có nghĩa là các thiết bị như trình đọc màn hình, giúp người mù có thể truy cập trang web, sẽ không có quyền truy cập vào phần tử.
Display: none xóa phần tử được nhắm mục tiêu (và tất cả các phần tử con của nó) khỏi trang. Điều này làm cho các phần tử đi kèm hoạt động như thể phần tử này không tồn tại. Trong ví dụ này, display: none được áp dụng cho <div> thứ hai và <span>

6. Display CSS grid

Giá trị hiển thị lưới làm cho phần tử được chỉ định trở thành vùng chứa lưới và các phần tử con của nó hoạt động như các mục lưới. Tìm hiểu cách tạo lưới CSS trong hướng dẫn chuyên sâu của chúng tôi.

7. Display CSS flex

Cuối cùng, giá trị hiển thị linh hoạt đặt một phần tử làm vùng chứa linh hoạt, một cách khác để tạo trang các phần tử động và đáp ứng. Bạn tìm hiểu thêm về mô-đun CSS này trong bài đăng trên blog Đây là Sự khác biệt giữa Flexbox, CSS Grid & Bootstrap.
Display CSS dễ gây nhầm lẫn cho bạn trong quá trình sử dụng nếu như bạn chưa thực sự hiểu và biết cách vận dụng nó. Nắm bắt tốt display sẽ giúp bố cục trang của bạn trông tuyệt vời. Nó cũng cho phép bạn kiểm soát nhiều hơn cách bạn trình bày các phần tử của mình khi làm việc với CSS.

Các tìm kiếm liên quan đến chủ đề “Display CSS”

Display: flex CSS	Display: none CSS
display inline-block	Display: block CSS là gì
Display: none	display: none là gì
Display: block CSS	Display: table CSS

Bài viết liên quan

Thuộc tính Outline CSS là gì? 2 Ví dụ cơ bản cần biết 
Hide scrollbar CSS là gì? 3 Lưu ý cần nhớ khi ẩn thanh cuộn
Custom scrollbar css là gì? Hướng dẫn 2 cách sử dụng cơ bản 
Box sizing trong css là gì? Hướng dẫn sử dụng 2 value đơn giản
Thuộc tính keyframe css là gì? 3 yếu tố cấu thành không thể thiếu