Th3
28
2013

Thuộc tính display trong CSS

Thuộc tính Display quy định phương thức hiển thị của các thành phần trên trang web. Nó được ứng dụng để tạo các hiệu ứng ẩn/hiện một hay nhiều nhóm đối tượng, thiết kế Dropdown menu, tabs menu,…

Ẩn một thành phần trong trang web

Khi muốn một thành phần nào đó, ta chỉ cần khai báo thuộc tính display của thành phần đó là none

Ví dụ:

1 h1.logo{display: none}

Với ví dụ trên thì thành phần h1 có class logo sẽ không được hiển thị.

Thay đổi phương thức hiển thị của các thành phần Block và Inline

Chúng ta đã biết, các thành phần trong tài liệu HTML luôn ở hai dạng Block và Inline, các bạn có thể xem bài Thành phần block và inline để hiểu rõ hơn.

Nhưng với thuộc tính display chúng ta có thể biến một thành phần Inline thành Block, và biến một thành phần Block thành Inline

Ví dụ:

Giả sử chúng ta có mã HTML như sau;

1 <div>Thành phần div 1</div>
2 <div>Thành phần div 2</div>
3 <span>Thành phần span 1</span>
4 <span>Thành phần span 2</span>

Đoạn mã sau sẽ biến thành phần Block div thành inline và thành phần Inline span thành block

1 div{display: inline}
2 span{display: block}

Thuộc tính display

Kết quả là thành phần Div được hiển thị dưới dạng Inline, thành phấn Span được hiện thị dưới dạng Block.

Kết luận

Như vậy thuộc tính display có 3 giá trị:

  1. none: ẩn một thành phần trong trang web
  2. Block
  3. Inline

Giá trị Block và Inline sẽ thay đổi phương thức hiện thị của các thành phần block và inline.

Đăng ký nhận bài viết mới qua email.

Tác giả:

Thuộc tính display trong CSS Thuộc tính display trong CSS
8 10 1105

Leave a comment