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

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

<style>
    span{
        display:block;
    }
    div{
        display:inline;
    }
</style>

Xem ví dụ

- 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. Các bạn vui lòng bấm vào hình để tìm hiểu chi tiết khi chúng ta sử dụng giá trị đó thì cách thức hiển thị của phần tử sẽ trông như thế nào nhé !

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>

- Khi chúng ta thiết lập thuộc tính display với giá trị inline thì phần tử sẽ hiển thị dưới dạng nội tuyến.

- Một phần tử hiển thị dưới dạng nội tuyến sẽ có các đặc điểm như sau:

Phần tử hiển thị tiếp nối trên hàng hiện tại.
Chiều rộng của phần tử phụ thuộc vào kích cỡ của nội dung nằm ở bên trong nó.
Chúng ta không thể sử dụng các thuộc tính width & height để thiết lập kích thước cho phần tử.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style>
        p{
            display:inline;
            border:1px solid black;
        }
    </style>
</head>
<body>
    <div>Tài liệu học <p>Lập Trình Web</p> miễn phí</div>
</body>
</html>

Xem ví dụ

- Khi chúng ta thiết lập thuộc tính display với giá trị block thì phần tử sẽ hiển thị dưới dạng khối.

- Một phần tử hiển thị dưới dạng khối sẽ có các đặc điểm như sau:

Phần tử luôn bắt đầu trên một hàng mới.
Chiều rộng của phần tử sẽ trải dài từ trái qua phải (chiếm toàn bộ chiều rộng phần content của cha nó)
Chúng ta có thể sử dụng các thuộc tính width & height để thiết lập lại kích thước cho phần tử.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style>
        span{
            display:block;
            border:1px solid black;
        }
    </style>
</head>
<body>
    <div>Tài liệu học <span>Lập Trình Web</span> miễn phí</div>
</body>
</html>

Xem ví dụ

- Khi chúng ta thiết lập thuộc tính display với giá trị inline-block thì phần tử sẽ hiển thị dưới dạng khối nội tuyến.

- Một phần tử hiển thị dưới dạng khối nội tuyến sẽ có các đặc điểm như sau:

Phần tử hiển thị tiếp nối trên hàng hiện tại.
Chiều rộng của phần tử phụ thuộc vào kích thước của nội dung nằm ở bên trong nó. Tuy nhiên, chúng ta có thể sử dụng các thuộc tính width & height để thiết lập lại kích thước cho phần tử.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style>
        span{
            display:inline-block;
            border:1px solid black;
            width:300px;
            height:200px;
        }
    </style>
</head>
<body>
    <div>Tài liệu học <span>Lập Trình Web</span> miễn phí</div>
</body>
</html>

Xem ví dụ

- Khi chúng ta thiết lập thuộc tính display với giá trị none thì phần tử sẽ bị ẩn đi (giống như không hề tồn tại)

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style>
        h1:nth-child(2){
            display:none;
        }
    </style>
</head>
<body>
    <h1>1) Tài liệu học HTML</h1>
    <h1>2) Tài liệu học CSS</h1>
    <h1>3) Tài liệu học JavaScript</h1>
</body>
</html>

Xem ví dụ

- Khi chúng ta thiết lập thuộc tính display với giá trị flex thì phần tử sẽ hiển thị dưới dạng một cái thùng chứa flex, nó thường được sử dụng kết hợp với lệnh truy vấn @media để thiết kế giao diện responsive (loại giao diện tương thích với nhiều thiết bị, tùy vào kích thước màn hình của thiết bị mà trang web sẽ hiển thị theo một kiểu khác)

- Các bạn sẽ được tìm hiểu chi tiết cách sử dụng nhóm thuộc tính flex trong các bài hướng dẫn tiếp theo.

- Khi chúng ta thiết lập thuộc tính display với giá trị grid thì phần tử sẽ hiển thị dưới dạng một cái thùng chứa grid, nó thường được sử dụng để thiết kế giao diện dạng lưới.

- Các bạn sẽ được tìm hiểu chi tiết cách sử dụng nhóm thuộc tính grid trong các bài hướng dẫn tiếp theo.