Thuộc tính height, width, max-height, và max-width trong CSS giúp bạn kiểm soát kích thước của các phần tử trên trang web. Bằng cách sử dụng những thuộc tính này, bạn có thể điều chỉnh chiều cao và chiều rộng của các phần tử như hình ảnh, hộp văn bản, container, v.v. để bố cục trang web của bạn linh hoạt và đáp ứng tốt hơn. Trong bài viết này, chúng ta sẽ cùng tìm hiểu chi tiết về các thuộc tính này, cách sử dụng chúng trong các tình huống thực tế, cũng như những lưu ý quan trọng khi làm việc với chúng.

1. Tổng quan về height và width trong CSS

1.1. Thuộc tính height

Thuộc tính height cho phép bạn đặt chiều cao của một phần tử. Chiều cao có thể được chỉ định bằng nhiều đơn vị khác nhau như px, em, rem, %, vh, và nhiều đơn vị khác.

Cú pháp:

css
element {
    height: value;
}

1.2. Thuộc tính width

Tương tự như height, thuộc tính width cho phép bạn kiểm soát chiều rộng của một phần tử. Bạn có thể đặt giá trị cụ thể hoặc sử dụng đơn vị phần trăm để chiều rộng tự động thay đổi theo kích thước của phần tử cha.

Cú pháp:

css
element {
    width: value;
}

Các đơn vị phổ biến:

  • px: Pixel (đơn vị tĩnh).
  • %: Phần trăm so với phần tử cha.
  • em và rem: Tính theo kích thước font chữ.
  • vh và vw: Tính theo phần trăm chiều cao hoặc chiều rộng của cửa sổ trình duyệt (viewport height và viewport width).

Ví dụ:

css
div {
    height: 300px;
    width: 50%;
    background-color: lightblue;
}

Trong ví dụ này:

  • height: 300px: Chiều cao của phần tử div được đặt cố định là 300px.
  • width: 50%: Chiều rộng của phần tử div bằng 50% chiều rộng của phần tử cha.

2. Thuộc tính max-height và max-width

2.1. Thuộc tính max-height

max-height cho phép bạn đặt chiều cao tối đa của phần tử. Phần tử không thể vượt quá chiều cao này, ngay cả khi nội dung bên trong cần nhiều không gian hơn. Nếu nội dung vượt quá chiều cao tối đa, nó sẽ không được hiển thị hoặc có thể tạo cuộn (scrolling) nếu được cấu hình.

Cú pháp:

css
element {
    max-height: value;
}

2.2. Thuộc tính max-width

max-width đặt chiều rộng tối đa cho phần tử. Tương tự như max-height, phần tử sẽ không thể lớn hơn chiều rộng tối đa được chỉ định, giúp tránh việc phần tử giãn ra quá mức trong các thiết kế responsive.

Cú pháp:

css
element {
    max-width: value;
}

Ví dụ:

css
img {
    max-width: 100%;
    height: auto;
}

Trong ví dụ này:

  • max-width: 100%: Hình ảnh sẽ không vượt quá chiều rộng của phần tử chứa nó.
  • height: auto: Chiều cao sẽ tự động điều chỉnh để giữ tỷ lệ của hình ảnh.

3. Sự khác biệt giữa height, width và max-height, max-width

  • height và width: Thiết lập kích thước cố định cho phần tử. Nếu bạn đặt width: 500px, chiều rộng của phần tử sẽ luôn là 500px, bất kể kích thước màn hình.
  • max-height và max-width: Giới hạn chiều cao và chiều rộng tối đa. Phần tử có thể co lại nhỏ hơn giới hạn này, nhưng không thể mở rộng vượt quá giá trị tối đa được chỉ định.

Ví dụ minh họa:

css
div {
    width: 50%;
    max-width: 600px;
    height: 200px;
    max-height: 300px;
}

Trong ví dụ này:

  • width: 50%: Chiều rộng của phần tử là 50% của phần tử chứa.
  • max-width: 600px: Chiều rộng không thể vượt quá 600px, dù màn hình có lớn hơn.
  • height: 200px: Chiều cao của phần tử cố định là 200px.
  • max-height: 300px: Nếu nội dung yêu cầu chiều cao lớn hơn 300px, nó sẽ bị giới hạn.

4. Sử dụng min-height và min-width

Ngoài thuộc tính max-height và max-width, CSS còn cung cấp thuộc tính min-height và min-width để đặt chiều cao và chiều rộng tối thiểu cho phần tử. Điều này giúp đảm bảo phần tử không thể co lại nhỏ hơn một kích thước nhất định.

Ví dụ:

css
div {
    min-width: 200px;
    min-height: 100px;
    background-color: lightgreen;
}

Trong ví dụ này:

  • min-width: 200px: Chiều rộng của phần tử không thể nhỏ hơn 200px.
  • min-height: 100px: Chiều cao của phần tử không thể nhỏ hơn 100px.

5. Đơn vị đo lường và ứng dụng thực tế

5.1. Đơn vị px

px (pixel) là đơn vị đo lường cố định, thường được sử dụng khi bạn muốn kiểm soát chính xác kích thước phần tử.

Ví dụ:

css
div {
    width: 400px;
    height: 200px;
}

5.2. Đơn vị %

Đơn vị % là đơn vị linh hoạt, tính theo phần trăm so với phần tử cha. width: 100% có nghĩa là phần tử sẽ chiếm toàn bộ chiều rộng của phần tử chứa nó.

Ví dụ:

css
div {
    width: 80%;
    height: 300px;
}

5.3. Đơn vị vh và vw

  • vh: Phần trăm chiều cao của viewport (chiều cao cửa sổ trình duyệt).
  • vw: Phần trăm chiều rộng của viewport (chiều rộng cửa sổ trình duyệt).

Ví dụ:

css
div {
    width: 50vw; /* Chiếm 50% chiều rộng của cửa sổ trình duyệt */
    height: 50vh; /* Chiếm 50% chiều cao của cửa sổ trình duyệt */
}

Trong ví dụ này, kích thước của phần tử div sẽ tự động điều chỉnh theo kích thước cửa sổ trình duyệt.

5.4. Đơn vị em và rem

  • em: Đơn vị tương đối, tính theo kích thước font chữ của phần tử hiện tại.
  • rem: Đơn vị tương đối, tính theo kích thước font chữ của phần tử gốc (root element).

Ví dụ:

css
div {
    width: 20em;
    height: 10rem;
}

Trong ví dụ này:

  • width: 20em: Chiều rộng của phần tử sẽ là 20 lần kích thước font chữ của phần tử hiện tại.
  • height: 10rem: Chiều cao của phần tử sẽ là 10 lần kích thước font chữ của phần tử gốc.

6. Ví dụ

Ví dụ 1: Thiết lập kích thước cố định

css
.container {
    width: 300px;
    height: 200px;
    background-color: lightblue;
}

Kết quả: Phần tử container sẽ có chiều rộng là 300px và chiều cao là 200px.

Ví dụ 2: Kích thước linh hoạt với max-width và max-height

css
.container {
    width: 100%;
    max-width: 600px;
    height: auto;
    background-color: lightgreen;
}

Kết quả: Phần tử container sẽ chiếm toàn bộ chiều rộng phần tử cha, nhưng không vượt quá 600px.

Ví dụ 3: Sử dụng vw, vh để làm phần tử linh hoạt với cửa sổ trình duyệt

css
.container {
    width: 50vw;
    height: 50vh;
    background-color: lightcoral;
}

Kết quả: Phần tử container sẽ chiếm 50% chiều rộng và chiều cao của cửa sổ trình duyệt.

Ví dụ 4: Ứng dụng min-width, min-height, max-width, và max-height để thiết lập kích thước

css
.container {
    width: 80%;
    min-width: 300px;
    max-width: 800px;
    height: auto;
    min-height: 200px;
    max-height: 600px;
    background-color: lightyellow;
}

Kết quả:

  • Chiều rộng của phần tử container sẽ linh hoạt, nhưng không nhỏ hơn 300px và không lớn hơn 800px.
  • Chiều cao của phần tử sẽ tự động điều chỉnh, nhưng không nhỏ hơn 200px và không vượt quá 600px.

7. Kết luận

Thuộc tính height, width, max-height, và max-width là những công cụ quan trọng trong CSS để kiểm soát kích thước và bố cục của phần tử. Việc sử dụng đúng các thuộc tính này giúp bạn tạo ra các bố cục web linh hoạt, đáp ứng tốt trên nhiều kích thước màn hình và đảm bảo giao diện nhất quán.

Bằng cách kết hợp các thuộc tính min-width, min-height, max-width, và max-height, bạn có thể kiểm soát tốt kích thước tối thiểu và tối đa của phần tử, đặc biệt trong thiết kế web responsive. Hãy thử nghiệm các kiến thức này vào dự án của bạn để tạo ra các bố cục web chuyên nghiệp và tối ưu hóa trải nghiệm người dùng.

Hy vọng bài viết này đã giúp bạn hiểu rõ hơn về các thuộc tính này trong CSS!