Hướng dẫn và ví dụ CSS max-width và 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ử Block và Inline-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ử 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:
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
Các hướng dẫn CSS
- Các đơn vị tính trong CSS
- Hướng dẫn và ví dụ CSS Selectors cơ bản
- Hướng dẫn và ví dụ CSS Attribute Selector
- Hướng dẫn và ví dụ CSS Selectors kết hợp
- Hướng dẫn và ví dụ CSS Backgrounds
- Hướng dẫn và ví dụ CSS Opacity
- Hướng dẫn và ví dụ CSS Padding
- Hướng dẫn và ví dụ CSS Margins
- Hướng dẫn và ví dụ CSS Borders
- Hướng dẫn và ví dụ CSS Outline
- Hướng dẫn và ví dụ CSS box-sizing
- Hướng dẫn và ví dụ CSS max-width và min-width
- Các từ khóa min-content, max-content, fit-content, stretch trong CSS
- Hướng dẫn và ví dụ CSS Links
- Hướng dẫn và ví dụ CSS Fonts
- Tìm hiểu về Generic Font Family trong CSS
- Hướng dẫn và ví dụ CSS @font-face
- Hướng dẫn và ví dụ CSS Align
- Hướng dẫn và ví dụ CSS Cursors
- Hướng dẫn và ví dụ CSS Overflow
- Hướng dẫn và ví dụ CSS Lists
- Hướng dẫn và ví dụ CSS Tables
- Hướng dẫn và ví dụ CSS visibility
- Hướng dẫn và ví dụ CSS Display
- Hướng dẫn và ví dụ CSS Grid Layout
- Hướng dẫn và ví dụ CSS Float và Clear
- Hướng dẫn và ví dụ CSS Position
- Hướng dẫn và ví dụ CSS line-height
- Hướng dẫn và ví dụ CSS text-align
- Hướng dẫn và ví dụ CSS text-decoration
Show More
