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. Thuộc tính này bao gồm 17 giá trị kèm theo nó....

1, Display block.

-Thuộc tính display:block có tác dụng xác định thành phần hiển thị theo các hàng độc lập.

Cú Pháp:

selector{
    display: block;
}

VD: Như các bạn đã biết thì thẻ span trong HTML là một thẻ xác định xuống dòng khi độ dài của nó vượt quá chiều rộng được cho phép, còn không nó sẽ không xuống dòng. Nhưng khi chúng ta sử dụng thuộc tính display:block cho thẻ span thì nó sẽ xuống dòng như thẻ div và thẻ p.

span{
    display: block;
}

Xem Kết Quả

2, Display inline.

-Thuộc tính display: inline có tác dụng xác định thành phần được hiển thị theo chiều ngang (không ngắt dòng khi chiều rộng vẫn nhỏ hơn chiều rộng của màn hình). Đây là dạng mặc định của các thẻ a,span,...

Cú Pháp:

selector{
    display: inline;
}

VD: Thông thường thì các thẻ p sẽ được định dạng theo dạng khối trong một trang web. Nhưng chúng ta hoàn toàn có thể thay đổi nó thành định dạng như thẻ span.

p{
    display: inline;
}

Xem Kết Quả

3, Display inline-block.

-Thuộc tính display: inline-block có tác dụng xác định các thành phần sẽ được hiển thị theo khối nhưng là các khối inline.

Cú pháp:

selector{
    display: inline-block;
}

VD:

p{
    display: inline-block;
    background: orange;
}

Xem Kết Quả

4, Display inline-table.

-Thuộc tính display: inline-table các tác dụng xác định thành phần được hiển thị theo dạng khối nột tuyến. Không xuống dòng trước và sau các thành phần cạnh nó.

Cú Pháp:

selector{
    display: inline-table;
}

VD:

p{
    display: inline-table;
    background: orange;
}

Xem Kết Quả

5, Display list-item.

-Thuộc tính display: list-item có tác dụng xác định thành phần sẽ được hiển thị như một thẻ li.

Cú Pháp:

selector{
    display: list-item;
}

VD:

p{
    display: list-item;
}

Xem Kết Quả

6, Display none.

-Thuộc tính display: none có tác dụng ẩn thành phần được chọn.

Cú Pháp:

selector{
    display: none;
}

VD:

p{
    display: none;
}

Xem Kết Quả

7, Display table.

Thuộc tính display: table có tác dụng xác định thành phần được chọn như một thẻ <table>.

Cú Pháp:

selector{
    display: table;
}

VD:

p{
    display: table;
}

Xem Kết Quả

8, Display inherit.

-Thuộc tính này có tác dụng xác định thành phần được chọn kế thừa từ thuộc tính của thành phần cha.

Cú Pháp:

selector{
    display: inherit;
}

9, Các giá trị khác của display.

-Ngoài những thuộc tính ở trên thì display còn hỗ trợ chúng ta một số các giá trị như sau:

Thuộc tính	Mô tả
display: table-caption	-Xác định như một thẻ <caption> trong table.
display: table-column-group	-Xác định như thẻ <colgroup> trong table.
display: table-header-group	-Xác định như thẻ <thead> trong table.
display: table-footer-group	-Xác định như thẻ <tfoot> trong table.
display: table-row-group	-Xác định như thẻ <tbody> trong table.
display: table-cell	-Xác định như thẻ <td> trong table.
display: table-column	-Xác định như thẻ <col> trong table.
display: table-row	-Xác định như thẻ <tr> trong table.

10, Lời kết.

-Như vậy mình đã giới thiệu xong với mọi người về thuộc tính display trong CSS. Nhưng ở phần trên các bạn chỉ cần chú ý mục số 1,2,3,7 vì các mục còn lại rất ít khi được sử dụng trong thực tế.