Thuộc tính display trong CSS

Thuộc tính hiển thị css cho phép chúng tôi xác định kiểu hiển thị của các thẻ html trên trang web. thuộc tính này bao gồm 17 giá trị đính kèm ….

1, khối hiển thị.

-the display: block thuộc tính xác định phần tử sẽ được hiển thị trong các hàng riêng biệt.

cú pháp :

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

xem kết quả

2, hiển thị trực tuyến.

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

.

cú pháp :

ví dụ : Thông thường, thẻ p sẽ được định dạng dưới dạng khối trên một trang web. nhưng chúng tôi hoàn toàn có thể thay đổi nó để được định dạng dưới dạng thẻ span.

xem kết quả

3, hiển thị khối nội tuyến.

-the property display: inline-block xác định các phần tử sẽ được hiển thị trong các khối nhưng dưới dạng các khối nội dòng.

cú pháp :

ví dụ :

xem kết quả

4, hiển thị bảng trực tuyến.

-the display: inline-table thuộc tính xác định phần tử được hiển thị dưới dạng một khối nội tuyến. không có ký tự xuống dòng trước và sau các phần tử bên cạnh.

cú pháp :

ví dụ :

xem kết quả

5, hiển thị mục danh sách.

-the display: list-item thuộc tính xác định mục sẽ được hiển thị dưới dạng thẻ li.

cú pháp :

ví dụ :

xem kết quả

6, không hiển thị.

-property display: không có phần tử nào ẩn phần tử đã chọn.

cú pháp :

ví dụ :

xem kết quả

7, bảng hiển thị.

thuộc tính display: table xác định phần tử đã chọn dưới dạng thẻ & lt; table & gt;.

cú pháp :

ví dụ :

xem kết quả

8, hiển thị kế thừa.

-thuộc tính này xác định rằng phần tử được chọn kế thừa từ các thuộc tính của phần tử mẹ.

cú pháp :

9, các giá trị hiển thị khác.

-ngoài các thuộc tính trên, display cũng hỗ trợ chúng tôi một số giá trị sau:

10, kết luận.

-vì vậy, tôi đã giới thiệu cho tất cả các bạn về thuộc tính hiển thị trong css . nhưng trong phần trên, bạn chỉ cần chú ý đến các mục 1,2,3,7 vì các mục còn lại ít được sử dụng trong thực tế.

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *