Tìm hiểu về thuộc tính max - width của CSS chỉ trong 2 phút.

Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay

Chào các bạn, hôm nay chúng ta lại gặp nhau trong một loạt bài hướng dẫn dùng CSS cơ bản của Giuseart.com. Hôm nay mình sẽ giới thiệu đến các bạn một thuộc tính hay được sử dụng trong CSS, đó là thuộc tính max-width. Cùng tìm hiểu nhé!

Khái niệm, định nghĩa

Mặc định các khối phần tử trong HTML sẽ có chiều rộng tối đa (full viền, trải dài từ trái sang phải). Tuy nhiên, trong một số trường hợp, ta cần phải giới hạn chiều rộng (theo px, em hoặc %) cho một số phần tử để nó hiển thị đúng theo yêu cầu thiết kế , ta phải dùng tới thuộc tính max-width. Max-width trong CSS dùng để thiết lập chiều rộng tối đa cho một phần tử.

Cấu trúc:

tag{
max-width:giá trị;
}

tag{

max-width:giá trị;

}

Trong đó, tag là tất cả phần tử HTML, ngoài trừ các phần tử table. Các giá trị có thể sử dụng cho thuộc tính max-width như sau:

Đơn vị: (max-width: 50px): chiều rộng tính từ mép ngoài cùng bên trái của phần tử, đơn vị có thể là px, em hoặc %,…
None: (max-width: none): không sử dụng chiều rộng lớn nhất, đây là dạng mặc định của phần tử.
Inherit: (max-width: inherit): xác định thừa hưởng thuộc tính từ phần tử cha (phần tử bao ngoài).

Ví dụ thuộc tính max-width trong CSS

Bạn có thể theo dõi ví dụ sau đây để hiểu cách hoạt động của thuộc tính max-width trong CSS:

Ví dụ 1: Đặt giá trị max-width: 500px cho phần tử.

<!DOCTYPE html>
<html>
<head>
<style>
div.ex2 {
    max-width:500px;
    margin: auto;
    border: 3px solid #73AD21;
}
</style>
</head>
<body>
    <div class="ex2">Đoạn này có chiều rộng tối đa là 500px và có bo viền độ dày 3px</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

div.ex2 {

max-width:500px;

margin: auto;

border: 3px solid #73AD21;

}

</style>

</head>

<body>

<div class="ex2">Đoạn này có chiều rộng tối đa là 500px và có bo viền độ dày 3px</div>

</body>

</html>

Đoạn này có chiều rộng tối đa là 500px và có bo viền độ dày 3px

Ví dụ 2: Đặt giá trị max-width: 200px cho phần tử.

<!DOCTYPE html>
<html>
<head>
<style>
div.ex2 {
    max-width:200px;
    margin: auto;
    border: 3px solid #73AD21;
}
</style>
</head>
<body>
    <div class="ex2">Đoạn này có chiều rộng tối đa là 200px và có bo viền độ dày 3px</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

div.ex2 {

max-width:200px;

margin: auto;

border: 3px solid #73AD21;

}

</style>

</head>

<body>

<div class="ex2">Đoạn này có chiều rộng tối đa là 200px và có bo viền độ dày 3px</div>

</body>

</html>

Đoạn này có chiều rộng tối đa là 500px và có bo viền độ dày 3px

Điều kiện sử dụng

Thuộc tính max-width sử dụng được trên các trình duyệt Opera, Chrome, Cốc Cốc, IE (ngoại trừ IE6; IE8 vẫn dùng được nhưng phải có !Doctype.

Khi đã sử dụng thuộc tính max-width, chiều rộng của box sẽ không vượt qua giá trị của max-width.

Thật dễ hiểu phải không nào, cái này rất quan trọng để sau này ta có thể áp dụng vào Responsive cho Website nên các bạn bạn cần phải nhắm chắc và hiểu rõ bản chất của thuộc tính này…