Đo kích thước

3.1 Thuộc tính width

Kích thước của các khối trong CSS đóng vai trò quan trọng trong việc xây dựng bố cục trang web. Chúng xác định cách các phần tử hiển thị và tương tác với các phần tử xung quanh. Bây giờ chúng ta sẽ xem xét các thuộc tính width, height, max-width và max-height, cho phép đặt kích thước của các khối.

Thuộc tính width đặt chiều rộng cho phần tử. Nó có thể được đặt bằng các đơn vị đo khác nhau như các pixel (px), phần trăm (%), em, rem và các đơn vị khác.

Giá trị

• Giá trị tự động: auto — chiều rộng của phần tử được xác định tự động dựa trên nội dung của nó và môi trường
• Đơn vị tuyệt đối: px, pt, cm, mm, in và các đơn vị khác
• Đơn vị tương đối: %, em, rem, vw, vh và các đơn vị khác

Ví dụ sử dụng:

    
      .box {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 10px;
      }

      .box-fixed {
        width: 200px;
      }

      .box-percentage {
        width: 50%;
      }
    
  

    
      <div class="box box-fixed">Chiều rộng cố định (200px)</div>
      <div class="box box-percentage">Chiều rộng theo phần trăm (50%)</div>
    
  

Giải thích mã:

• .box-fixed: phần tử có chiều rộng cố định 200 pixel
• .box-percentage: phần tử có chiều rộng 50% của phần tử mẹ

3.2 Thuộc tính height

Thuộc tính height đặt chiều cao cho phần tử. Nó cũng có thể được đặt bằng các đơn vị đo khác nhau.

Giá trị:

• Giá trị tự động: auto — chiều cao của phần tử được xác định tự động dựa trên nội dung của nó và môi trường
• Đơn vị tuyệt đối: px, pt, cm, mm, in và các đơn vị khác
• Đơn vị tương đối: %, em, rem, vh, vw và các đơn vị khác

Ví dụ sử dụng:

    
      .container {
        height: 300px;
      }

      .box {
        color: white;
        padding: 10px;
      }

      .box-fixed-height {
        height: 150px;
        background-color: #2ecc71;
      }

      .box-percentage-height {
        height: 50%;
        background-color: #7a5c71;
      }
    
  

    
      <div class="container">
        <div class="box box-fixed-height">Chiều cao cố định (150px)</div>
        <div class="box box-percentage-height">Chiều cao theo phần trăm (50%)</div>
      </div>
    
  

Giải thích mã:

• .box-fixed-height: phần tử có chiều cao cố định 150 pixel
• .box-percentage-height: phần tử có chiều cao 50% của phần tử mẹ

3.3 Thuộc tính max-width

Thuộc tính max-width đặt chiều rộng tối đa cho phần tử. Đây là hạn chế, ngăn không cho phần tử mở rộng vượt quá giá trị được đặt.

Giá trị:

• Không có giới hạn: none — phần tử có thể mở rộng đến bất kỳ chiều rộng nào
• Đơn vị tuyệt đối: px, pt, cm, mm, in và các đơn vị khác
• Đơn vị tương đối: %, em, rem, vh, vw và các đơn vị khác

Ví dụ sử dụng:

    
      .box {
        background-color: #e74c3c;
        color: white;
        padding: 10px;
        margin: 10px;
      }

      .box-max-width {
        width: 100%;
        max-width: 300px;
      }
    
  

    
      <div class="box">Chiều rộng 100% (mặc định)</div>
      <div class="box box-max-width">Chiều rộng tối đa 300px</div>
    
  

Giải thích mã:

• .box-max-width: phần tử có chiều rộng tối đa là 300 pixel. Nội dung sẽ không cho phép phần tử mở rộng vượt quá 300 pixel

3.4 Thuộc tính max-height

Thuộc tính max-height đặt chiều cao tối đa cho phần tử. Đây là hạn chế, ngăn không cho phần tử mở rộng vượt quá giá trị được đặt.

Giá trị:

• Không có giới hạn: none — phần tử có thể mở rộng đến bất kỳ chiều rộng nào
• Đơn vị tuyệt đối: px, pt, cm, mm, in và các đơn vị khác
• Đơn vị tương đối: %, em, rem, vh, vw và các đơn vị khác

Ví dụ sử dụng:

    
      .box {
        background-color: #9b59b6;
        color: white;
        padding: 10px;
        max-height: 35px;
        overflow: auto;
      }
    
  

    
      <div class="box">
        <p>Văn bản bổ sung để hiển thị cuộn.<br>Văn bản bổ sung để hiển thị cuộn.<br>Văn bản bổ sung để hiển thị cuộn.</p>
      </div>
    
  

Giải thích mã:

• .box-max-height: phần tử có chiều cao tối đa là 100 pixel. Nếu nội dung của phần tử vượt quá giá trị này, nó sẽ cuộn được nhờ thuộc tính overflow: auto;