Giới thiệu về thuộc tính Display trong CSS

 

Có nhiều thứ liên quan đến việc tạo kiểu website chứ không chỉ là màu sắc và phông chữ. Ngay cả những trang web đơn giản nhất cũng cần các quy tắc bố cục để trông đẹp mắt, điều này đòi hỏi kiến ​​thức về các thuộc tính CSS như vị trí, float và chủ đề của bài đăng này, thuộc tính hiển thị display

Nếu bạn đang bắt đầu xây dựng một trang web hoặc học cách lập trình bằng HTML, thì những thuộc tính này là cơ bản. Mặc dù lúc đầu bạn có thể dễ dàng ứng biến mã CSS của mình khi tiếp tục, nhưng cuối cùng bạn sẽ mất rất nhiều thời gian để khắc phục sự cố CSS đang diễn ra.

Tôi đã viết rất nhiều CSS mà không biết chính xác mình đang làm gì và tôi đã học được cách tốt hơn là hiểu các khai báo CSS làm gì thay vì chỉ xoay xở nó.

Ngoài ra, ngay cả khi bạn không phải là một nhà phát triển web đầy tham vọng, việc có kiến ​​thức cơ bản về các thuộc tính CSS như Display sẽ cho phép bạn thực hiện các chỉnh sửa nhỏ cho giao diện trang web của mình nếu cần - không cần liên hệ với nhà phát triển để làm điều đó cho bạn.

Để giúp bạn, hướng dẫn này sẽ giải thích những gì thuộc tính hiển thị CSS làm và những gì nó có thể thêm vào bộ công cụ CSS của bạn. Tôi sẽ trình bày những cách sử dụng phổ biến nhất của sản phẩm cùng với các ví dụ trực quan.

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

Mọi phần tử HTML được đại diện bởi một hộp chứa nội dung và xác định khoảng cách xung quanh nội dung. Thuộc tính hiển thị 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ó).

Trong CSS có hai “cấp độ” mà hộp này có thể áp dụng: block và inline. Các phần tử cấp khối 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 trừ khi chiều rộng khác được chỉ định. <div> và <p> là các ví dụ về các phần tử cấp khối block.

Các phần tử cấp inline không phá vỡ luồng nội dung - nhiều phần tử inline 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.

Thuộc tính hiển thị nhắm mục tiêu các cấp độ này và cho phép chúng tôi thay đổi chúng theo nhu cầu tạo kiểu của mình. Khai báo của nó được viết như vậy:

display: value;

... trong đó giá trị chỉ định cách phần tử xuất hiện - nói cách khác là cấp của nó. Bây giờ chúng ta hãy xem xét các giá trị phổ biến nhất của thuộc tính hiển thị.

Giá trị hiển thị CSS

Theo mặc định, các trình duyệt hiển thị các phần tử nhất định ở các cấp độ khác nhau. Ví dụ: các phần tử <div> được hiển thị dưới dạng khối theo mặc định, trong khi các phần tử <span> xuất hiện trong dòng theo mặc định, như được minh họa bên dưới:

Ở đây, ba phần tử <div> đầu tiên là các blocks - mỗi khối kéo dài theo chiều rộng của trang và bắt đầu trên một dòng mới. Ba phần tử <span> sau đây đều tồn tại trên cùng một dòng và chiều rộng và chiều cao của chúng được xác định bởi văn bản bên trong chúng (cũng như một số phần đệm bổ sung mà tôi đã thêm).

Thuộc tính hiển thị có thể ghi đè các kiểu hiển thị mặc định này. Vì vậy, hãy lấy ví dụ này và xem những gì thay đổi khi chúng tôi áp dụng các khai báo hiển thị khác nhau.

CSS Display: inline

Giá trị hiển thị inline biến bất kỳ phần tử nào thành phần tử inline. Các phần tử này sẽ xuất hiện trên cùng một dòng mà không có dấu ngắt, giống như các phần tử <span> hoạt động.

Lưu ý rằng tôi đã loại bỏ khai báo padding để minh họa rõ hơn tác dụng của nội tuyến. Ngoài ra, 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 chúng chứa. Bạn không thể đặt chiều rộng và chiều cao của chúng bằng CSS:

Nếu chúng tôi thêm văn bản vào giữa các phần tử <div> của mình, chúng tôi sẽ thấy rõ ràng chúng phù hợp như thế nào trong một dòng:

CSS Display: block

Giá trị hiển thị block làm cho một phần tử trở thành một phần tử khối block. Các phần tử Block bắt đầu một dòng mới và kéo dài toàn bộ chiều rộng của khung nhìn theo mặc định, giống như cách các phần tử <div> hoạt động. Ngoài ra còn có các ngắt dòng trước và sau các phần tử này.

CSS Display: inline-block

Giá trị inline-block là sự kết hợp của khối inline và block và. Các phần tử được gán hiển thị: khối inline 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ử 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.

CSS Display: list-item

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

Lưu ý rằng không có khai báo margin-left: 30px; các gạch đầu dòng của chúng tôi sẽ rơi ra ngoài khung nhìn. Tôi tăng lề trái để hiển thị chúng.

Thêm khai báo list-style-position: inside; để đặt các dấu đầu dòng bên trong phần tử mục danh sách:

CSS Display: none

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 khiến 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>:

Để ẩn một phần tử mà không ảnh hưởng đến bố cục trang, hãy sử dụng thuộc tính hiển thị CSS thay thế:

CSS Display: 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.

Hiển thị 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. 

Thay đổi bố cục của bạn với thuộc tính Display trong CSS

Thuộc tính hiển thị cho phép bạn xác định sự xuất hiện của các phần tử trang bên ngoà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 đều sử dụng nó ở một mức độ nào đó. Vì vậy, ngay cả kiến thức cơ bản về hiển thị cũng có thể giúp chúng ta nắm được những gì diễn ra đằng sau trang web.