Tổng hợp Display Css Là Gì – Ví Dụ Về Thuộc Tính Display

Đánh giá Link Display Css Là Gì – Ví Dụ Về Thuộc Tính Display là ý tưởng trong bài viết bây giờ của Tên game hay Hakitoithuong.vn. Theo dõi nội dung để biết chi tiết nhé.

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ó….

Bạn đang xem: Display css là gì

1, Display block.

-Thuộc tính display:block có tác dụng xác định thành phầnhiể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ốinhư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-tablecá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.

Xem thêm: Tư Liệu Sản Xuất Là Gì, Lực Lượng Sản Xuất

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ẻ

.

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ẻ trong table.
display: table-column-group -Xác định như thẻ trong table.
display: table-header-group -Xác định như thẻ trong table.
display: table-footer-group -Xác định như thẻ trong table.
display: table-row-group -Xác định như thẻ trong table.
display: table-cell -Xác định như thẻ trong table.
display: table-column -Xác định như thẻ trong table.
display: table-row -Xác định như thẻ trong table.

10, Lời kết.

Xem thêm: Dizz Là Gì – Dizz Là Thế Này Nè

-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ế.

Chuyên mục: Hỏi Đáp