Trang chủ Web DevelopmentHTML/CSS [Học CSS] Tùy biến loại phần tử với “display”

[Học CSS] Tùy biến loại phần tử với “display”

bởi Thạch Phạm
3 bình luận 12,7K views

Tham gia nhóm hỗ trợ WordPress

Tham gia nhóm Hỗ trợ Server - Hosting & WordPress để cùng nhau hỏi đáp và hỗ trợ các vấn đề về WordPress, tối ưu máy chủ/server.

Tham gia ngay
Bài này thuộc phần 17 của 26 phần trong serie Học CSS cơ bản



Ở phần đầu của serie Học CSS cơ bản này mình đã có nói qua về thuộc tính Block và Inline là như thế nào và tầm quan trọng của nó trong việc thiết kế bố cục chơ website với CSS. Hiện tại chắc bạn đã biết thế nào là Block và Inline rồi đúng không? Mình xin nhắc lại nếu bạn chưa nhớ nhé.

  • Block: Các phần tử block nó sẽ được nằm một hàng riêng biệt khi hiển thị. Ví dụ như các thẻ <div>, <li>, <ul>, <h1>,..là các block.
  • Inline: Các phần tử này sẽ hiển thị trên cùng một hàng trên nội dung khác. Ví dụ như các thẻ <span>, <strong>, <a>,..là các phần tử inline.

Vậy thì câu hỏi được đặt ra, làm thế nào để chuyển một phần tử inline sang block và ngược lại? Giải pháp trong CSS đó là sẽ sử dụng thuộc tínhdisplay.

Thuộc tính display có một số giá trị cơ bản như:

  • inline: Chuyển phần tử về hiển thị trên cùng một hàng.
  • inline-block: Chuyển phần tử về hiển thị trên cùng một hàng nhưng nó vẫn thừa hưởng các đặc tính của block như có thể tùy chỉnh kích thước, thêm background,…
  • block: Chuyển phần tử về hiển thị kiểu block, sở hữu một hàng riêng.
  • list-item: Chuyển phần tử về hiển thị như một mục danh sách, để có thể sử dụng thuộc tính list-style.
  • none: Đơn giản là ẩn phần tử đó đi không cho hiển thị nữa, nó cũng sẽ ẩn luôn toàn bộ các khoảng trống mà nó sở hữu. Nếu bạn muốn ẩn đi mà vẫn đề lại “dấu vết” thì có thể sử dụng visibility: hidden.

Còn một số các giá trị khác ít dùng đến mà bạn có thể xem tại đây.

Khuyến mãi Black Friday

Một vài ví dụ về thuộc tính display:

[codepen id=”vEqbpM”]

Chỉ vậy thôi, bạn nên nhớ là CSS luôn tồn tại một thuộc tính tên là display để đổi kiểu hiển thị cho phần tử là được vì chắc chắn sau này bạn sẽ sử dụng rất nhiều khi thực hành thực tế.

3.7/5 - (3 bình chọn)
3 bình luận

Có thể bạn quan tâm

Hiện tại blog tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Bình luận sẽ mở ra cho đến khi mình sẵn sàng.