Như đã nhắc đến trong bài học trước, thuộc tính display trong CSS kiểm soát loại hộp được tạo bởi một phần tử.

Bài này tất cả chúng ta sẽ tìm hiểu và khám phá kỹ hơn về nó .
Thuộc tính Display trong CSS

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

Thuộc tính display được sử dụng để xác định giá trị hiển thị mặc định cho tất cả các phần tử.

Ví dụ:

• Phần tử div được hiển thị dưới dạng khối (block)
• Trong khi phần tử span được hiển thị nội dòng (inline).

Có thay đổi giá trị của thuộc tính display được không?

Hoàn toàn hoàn toàn có thể .

CSS cho phép bạn ghi đè giá trị display mặc định của một phần tử. Đây là một tính chất mang hàm ý quan trọng của thuộc tính display.

Ví dụ :

• Thay đổi phần tử Inline-level để được hiển thị dưới dạng phần tử Block-level
• Hoặc thay đổi phần tử Block-level để được hiển thị dưới dạng phần tử Inline-Level.

Lưu ý rằng: Thuộc tính display trong CSS là một trong những thuộc tính hữu ích và mạnh mẽ nhất trong CSS. Nó có thể rất hữu ích để tạo các trang web trông theo một cách khác, nhưng vẫn tuân theo các tiêu chuẩn web.

Tiếp theo đây, bạn sẽ biết cách để đổi khác, miêu tả giá trị display CSS thường được sử dụng nhất .

1. display: block;

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

Quy tắc CSS trong ví dụ sau đây sẽ biến hóa thành phần span và thành phần a từ một thành phần Inline thành phần tử hiển thị như một thành phần Block :
HTML :

    niithanoi.edu.vn
    

    Phần tử span hành xử giống như là Block

CSS :

a {
    display: block;
    background: grey;
}
span {
    display: block;
    background: orange;
}

Kết quả nhận được như hình :
Ví dụ thay đổi phần tử Inline hiển thị như phần tử BlockLưu ý : Việc biến hóa kiểu hiển thị của một thành phần chỉ đổi khác hành vi hiển thị của một thành phần, KHÔNG phải là biến hóa loại thành phần đó. Ví dụ, một thành phần Inline được đặt là display : block ; vẫn không được phép bạn đặt thành phần Block bên trong nó .

2. display: inline;

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

Quy tắc CSS trong ví dụ sau sẽ đổi khác hiển thị của những thành phần p và li thành dạng thành phần cấp Inline :
HTML :

Phần tử p và li hiển thị như một thành phần inline .

    
Học Full Stack
    
Java
    
PHP
    
Python

CSS:

p {
    display: inline;
    background: orange;
    padding: 10px;
}
ul li {
    display: inline;
    margin: 10px;
}

Ta có tác dụng như sau :
Ví dụ thay đổi phần tử Block hiển thị như phần tử Inline

3. display: inline-block;

Giá trị inline-block của thuộc tính display khiến một phần tử tạo ra một block sẽ được 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ác quy tắc CSS sau đây hiển thị những thành phần div và span dưới dạng inline-block :
HTML :

    Phần tử span và phần tử div (cha span) tạo thành hộp phần tử inline-block.

CSS :

div {
    display: inline-block;
    background: orange;
    padding: 10px;
}
span {
    display: inline-block;        
    background: grey;
    padding: 10px;
}

Kết quả ta được :
Ví dụ thay đổi phần tử hiện thị như inline-blockCòn nếu không định nghĩa display : inline-block ; cho cả span và div thì nó sẽ hiển thị như thế này :
Hành vi mặc định của thuộc tính display

4. display: none;

Giá trị none của thuộc tính display chỉ đơn giản là tạo ra một phần tử không có hộp nào cả.

Các thành phần con cũng không tạo ra bất kể hộp nào, ngay cả khi thuộc tính display của những thành phần con đó có đặt là gì đi chăng nữa. Trang web sẽ hiển thị như thể thành phần không sống sót trong Document tree .
Ví dụ :
HTML :

Hello World!
display : none ; chỉ đơn thuần là không tạo ra hộp thành phần nào. Nó không hiển thị trực quan nữa .

Khi bạn không muốn hiển thị h1 trực quan cho người dùng nữa, bạn hoàn toàn có thể ẩn nó đi bằng cách viết CSS như sau :

h1 {
    display: none;
}

Thử chạy chương trình và xem tác dụng trên trình duyệt bạn nhé .

Ok, như vậy, cho đến bây giờ bạn đã hiểu về cách thay đổi giá trị thuộc tính display trong CSS để thay đổi cách chúng hiển thị, cách hành xử của các phần tử.

Thuộc tính display này sẽ giúp bạn rất nhiều trong lập trình web, lập trình front end đấy.

Hi vọng bạn thích nội dung này .

Học tiếp: Thuộc tính visibility trong CSS

Đọc thêm: Block và Inline

Source: https://final-blade.com
Category: Kiến thức Internet