Mô hình nội dung và biên giới

4.1 Thuộc tính box-sizing

Thuộc tính box-sizing trong CSS là một công cụ mạnh mẽ để quản lý mô hình kích thước của các phần tử. Nó xác định cách mà kích thước của phần tử được tính toán, bao gồm cả chiều rộng và chiều cao, cũng như padding, biên và margin. Dưới đây chúng ta sẽ xem xét chi tiết cách box-sizing hoạt động và cách sử dụng nó có thể ảnh hưởng đến layout của trang web.

Các mô hình box-sizing cơ bản

Content-box (mô hình nội dung)

Giá trị content-box là giá trị mặc định cho tất cả các phần tử. Trong mô hình này, kích thước của phần tử (width và height) chỉ xác định kích thước nội dung, không bao gồm padding và biên. Điều này có nghĩa là, padding và biên được thêm vào tổng chiều rộng và chiều cao của phần tử.

Border-box (mô hình biên giới)

Giá trị border-box thay đổi mô hình đo lường sao cho kích thước của phần tử (width và height) bao gồm cả padding và biên. Điều này có nghĩa là, padding và biên nằm trong tổng chiều rộng và chiều cao của phần tử, đơn giản hóa việc tính toán và quản lý kích thước của phần tử.

Ví dụ sử dụng box-sizing:

    
      .box {
        background-color: #3498db;
        color: white;
        padding: 20px;
        border: 5px solid #2c3e50;
        margin: 10px;
        width: 200px;
        height: 100px;
      }

      .content-box {
        box-sizing: content-box;
      }

      .border-box {
        box-sizing: border-box;
      }
    
  

    
      <div class="box content-box">Content-box: width và height chỉ bao gồm nội dung.</div>
      <div class="box border-box">Border-box: width và height bao gồm padding và biên.</div>
    
  

Giải thích mã:

• .box: kiểu cơ bản cho tất cả các hộp, bao gồm padding, biên và kích thước
• .content-box: phần tử với box-sizing: content-box, nơi mà width và height chỉ bao gồm nội dung
• .border-box: phần tử với box-sizing: border-box, nơi mà width và height bao gồm cả padding và biên

4.2 Ảnh hưởng của box-sizing lên layout

Mô hình nội dung (Content-box)

Khi sử dụng box-sizing: content-box;, padding và biên được thêm vào tổng chiều rộng và chiều cao của phần tử. Điều này có thể dẫn đến nhu cầu cân nhắc thêm khi tính toán kích thước và vị trí của các phần tử.

Ví dụ sử dụng

Trong trường hợp này tổng chiều rộng của phần tử sẽ là 200px + 20px (padding) * 2 + 5px (border) * 2 = 250px, và tổng chiều cao sẽ là 100px + 20px (padding) * 2 + 5px (border) * 2 = 150px.

    
      .content-box {
        box-sizing: content-box;
        width: 200px;
        height: 100px;
        padding: 20px;
        border: 5px solid #000;
      }
    
  

    
      <div class="box content-box">Content-box: width và height chỉ bao gồm nội dung.</div>
    
  

Mô hình biên giới (Border-box)

Khi sử dụng box-sizing: border-box;, padding và biên được bao gồm trong kích thước width và height được xác định. Điều này đơn giản hóa việc tính toán và quản lý kích thước của phần tử, đặc biệt khi tạo layout đáp ứng.

Ví dụ sử dụng:

    
      .border-box {
        box-sizing: border-box;
        width: 200px;
        height: 100px;
        padding: 20px;
        border: 5px solid #000;
      }
    
  

    
      <div class="box border-box">Border-box: width và height bao gồm padding và biên.</div>
    
  

4.3 Tạo layout đáp ứng

Sử dụng box-sizing: border-box; cho phép dễ dàng tạo layout đáp ứng, vì kích thước của phần tử bao gồm cả padding và biên, tránh các vấn đề tràn bất ngờ.

Ví dụ sử dụng:

    
      * {
        box-sizing: border-box;
      }

      .container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px;
        background-color: #f4f4f4;
      }

      .item {
        flex: 1 1 calc(33.333% - 20px);
        padding: 20px;
        border: 5px solid #3498db;
        background-color: #fff;
      }
    
  

    
      <div class="container">
        <div class="item">Phần tử 1</div>
        <div class="item">Phần tử 2</div>
        <div class="item">Phần tử 3</div>
        <div class="item">Phần tử 4</div>
        <div class="item">Phần tử 5</div>
        <div class="item">Phần tử 6</div>
      </div>
    
  

Giải thích mã:

• * { box-sizing: border-box; }: áp dụng mô hình biên giới cho tất cả các phần tử trên trang để đơn giản hóa việc quản lý kích thước
• .container: Flex-container với layout đáp ứng
• .item: Các phần tử Flex với phân phối chiều rộng đồng đều và bao gồm cả padding và biên trong tổng chiều rộng

4.4 Kích thước cố định với padding bên trong

Sử dụng box-sizing: border-box; cho phép dễ dàng thiết lập kích thước cố định cho các phần tử với padding bên trong mà không lo lắng về tràn.

Ví dụ sử dụng:

    
      .fixed-size {
        box-sizing: border-box;
        width: 300px;
        height: 150px;
        padding: 20px;
        border: 5px solid #2ecc71;
        background-color: #ecf0f1;
        text-align: center;
        line-height: 150px; /* Căn giữa văn bản theo chiều dọc */
      }
    
  

    
      <div class="fixed-size">
        Kích thước cố định
      </div>
    
  

Giải thích mã:

• .fixed-size: phần tử với kích thước cố định 300x150 pixel, bao gồm cả padding và biên, cho phép kiểm soát chính xác kích thước của nó

1

Khảo sát/đố vui

, cấp độ , bài học

Không có sẵn

Mô hình khối

Mô hình khối

Mở