Display là gì? Display có nghĩa gì và cách dùng trong CSS là gì?

Posted on by adminChuyên mục:Kiến thức Internet

Display là gì? Display trong CSS là gì? Cùng chúng tôi tìm hiểu những thông tin này ngay trong bài viết dưới đây nhé.

Hiện nay, thuộc tính display trong CSS cho phép chúng ta xác định kiểu hiển thị của các thẻ HTML trên website. Vậy Display là gì? Display có thực sự quan trọng hay không? Hãy bắt đầu cùng chúng tôi tìm hiểu về Display và các giá trị Display CSS ngay trong bài viết này nhé. 

Display là gì?

Câu hỏi Display là gì luôn được nhiều người quan tâm.
Bạn tìm hiểu thêm Display mang những nghĩa sau :

  • Display có nghĩa để trưng bày: để sắp xếp một cái gì đó hoặc một bộ sưu tập những thứ sao cho nó có thể được nhìn thấy bởi công chúng. Để hiển thị một cái gì đó hoặc một bộ sưu tập những thứ có tổ chức cho mọi người xem, sắp xếp hàng hóa hoặc đồ vật để mọi người xem hoặc mua trong cửa hàng.

  • Display – thể hiện: để bày tỏ một cảm giác, để cho một cái gì đó được biết đến qua những gì bạn nói hoặc làm, hoặc cách bạn nhìn.

  • Display – hiển thị: để hiển thị các từ, hình ảnh, v.v. Trên màn hình.

  • Ngoài ra, danh từ display có nghĩa là sự trưng bày: một tập hợp các đối tượng hoặc hình ảnh được sắp xếp cho tất cả mọi người xem, hoặc một buổi biểu diễn hoặc trình diễn cho tất cả mọi người xem; Sắp xếp hoặc tập hợp một hoặc nhiều thứ được trình bày một cách có tổ chức; Một bộ sưu tập các sản phẩm hoặc đồ vật được sắp xếp để mọi người xem hoặc mua trong một cửa hàng.

Display trong CSS là gì?

Thuộc tính display trong CSS được sử dụng để chỉ định giá trị hiển thị mặc định cho tổng thể những thành phần. Nó khá quan trọng trong việc tạo những website. Bạn tìm hiểu thêm những ví dụ ngay dưới đây .
Display có giá trị rất lớn trong CSS.

Trong CSS, display là gì?

Ví dụ :
Phần tử div được hiển thị dưới dạng một khối ( block ) .
Trong khi thành phần span lại được hiển thị nội dòng ( inline ) .
Lưu ý : Thuộc tính display trong CSS là một trong những thuộc tính hữu dụng và can đảm và mạnh mẽ nhất trong CSS. Display hoàn toàn có thể rất có ích để tạo những website trông theo một cách khác, nhưng vẫn tuân theo những tiêu chuẩn web .

Giá trị Display CSS

Thuộc tính display gồm có những giá trị được đính kèm với nó, dưới đây là một số ít giá trị điển hình nổi bật :

Giá trị block của thuộc tính display là gì?

Giá trị block của thuộc tính display sẽ buộc một thành phần hoạt động giải trí giống như một thành phần cấp khối, giống như một thành phần div hoặc p .

  • Cú pháp : selector { display : block ; } span { display : block ; } Xem hiệu quả

Ví dụ : Như những bạn đã biết, thẻ span trong HTML là thẻ dòng mới khi chiều dài của nó vượt quá chiều rộng được cho phép, nếu không sẽ không nhập được dòng. Nhưng khi tất cả chúng ta sử dụng thuộc tính display : block cho thẻ span, nó sẽ ngắt dòng giống như thẻ div và thẻ p .
Lưu ý : Việc biến hóa năng lực hiển thị của một thành phần chỉ biến hóa hành vi hiển thị của một thành phần, không phải kiểu của thành phần. Ví dụ, một thành phần inline được đặt để hiển thị : block ; vẫn không được cho phép bạn đặt thành phần block bên trong nó .

Giá trị inline của thuộc tính display là gì?

Giá trị inline của thuộc tính display sẽ làm một thành phần hoạt động giải trí như thể nó là một thành phần inline .

  • Quy tắc : selector { display : inline ; }
  • Ví dụ : p { display : inline ; } Xem Kết quả

Thông thường, những thẻ p sẽ được định dạng thành những khối trong một website. Nhưng tất cả chúng ta trọn vẹn hoàn toàn có thể biến hóa nó thành một định dạng như thẻ span .

Giá trị inline-block của thuộc tính display là gì? 

Giá trị inline-block của thuộc tính display khiến một block tạo khối lưu chuyển với nội dung xung quanh, tức là trong cùng một dòng với nội dung liền kề .

  • Cú pháp : Selector { display : inline-block ; }
  • Ví dụ : p { display : inline-block ; background : orange ; } Xem hiệu quả

Giá trị none của thuộc tính display là gì?

Giá trị none của thuộc tính display chỉ đơn giản tạo ra một phần tử không có hộp nào cả. Các phần tử con cũng không tạo bất kỳ một hộp nào, ngay cả khi thuộc tính hiển thị của các phần tử con đó được đặt. Trang web sẽ hiển thị như thể phần tử không tồn tại trong cây tài liệu.

  • Cú pháp : selector { display : none ; }
  • Ví dụ : p { display : none ; } Xem Kết quả

Giá trị block, inline,...của display trong CSS

Các giá trị khác

Ngoài những thuộc tính trên, display còn tương hỗ tất cả chúng ta một số ít giá trị sau :

  • Display : table-caption : Chỉ định làm thẻ trong bảng .
  • Display : table-column-group : Được xác lập dưới dạng thẻ trong bảng .
  • Display : table-header-gut : Được xác lập như một thẻ trong bảng .
  • Display : table-footer-group : Được xác lập dưới dạng thẻ trong bảng .
  • Display : table-row-group : Được xác lập dưới dạng thẻ trong bảng .
  • Display : table-cell : Được xác lập như một thẻ trong bảng .
  • Display : table-column : Được xác lập như một thẻ trong bảng .
  • Display : table-row : Được xác lập dưới dạng thẻ trong bảng .

Kết luận

Như vậy là bài viết đã giải đáp được thắc mắc display là gì và cung cấp những kiến thức về thuộc tính display trong CSS. Nếu bạn có câu hỏi thắc mắc nào vui lòng để lại bình luận bên dưới.  

Bình chọn post

admin