CSS 17 – Thuộc tính display trong CSS

0
165

Ở những bài trước trong series học CSS, mình đã có những bài hướng dẫn về các loại thẻ trong HTML, cụ thể là InlineBlock rồi, cũng như tầm quan trọng của các thẻ đó trong việc thiết kế bố cục Layout cho website. Nếu quên thì các bạn có thể quay lại các bài viết trước để xem lại nhé. Và bài hôm nay, mình sẽ giúp các bạn tìm hiểu về 1 thuộc tính mới trong CSS có liên quan tới các loại thẻ đó, đồng thời cũng để giải quyết câu hỏi Làm thế nào để chuyển 1 phần tử từ inline sang block và ngược lại?. Đó chính là thuộc tính display.

Thuộc tính display 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ó…. Rất nhiều đúng không nào.

Ví dụ: ẩn phần tử, hiện phần tử, chuyển đổi kiểu của phần từ, …

Cấu trúc:

Chúng ta cùng đi tìm hiểu từng giá trị một nhé.

Cách sử dụng thuộc tính display để hiện (ẩn) phần tử HTML

Để sử dụng thuộc tính display, chúng ta sử dụng cú pháp:

Trong đó:

  • inline – ép phần tử sang kiểu nội tuyến
  • block – ép phần tử sang kiểu khối
  • none – ẩn phần tử
  • inherit – kế thừa kiểu của phần tử cha

Display block

Thuộc tính display với giá trị 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:

Ví dụ: Như các bạn đã biết thì thẻ span trong HTML là một thẻ inline, độ rộng đi theo nội dung trong thẻ. Và khi chúng ta sử dụng thuộc tính display:block cho thẻ span thì thẻ span sẽ được chuyển sang kiểu block và sẽ hiển thị xuống dòng như thẻ div và thẻ p.

Display inline

Thuộc tính display với giá trị inline có tác dụng xác định thành phần hiển thị thành dạng inline. Đây là dạng mặc định của các thẻ như: a, span, …

Cú pháp:

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

Display none

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

Cú pháp:

Ví dụ:

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:

Một số cách hiển thị thành phần khác

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:

Ví dụ:

Display inline-table

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

Cú pháp:

Ví dụ:

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:

Ví dụ:

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:

Ví dụ:

Cách sử dụng thuộc tính visibility để hiện (ẩn) phẩn tử HTML

Để ẩn phẩn tử thì sử dụng display:none. Ngoài ra chúng ta cũng có thể sử dụng visibility:hidden.

Tuy nhiên, hai phương thức trên sẽ cho ra hai kết quả khác nhau:

  • display:none thì ẩn nguyên cái phần tử HTML.
  • visibility:hidden chỉ ẩn nội dung của phần tử HTML, nhưng vẫn sẽ hiện thị khoảng trắng ở vị trí của phần tử đó.

Ví dụ:

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

Kết luận

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

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây