Display css là gì

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ó công dụng xác lập thành phầnhiển thị theo những 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ó công dụng xác lập 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 hiển thị ). Đây là dạng mặc định của những 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ó công dụng xác lập những thành phần sẽ được hiển thị theo khốinhưng là những 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ính năng xác lập 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 những 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ính năng xác lập 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ó công dụng xác lập thành phần được chọn thừa kế 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ínhMô 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: Chuyên mục : Hỏi Đáp

Source: https://mindovermetal.org
Category: Wiki là gì