18. Display Trong CSS

Thuộc tính display trong CSS quyết định cách phần tử HTML được hiển thị trên trang web. Nó cho phép bạn kiểm soát cách phần tử tương tác với các phần tử khác, cách chúng xếp chồng lên nhau và chiếm dụng không gian. Dưới đây là một số giá trị phổ biến của thuộc tính display:

block: Các phần tử hiển thị theo chiều dọc, mỗi phần tử chiếm một hàng riêng biệt và chiều rộng tự động mở rộng để lấp đầy không gian của phần tử cha.
inline: Các phần tử hiển thị trên cùng một dòng, chiếm chiều rộng tương ứng với nội dung và không thể đặt chiều cao hoặc margin-top/bottom.
inline-block: Kết hợp giữa inline và block, cho phép các phần tử hiển thị trên cùng một dòng nhưng có thể đặt chiều cao, chiều rộng và margin.
none: Ẩn phần tử khỏi trang web. Nó không chiếm dụng không gian và không tương tác với các phần tử khác.
flex: Sử dụng để tạo bố cục linh hoạt (flex layout). Các phần tử con của phần tử có thuộc tính này sẽ tuân theo các quy tắc căn chỉnh và sắp xếp linh hoạt.
grid: Sử dụng để tạo bố cục dạng lưới (grid layout). Tạo ra một lưới 2D cho các phần tử con.
table: Chuyển phần tử thành một bảng. Có thể kết hợp với các giá trị như table-row, table-cell để kiểm soát cách nội dung bố trí.
list-item: Áp dụng cho phần tử <li> để hiển thị danh sách.

Ví dụ:

css

/* Đặt phần tử div hiển thị dạng block */
div {
    display: block;
}

/* Đặt phần tử span hiển thị dạng inline */
span {
    display: inline;
}

/* Đặt phần tử li hiển thị dạng danh sách */
li {
    display: list-item;
}

Thuộc tính display rất quan trọng trong CSS để xác định cách các phần tử hiển thị và tương tác với nhau trên trang web.

Dưới đây là một số ví dụ cụ thể về cách sử dụng thuộc tính display trong CSS:

Block và Inline:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* Phần tử block */
        .block {
            display: block;
            background-color: lightblue;
            width: 200px;
            padding: 10px;
            margin-bottom: 10px;
        }

        /* Phần tử inline */
        .inline {
            display: inline;
            background-color: lightcoral;
            padding: 5px;
            margin-right: 10px;
        }
    </style>
    <title>Display Example</title>
</head>
<body>
    <div class="block">Phần tử Block</div>
    <span class="inline">Phần tử Inline 1</span>
    <span class="inline">Phần tử Inline 2</span>
</body>
</html>

Flex Layout:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* Container dùng flex layout */
        .container {
            display: flex;
            justify-content: space-around;
        }

        /* Các phần tử con trong container */
        .item {
            width: 100px;
            height: 100px;
            background-color: lightgreen;
            margin: 10px;
        }
    </style>
    <title>Flex Layout Example</title>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

Grid Layout:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* Container dùng grid layout */
        .container {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            grid-gap: 10px;
        }

        /* Các phần tử con trong container */
        .item {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
    </style>
    <title>Grid Layout Example</title>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

Các ví dụ trên giúp bạn hiểu cách sử dụng thuộc tính display để kiểm soát cách các phần tử hiển thị và tương tác trên trang web của bạn.

Leave a Comment Cancel Reply