Giới thiệu thuộc tính display trong CSS

Bài viết Giới thiệu thuộc tính display trong CSS thuộc chủ đề về Wiki How thời gian này đang được rất nhiều bạn quan tâm đúng không nào !! Hôm nay, Hãy cùng Hàng Nhật Cao Cấp tìm hiểu Giới thiệu thuộc tính display trong CSS trong bài viết hôm nay nhé ! Các bạn đang xem bài : “Giới thiệu thuộc tính display trong CSS”

Thông tin chi tiết về Giới thiệu thuộc tính display trong CSS


Xem nhanh

Nếu bạn đang bắt đầu học CSS, thì display là thuộc tính cơ bản cần phải nắm được vì bạn có thể sẽ mất rất nhiều thời gian để sửa lỗi CSS nếu không hiểu rõ cách hoạt động của thuộc này. Tin tôi đi – 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 rằng tốt hơn hết là hãy hiểu các quy tắc hoạt động của CSS thay vì chỉ sửa đổi nó. Trong bài viết này, tôi sẽ giải thích cách hoạt động của thuộc tính display trong CSS, trình bày những cách sử dụng phổ biến nhất của thuộc tính này cùng với các ví dụ trực quan.

Thuộc tính display là gì?

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 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 – 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 trong 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à box này có thể áp dụng: blockinline:

  • 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><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><a> là các phần tử cấp inline.

Bây giờ chúng ta sẽ cùng xem xét các giá trị phổ biến nhất của thuộc tính display.

Các giá trị của thuộc tính display trong 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 block trong khi các phần tử <span> xuất hiện hiển thị dưới dạng inline, như được minh họa bên dưới:

<body> <div id="div-0"> This is my first div.</div> <div id="div-1"> This is my second div.</div> <div id="div-2"> This is my third div.</div> <br> <span id="span-0">This is my first span.</span> <span id="span-1">This is my second span.</span> <span id="span-2">This is my third span.</span> </body> <style type="text/css"> body font-family: "Avenir Heavy"; div, span background-color: #2e3f50; padding: 10px; border-radius: 5px; div color: #fd8f59; span color: #1ebda5; </style> 

Ở đây, ba phần tử <div> đầu tiên là các block – mỗi block kéo dài theo chiều rộng của trang và bắt đầu trên một dòng mới. Ngược lại, ba phần tử <span> 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 (và một số padding mà tôi đã thêm).

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

CSS display: inline

Giá trị inline của thuộc tính display sẽ 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ách hoạt động của các phần tử <span>.

<body> <div id="div-0"> This is my first div.</div> <div id="div-1"> This is my second div.</div> <div id="div-2"> This is my third div.</div> <br> <span id="span-0">This is my first span.</span> <span id="span-1">This is my second span.</span> <span id="span-2">This is my third span.</span> </body> <style type="text/css"> body font-family: "Avenir Heavy"; div, span background-color: #2e3f50; border-radius: 5px; display: inline; div color: #fd8f59; span color: #1ebda5; </style> 

Lưu ý: tôi đã bỏ qua các padding để minh họa rõ hơn tác dụng của inline. Ngoài ra, chiều rộng và chiều cao của các phần tử inline đượ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 cách chúng phù hợp trong một dòng:

CSS Display: block

Giá trị block của thuộc tính display làm cho một phần tử trở thành một phần tử 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 màn hình, giống như cách các phần tử <div> hoạt động. Ngoài ra còn có các dấu ngắt dòng trước và sau các phần tử này.

<body> <div id="div-0"> This is my first div.</div> <div id="div-1"> This is my second div.</div> <div id="div-2"> This is my third div.</div> <br> <span id="span-0">This is my first span.</span> <span id="span-1">This is my second span.</span> <span id="span-2">This is my third span.</span> </body> <style> body font-family: "Avenir Heavy"; div, span background-color: #2e3f50; padding: 10px; border-radius: 5px; display: block; div color: #fd8f59; span color: #1ebda5; </style> 

CSS Display: inline-block

