[09/2023] Giới Thiệu Thuộc Tính Display Trong CSS

Rate this post

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

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: block và inline:

Các phần tử cấp blocktồ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ủablockđó).<div>và<p>là các ví dụ về các phần tử cấpblock.Các phần tử cấp inlinethì 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ấpinline.

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.

Read More:   [09/2023] LUMOS Tiếng Anh Là Gì

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:

Read More:   [09/2023] 【Bật Mí】Muôn Vạn Cách Chế Biến Cá Basa Phi Lê ăn Mãi Không Ngán

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 inline và block. 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:

Read More:   [10/2023] 3 Kiểu Trị Nám để Tránh Làm Tổn Thương Da Khiến Da Ngày Càng Xuống Cấp

<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> và <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

All rights reserved

Với những thông tin mà Rcmitt.com chia sẻ, chúng tôi hy vọng với thông qua bài viết về “[09/2023] Giới Thiệu Thuộc Tính Display Trong CSS❤️️”.có thể giúp bạn có thêm nhiều thông tin cũng như hiểu rõ hơn về chủ đề “[09/2023] Giới Thiệu Thuộc Tính Display Trong CSS” [ ❤️️❤️️ ]”.

Related Posts

[09/2023] Breakdown Là Gì?

Breakdown là gì? Ở mỗi lĩnh vực, breakdown sẽ mang một ý nghĩa khác, rất đa dạng và phong phú trong tầng nghĩa, vậy nên breakdown được…

[09/2023] Ý Nghĩa Của Cost Breakdown Là Gì ? Cost Breakdown Cost Breakdown

COST BREAKDOWN LÀ GÌ Định nghĩa Price breakdown là gì? Price breakdown là Phá giá. Đây là nghĩa tiếng Việt của thuật ngữ Price breakdown – một…

[09/2023] What Is Cost Breakdown Là Gì, Budget Breakdown Có Nghĩa Là Gì

JavaScript is disabled. Bạn đang xem: Cost breakdown là gì For a better experience, please enable JavaScript in your browser before proceeding. Đang xem: Cost breakdown là…

[09/2023] Breakdown Là Gì, Nghĩa Của Từ Breakdown | Từ điển Anh

Breakdown là gì? Ở mỗi lĩnh vực, breakdown sẽ mang một ý nghĩa khác, rất đa dạng và phong phú trong tầng nghĩa, vậy nên breakdown được…

Công Cụ Hỗ Trợ Tối ưu Quá Trình Ra Quyết định

COST-BENEFIT ANALYSIS (CBA) LÀ GÌ? Phân tích lợi ích chi phí (còn được gọi là phân tích chi phí lợi ích) là một quá trình mà các…

[09/2023] Cost Breakdown Nghĩa Là Gì

-To invite bids / tenders for sth: Mời tham gia đấu thầu dự án gì– To put sth out to tender/ contract : Đưa (dự án )…