Thuộc tính max-width trong CSS xác định chiều rộng tối đa của một phần tử. Nó đảm bảo phần tử không vượt quá chiều rộng được chỉ định. Thuộc tính này đóng vai trò quan trọng trong thiết kế responsive. Nó cho phép nội dung tự điều chỉnh trong giới hạn xác định. Điều này giúp tạo bố cục linh hoạt hiển thị tốt trên nhiều kích thước màn hình.
Syntax
max-width: none | length | percentage (%) | initial | inherit;
Property Values
Tất cả các giá trị thuộc tính được mô tả chi tiết trong ví dụ bên dưới.
| Value | Description |
|---|---|
| none | Giá trị mặc định mà không cần đặt chiều rộng tối đa. |
| length | Đặt chiều rộng tối đa bằng đơn vị độ dài cụ thể như pixel (px), centimet (cm), v.v. |
| percentage | Đặt chiều rộng tối đa theo tỷ lệ phần trăm chiều rộng của phần tử chứa nó. |
| initial | Đặt thuộc tính về giá trị mặc định ban đầu của nó. |
| inherit | Kế thừa giá trị thuộc tính từ phần tử cha của nó. |
Examples of Using max-width
Example 1: Using max-width with none
Trong ví dụ này, thuộc tính max-width được đặt thành none. Các đoạn văn có thể mở rộng mà không bị giới hạn về chiều rộng.
<!DOCTYPE html>
<html>
<head>
<title>max-width property</title>
<!-- max-width CSS property -->
<style>
p {
max-width: none;
color: white;
background-color: green;
}
</style>
</head>
<body>
<p> GeeksforGeeks: A computer science portal </p>
</body>
</html>
Output:
Example 2: Using max-width with length
Ở đây, chúng ta đặt chiều rộng tối đa thành một độ dài cụ thể (300px). Điều này ngăn đoạn văn dài hơn giá trị đó.
HTML<!DOCTYPE html>
<html>
<head>
<title>max-width property</title>
<!-- max-width CSS property -->
<style>
p {
max-width: 110px;
color: white;
background-color: green;
}
</style>
</head>
<body>
<p>
GeeksforGeeks: A computer science portal
</p>
</body>
</html>
Output:
Example 3: Using max-width with Percentage
Trong ví dụ này, chiều rộng tối đa được đặt theo tỷ lệ phần trăm chiều rộng của phần tử cha. Điều này làm cho phần tử trở nên linh hoạt hơn.
HTML<!DOCTYPE html>
<html>
<head>
<title>max-width property</title>
<!-- max-width CSS property -->
<style>
p {
max-width: 20%;
color: white;
background-color: green;
}
</style>
</head>
<body>
<p>
GeeksforGeeks: A computer science portal
</p>
</body>
</html>
Output:
Example 4: Using max-width with initial
Ví dụ này minh họa cách đặt lại thuộc tính max-width về giá trị ban đầu (mặc định) bằng initial.
<!DOCTYPE html>
<html>
<head>
<title>max-width property</title>
<!-- max-width CSS property -->
<style>
p {
max-width: initial;
color: white;
background-color: green;
}
</style>
</head>
<body>
<p>
GeeksforGeeks: A computer science portal
</p>
</body>
</html>
Output:
Example 5: Using max-width with inherit
Trong ví dụ này, giá trị max-width được kế thừa từ phần tử cha. Phần tử con tuân theo các ràng buộc chiều rộng tương tự như phần tử cha.
<!DOCTYPE html>
<html>
<head>
<title>max-width property</title>
<!-- max-width CSS property -->
<style>
.container {
max-width: inherit;
color: white;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<p>
GeeksforGeeks: A computer science portal
</p>
</div>
</body>
</html>
Output:
Hiểu và sử dụng thuộc tính max-width trong CSS rất quan trọng cho thiết kế responsive. Nó kiểm soát chiều rộng tối đa của các phần tử. Điều này đảm bảo hiển thị nội dung chính xác trên tất cả các viewport. Nó giúp nâng cao kỹ năng CSS và tạo bố cục thân thiện, dễ điều chỉnh.
Supported Browsers: Các trình duyệt được hỗ trợ bởi thuộc tính max-width được liệt kê dưới đây:
- Google Chrome 5.0
- Edge 12
- Mozilla 4.0
- Safari 5.0
- Opera 11.1