Giá trị inline-block của thuộc tính display là sự kết hợp của inlineblock. Kiểu display: inline-block sẽ được sắp xếp giống với kiểu display: inline, nghĩa là các items sẽ được xếp cùng nhau trên một dòng. Tuy nhiên, các phần tử này 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.

 <body> <div id="div-0"> This is my first div.</div> <div id="div-1"> This is my second div.</div> <div id="div-2"> This is my third div.</div> <br> <span id="span-0">This is my first span.</span> <span id="span-1">This is my second span.</span> <span id="span-2">This is my third span.</span> </body> <style> body font-family: "Avenir Heavy"; div, span background-color: #2e3f50; padding: 10px; border-radius: 5px; display: inline-block; width: 200px; height: 50px; div color: #fd8f59; span color: #1ebda5; </style> 

CSS Display: list-item

Phần tử display: 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 block, văn bản bên trong trở thành phần tử inline và một dấu đầu dòng được thêm vào bên trái:

<body> <div id="div-0"> This is my first div.</div> <div id="div-1"> This is my second div.</div> <div id="div-2"> This is my third div.</div> <br> <span id="span-0">This is my first span.</span> <span id="span-1">This is my second span.</span> <span id="span-2">This is my third span.</span> </body> <style> body font-family: "Avenir Heavy"; div, span background-color: #2e3f50; padding: 10px; border-radius: 5px; display: list-item; margin-left: 30px; div color: #fd8f59; span color: #1ebda5; </style> 

Thêm list-style-position: inside; để đặt các dấu đầu dòng bên trong phần tử list-item:

CSS Display: none

display: none xóa phần tử và tất cả các con của nó khỏi trang. Trong ví dụ này, display: none được áp dụng cho phần tử <div><span> thứ hai:

 <body> <div id="div-0"> This is my first div.</div> <div id="div-1"> This is my second div.</div> <div id="div-2"> This is my third div.</div> <br> <span id="span-0">This is my first span.</span> <span id="span-1">This is my second span.</span> <span id="span-2">This is my third span.</span> </body> <style> body font-family: "Avenir Heavy"; div, span background-color: #2e3f50; padding: 10px; border-radius: 5px; div color: #fd8f59; span color: #1ebda5; #div-1, #span-1 display: none; </style> 

Để ẩ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 visibility CSS:

/* display: none; */ visibility: hidden; 

CSS Display: grid

Giá trị display: grid làm cho phần tử được chỉ định trở thành vùng chứa grid và các phần tử con của nó hoạt động như các mục grid. Xem thêm về grid trong CSS tại đây.

CSS Display: flex

Cuối cùng, giá trị display: flex đặt một phần tử làm vùng chứa flex, một cách khác để tạo trang các phần tử động và responsive. Bạn tìm hiểu thêm về mô-đun CSS này trong bài đăng trên blog này.

Nguồn tham khảo: tại đây



Các câu hỏi về display block là gì


Nếu có bắt kỳ câu hỏi thắc mắt nào vê display block là gì hãy cho chúng mình biết nhé, mõi thắt mắt hay góp ý của các bạn sẽ giúp mình cải thiện hơn trong các bài sau nhé <3 Bài viết display block là gì ! được mình và team xem xét cũng như tổng hợp từ nhiều nguồn. Nếu thấy bài viết display block là gì Cực hay ! Hay thì hãy ủng hộ team Like hoặc share. Nếu thấy bài viết display block là gì rât hay ! chưa hay, hoặc cần bổ sung. Bạn góp ý giúp mình nhé!!

Các Hình Ảnh Về display block là gì


Các hình ảnh về display block là gì đang được chúng mình Cập nhập. Nếu các bạn mong muốn đóng góp, Hãy gửi mail về hộp thư [email protected] Nếu có bất kỳ đóng góp hay liên hệ. Hãy Mail ngay cho tụi mình nhé

Tra cứu thêm kiến thức về display block là gì tại WikiPedia

Bạn nên xem thêm thông tin về display block là gì từ trang Wikipedia tiếng Việt.◄ Tham Gia Cộng Đồng Tại

💝 Nguồn Tin tại: https://hangnhatcaocap.com.vn/

💝 Xem Thêm Chủ Đề Liên Quan tại : https://hangnhatcaocap.com.vn/wiki-hoi-dap/

Related Posts

About The Author