openplanning

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

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

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ử BlockInline-Block.
Ví dụ với CSS max-width:
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

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ử BlockInline-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:
Các giá trị có thể của CSS min-width:
«length»
Chỉ định một giá trị cụ thể cho chiều rộng tối thiểu. 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
Trình duyệt sẽ tự động tính toán và lựa chọn giá trị cho min-width.
max-content, min-content, fit-content, stretch

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