Hướng dẫn và ví dụ CSS max-width và min-width

Xem thêm các chuyên mục:

Các hướng dẫn CSS

CSS max-width
CSS min-width

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.

Facebook

1- CSS max-width

CSS max-width được sử dụng để thiết lập chiều rộng lớn nhất cho một phần tử. Nó ngăn chặn chiều rộng của phần tử vượt quá một giá trị được chỉ định.

Chú ý: CSS width, min-width, max-width chỉ có tác dụng đối với các phần tử Block và Inline-Block.

HTML Block/Inline Element

Ví dụ với CSS max-width:

Try It!

Syntax


/* «length» value */
max-width: 3.5em;

/* «percentage» value */
max-width: 75%;

/* Keyword values */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: fill-available;

/* Global values */
max-width: inherit;
max-width: initial;
max-width: unset;

Các giá trị có thể của CSS max-width:

«length»

Chỉ định một giá trị cụ thể cho chiều rộng tối đa. Chẳng hạn 150px, 30cm,...

«percentage»

Giá trị phần trăm so với chiều rộng của phần tử cha.

none

Chiều rộng của phần tử không bị giới hạn.

max-content, min-content, fit-content, stretch

Các từ khóa min-content, max-content, fit-content, stretch trong CSS

2- CSS min-width

CSS min-width được sử dụng để thiết lập chiều rộng nhỏ nhất cho một phần tử. Nó ngăn chặn chiều rộng của phần tử nhỏ hơn một giá trị được chỉ định.

Chú ý: CSS width, min-width, max-width chỉ có tác dụng đối với các phần tử Block và Inline-Block.

Syntax


/* «length» value */
min-width: 3.5em;

/* «percentage» value */
min-width: 75%;

/* Keyword values */
min-width: auto;
min-width: max-content;
min-width: min-content;
min-width: fit-content;
min-width: fill-available;

/* Global values */
min-width: inherit;
min-width: initial;
min-width: unset;

Ví dụ với CSS min-width:

Try It!

Các giá trị có thể của CSS min-width: