HTML/CSS | Tóm tắt chương - Thẻ inline và block

Học HTML, CSS từ Zero Tới Hero

Chúc mừng bạn đã vượt qua chương “Thẻ inline và block” 🎉

Hãy cùng nhau nhìn lại những kiến thức đã học dưới đây bạn nhé.

Tóm tắt

• Tất cả các thẻ HTML mặc định có thuộc tính display, tùy vào loại thẻ đó thì display sẽ có giá trị tương ứng. Ví dụ: thẻ block sẽ mặc định có display: block, thẻ inline sẽ mặc định có display: inline.
• Trường hợp thẻ không có thuộc tính display trong user agent stylesheet sẽ là thẻ inline.
• Có thể tra cứu một thẻ HTML thuộc loại thẻ Inline hay Block tại HTML Reference.
• Các thẻ Block luôn bắt đầu trên một hàng mới.
• Các thẻ Block chiếm toàn bộ chiều rộng hết mức có thể. Trình duyệt có thể tự động thêm margin (top, bottom) vào một số thẻ Block như: h1 - h6, <p>, ul, ol, v.v.
• Thẻ Inline không bắt đầu trên một hàng mới, độ rộng của thẻ Inline tùy thuộc vào nội dung mà nó chứa. Khi có nhiều thẻ Inline đứng cạnh nhau thì chúng sẽ nằm trên cùng một hàng.
• Thuộc tính display: none sẽ loại bỏ phần tử khỏi bố cục trang web.
• Thuộc tính opacity có giá trị từ 0.0 - 1.0, được dùng để làm mờ phần tử trên giao diện, có thể nhìn xuyên qua phần tử để thấy được chi tiết phía dưới. Với giá trị là 0, phần tử sẽ hoàn toàn trong suốt và không thể nhìn thấy trên giao diện.
• Thuộc tính visibility dùng để thay đổi sự hiển thị của các phần tử. Với giá trị visible thì phần tử có thể nhìn thấy (mặc định), với giá trị hidden phần tử sẽ không thấy trên giao diện, tuy nhiên không gian/diện tích của phần tử không bị loại bỏ khỏi bố cục của trang web.
• Trường hợp sử dụng display: none, opacity: 0 và visibility: hidden:

  • display: none

    • Ẩn và loại bỏ không gian/diện tích của phần tử khỏi bố cục trang web
    • Không cần hiệu ứng chuyển tiếp (transition)

  • opacity: 0

    • Tăng/giảm độ mờ của phần tử HTML trên giao diện trang web
    • Kết hợp với transition để tạo hiệu ứng chuyển tiếp như:
      • Fade in: từ từ hiện lên
      • Fade out: từ từ ẩn đi

  • visibility: hidden

    • Ẩn phần tử mà không làm thay đổi bố cục trang web (không gian của phần tử không bị loại bỏ)
    • Kết hợp với transition và opacity để tạo hiệu ứng chuyển tiếp như:
      • Fade in: từ từ hiện lên
      • Fade out: từ từ ẩn đi