openplanning

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

  1. CSS max-width
  2. CSS min-width

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