Chỉnh cách thức hiển thị của một phần tử HTML - 28

Chỉnh cách thức hiển thị của một phần tử HTML – 28

– Trong loạt tài liệu hướng dẫn học HTML thì tôi đã từng giới thiệu sơ qua với các bạn về hai loại phần tử, đó chính là phần tử khối và phần tử nội tuyến, lý do mà các phần tử này được phân loại như vậy là bởi vì cách thức hiển thị của chúng (ví dụ như các phần tử <div>, <p>, <h1>, <h2>, <h3>, . . . . được liệt vào nhóm phần tử khối là do khi hiển thị thì chúng luôn bắt đầu trên một hàng mới và trải dài từ trái sang phải chiếm toàn bộ chiều rộng phần content của cha chúng, còn các phần tử như <span>, <i>, <u>, . . . . được liệt vào nhóm phần tử nội tuyến là do khi hiển thị thì chúng sẽ tiếp nối trên hàng hiện tại và chiều rộng phụ thuộc vào kích cỡ của nội dung nằm ở bên trong chúng)

– Vậy câu hỏi được đặt ra ở đây là: tại sao tất cả đều là phần tử, mà phần tử này thì lại có cách thức hiển thị như thế này, phần tử kia thì lại có cách thức hiển thị như thế kia !?

❏ TRẢ LỜI: Trong CSS, ban đầu mỗi phần tử đều được thiết lập thuộc tính display với một giá trị mặc định, giá trị này sẽ quyết định cách thức hiển thị của phần tử, ví dụ:

Đối với các phần tử như <div>, <p>, <h1>, . . . thì mặc định chúng được thiết lập thuộc tính display với giá trị block, cho nên chúng sẽ hiển thị dưới dạng khối.
Đối với các phần tử như <span>, <i>, <u>, . . . thì mặc định chúng được thiết lập thuộc tính display với giá trị inline, cho nên chúng sẽ hiển thị dưới dạng nội tuyến.

⛔ Chỉ cần thiết lập lại giá trị cho thuộc tính display của phần tử thì đồng nghĩa với việc chúng ta có thể thay đổi cách thức hiển thị của phần tử đó.

Ví dụ:

– Cách thức hiển thị của phần tử <span> được chuyển sang dạng khối.

– Cách thức hiển thị của phần tử <div> được chuyển sang dạng nội tuyến.

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style>
        span{
            border: 1px solid black;
            display:block;
        }
        div{
            border: 1px solid black;
            display:inline;
        }
    </style>
</head>
<body>
    <span>Lập Trình Web</span>
    <div>Chào bạn</div>
</body>
</html>

– Tuy nhiên, cách thức hiển thị của phần tử không chỉ dừng lại ở hai dạng khối & nội tuyến, mà thật ra nó còn có rất nhiều dạng khác nữa, dưới đây là danh sách những giá trị (cũng chính là cách thức hiển thị) mà chúng ta có thể gán cho thuộc tính display.

inline: Phần tử sẽ hiển thị dưới dạng nội tuyến.
block: Phần tử sẽ hiển thị dưới dạng khối.
inline-block: Phần tử sẽ hiển thị dưới dạng khối nội tuyến.
none: Phần tử sẽ bị ẩn đi.
flex: Phần tử sẽ hiển thị dưới dạng một cái thùng chứa flex dạng khối.
grid: Phần tử sẽ hiển thị dưới dạng một cái thùng chứa grid dạng khối.
inline-flex: Phần tử sẽ hiển thị dưới dạng một cái thùng chứa flex dạng nội tuyến.
inline-grid: Phần tử sẽ hiển thị dưới dạng một cái thùng chứa grid dạng nội tuyến.
list-item: Cách thức hiển thị của phần tử sẽ giống với một phần tử <li>
table: Cách thức hiển thị của phần tử sẽ giống với một phần tử <table>
table-caption: Cách thức hiển thị của phần tử sẽ giống với một phần tử <caption>
table-column-group: Cách thức hiển thị của phần tử sẽ giống với một phần tử <colgroup>
table-header-group: Cách thức hiển thị của phần tử sẽ giống với một phần tử <thead>
table-footer-group: Cách thức hiển thị của phần tử sẽ giống với một phần tử <tfoot>
table-row-group: Cách thức hiển thị của phần tử sẽ giống với một phần tử <tbody>
table-cell: Cách thức hiển thị của phần tử sẽ giống với một phần tử <td>
table-column: Cách thức hiển thị của phần tử sẽ giống với một phần tử <col>
table-row: Cách thức hiển thị của phần tử sẽ giống với một phần tử <tr>