Những bài học
Bắt đầu
Bắt đầu học
CodeGym /Khóa học Java /Frontend SELF VI /Đơn vị đo lường

Đơn vị đo lường

Frontend SELF VI
Mức độ , Bài học
Có sẵn

4.1 Giá trị phần trăm

Giá trị phần trăm và đơn vị tương đối trong CSS chơi một vai trò quan trọng trong việc tạo ra các bố cục linh hoạt và đáp ứng. Chúng cho phép các phần tử thích ứng với các kích thước màn hình khác nhau và điều kiện thay đổi, cung cấp khả năng tương thích và sự tiện lợi khi sử dụng tốt hơn.

Giá trị phần trăm được sử dụng để xác định kích thước của các phần tử liên quan đến kích thước của các phần tử chứa chúng. Điều này làm cho bố cục linh hoạt và dễ thích ứng hơn.

Ví dụ sử dụng %:

CSS
    
      .container {
        width: 80%;
        margin: 0 auto;
        background-color: #f4f4f4;
      }

      .box {
        width: 50%;
        padding-top: 25%; /* Tỷ lệ 1:2 */
        background-color: #3498db;
        color: white;
        text-align: center;
        position: relative;
      }

      .box::before {
        content: "";
        display: block;
        padding-top: 50%; /* Tỷ lệ 2:1 */
      }
HTML
    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Ví dụ sử dụng %</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div style="min-height: 200px;">
            <div class="container">
              <div class="box">Nội dung</div>
            </div>
          </div>
        </body>
      </html>
HTML
    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Ví dụ sử dụng %</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="container">
            <div class="box">Nội dung</div>
          </div>
        </body>
      </html>

Giải thích mã:

  • .container: đặt chiều rộng của container là 80% từ chiều rộng của phần tử cha, căn giữa nó bằng margin: 0 auto
  • .box: đặt chiều rộng của khối là 50% từ chiều rộng của container. Chiều cao của khối được xác định thông qua padding-top, đảm bảo tỷ lệ 1:2

4.2 Đơn vị tương đối (em và rem)

Đơn vị em là đơn vị tương đối dựa vào kích thước phông chữ của phần tử cha. Nếu kích thước phông chữ của cha thay đổi, thì giá trị em cũng thay đổi.

Ví dụ sử dụng em:

CSS
    
      .parent {
        font-size: 16px;
      }

      .child {
        font-size: 1.5em; /* 1.5 * 16px = 24px */
        padding: 1em; /* 1 * 16px = 16px */
      }

Đơn vị rem là đơn vị tương đối dựa vào kích thước phông chữ của phần tử gốc (html). Nó không phụ thuộc vào các phần tử cha, làm cho nó dễ dự đoán hơn và thuận tiện để tạo bố cục có khả năng mở rộng.

Ví dụ sử dụng rem:

HTML
    
      <div class="container">
        Một vài văn bản trong container
        <div class="box">
          Một vài văn bản trong hộp
        </div>
      </div>
CSS
    
      html {
        font-size: 16px;
      }

      .container {
        font-size: 1rem; /* 16px */
        padding: 2rem; /* 32px */
      }

      .box {
        font-size: 1.5rem; /* 24px */
        margin: 1rem; /* 16px */
      }

So sánh em và rem:

  • em: phụ thuộc vào kích thước phông chữ của phần tử cha, có thể dẫn đến hiệu ứng dây chuyền khi lồng ghép
  • rem: phụ thuộc vào kích thước phông chữ của phần tử gốc (html), làm cho nó dễ dự đoán hơn và dễ sử dụng

4.3 Sử dụng kết hợp %

Sử dụng các đơn vị tương đối (em và rem) kết hợp với phần trăm cho phép tạo ra các bố cục linh hoạt và chỉnh sửa, có thể hiển thị đúng trên mọi thiết bị.

Ví dụ: Sử dụng kết hợp %

Tạo bố cục trong đó kích thước của các phần tử được xác định bằng cách sử dụng phần trăm và các đơn vị tương đối.

CSS
    
      html {
        font-size: 16px;
      }

      .container {
        width: 80%;
        margin: 0 auto;
      }

      .header, .footer {
        background-color: #333;
        color: white;
        padding: 1rem;
        text-align: center;
      }

      .content {
        display: flex;
        gap: 1rem;
        margin: 1rem 0;
      }

      .sidebar {
        flex: 1 1 30%;
        background-color: #f4f4f4;
        padding: 1rem;
      }

      .main {
        flex: 1 1 70%;
        background-color: #e4e4e4;
        padding: 1rem;
      }
HTML
    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Sử dụng kết hợp % và các đơn vị tương đối</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="container">
            <div class="header">Tiêu đề</div>
            <div class="content">
              <div class="sidebar">Thanh bên</div>
              <div class="main">Nội dung chính</div>
            </div>
            <div class="footer">Chân trang</div>
          </div>
        </body>
      </html>

Giải thích mã:

  • html: thiết lập kích thước phông chữ cơ bản cho toàn bộ tài liệu
  • .container: sử dụng phần trăm để đặt chiều rộng của container và căn giữa nó trên trang
  • .header và .footer: sử dụng rem cho khoảng cách, làm cho chúng dễ dự đoán
  • .content: sử dụng Flexbox để bố trí thanh bên và nội dung chính với khoảng cách giữa chúng
  • .sidebar và .main: sử dụng phần trăm để đặt chiều rộng của cột và rem cho khoảng cách
Bình luận
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION