Các giá trị min-contentvà max-contentgiá trị được tính như thế nào trong CSS?

Và chiều nội tại nghĩa là gì?

Lưu ý: "chiều rộng" trong văn bản này đề cập đến "chiều rộng logic", không phải của CSS width; nghĩa là, các giá trị cũng hợp lệ cho CSS height, nếu hướng ngôn ngữ là dọc (như ngôn ngữ Đông-Á) hoặc trong flexbox hoặc lưới. min-contentvà max-contentlà giá trị hợp lệ cho width, height, min-width, min-height, max-width, max-heightvà tài sản thậm chí nhiều hơn (như flex-basis).

Kích thước nội tại của một hộp là gì?

CSS định cỡ cấp độ 3 đã giới thiệu khái niệm về kích thước nội tại - đối lập với ngoại tại . Một bên ngoài kích thước của hộp được tính trên hộp mẹ của hộp. Ví dụ, người width: 80%ta nói rằng một chiều bên ngoài vì widthchủ thể phụ thuộc vào widthhộp chứa nó.

Ngược lại với điều đó, width: min-contentđược cho là nội tại vì chiều rộng của hộp được tính trên kích thước của nội dung mà chính hộp chứa.

Nội tại kích thước là tài sản của bản thân hộp, kích thước bên ngoài chỉ có sẵn nếu hộp được đặt trong tài liệu và trong một bối cảnh cho phép các giá trị được tính toán. Ví dụ, trong CSS-flow (chế độ bố cục CSS cổ điển), như bạn có thể biết, height: 20%chỉ có hiệu lực nếu heightđược xác định trong phần tử mẹ (tức là nó có thể kế thừa); đó là trường hợp của thứ nguyên bên ngoài không thể tính toán được (khi giá trị bên ngoài không có sẵn, CSS dự phòng về tương đương nội tại của nó). Thay vào đó height: min-contentluôn có thể tính toán được, vì nó là bản chất của chính hộp và nó luôn giống nhau bất kể vị trí của hộp (hoặc không có hộp) trong tài liệu.

Định nghĩa của min-contentvà max-contentđã thay đổi nhiều lần trong nhiều năm nhưng kết quả luôn giữ nguyên, và nó khá dễ hiểu. Ban đầu, chúng được cộng đồng yêu cầu làm từ khóa width, có giá trị được tính toán sẽ khớp với chiều rộng của hộp khi hộp được nhập float. Và thực sự, định nghĩa của hai thuộc tính này ban đầu dựa trên hành vi của float; bây giờ chúng được định nghĩa chung chung hơn như sau:

min-content

https://www.w3.org/TR/css-sizing-3/#min-content

Kích thước nhỏ nhất mà hộp có thể có mà không dẫn đến tràn. Có thể tránh được bằng cách chọn kích thước lớn hơn.

Nói cách khác, chiều rộng nhỏ nhất của hộp mà nội dung của hộp không tràn hộp .

Trên thực tế, một cách tốt để hình dung điều này là sử dụng float.

/* the computed width of #red in this example 
   equals to specifying #red { width: min-content } */
#blue        { width: 0px; }
#blue > #red { float: left; }

(Nguồn GIF: http://jsfiddle.net/6srop4zu/ )

Trong GIF ở trên, chiều rộng nội dung tối thiểu của hộp màu đỏ bằng chiều rộng của hộp màu đỏ tại thời điểm chiều rộng của hộp màu xanh là 0px (234px trong GIF, có thể khác trong jsfiddle).

Như bạn có thể thấy, nếu hộp màu đỏ được làm nhỏ hơn, từ đó supercalifragilisticexpialidocioussẽ tràn vào hộp màu đỏ, do đó trong trường hợp này, từ này min-contentbằng chiều rộng của từ cụ thể đó, vì nó là từ chiếm nhiều không gian nhất theo chiều ngang.

max-content

https://www.w3.org/TR/css-sizing-3/#max-content

Kích thước "lý tưởng" của một hộp trong một trục nhất định khi có không gian khả dụng vô hạn. Thông thường, đây là kích thước nhỏ nhất mà hộp có thể lấy theo trục đó trong khi vẫn vừa vặn xung quanh nội dung của nó, tức là giảm thiểu không gian chưa được lấp đầy trong khi tránh tràn.

/* the computed width of #red in this example
   equals to specifying #red { width: max-content } */

#blue        { width: 99999999999999999px; } /* ~infinite */
#blue > #red { float: left; }

(Nguồn GIF: http://jsfiddle.net/nktsrzvg/ )

Trong GIF ở trên, chiều rộng nội dung tối đa của hộp màu đỏ bằng chiều rộng của hộp màu đỏ khi chiều rộng của hộp màu xanh lam là vô hạn (386px trong GIF, có thể khác trong jsfiddle).

Ở đây, hộp màu đỏ tận dụng hoàn toàn không gian có sẵn trên trục x trong hộp màu xanh lam, nhưng không lãng phí nó. Nội dung được phép mở rộng trên trục có liên quan mà không bị hạn chế và hộp màu đỏ bao bọc chúng và tại điểm mở rộng tối đa.

Thế còn fit-content, stretchvà những người khác? Các thuộc tính này hiện đang được xem xét lại và do đó chúng không ổn định (ngày: tháng 7 năm 2018). Chúng sẽ được thêm vào đây khi chúng trưởng thành hơn một chút (hy vọng là sẽ sớm).

Tôi thấy @Wes trả lời rất rõ ràng và thấu đáo. Nhưng đối với bất kỳ ai đang tìm kiếm một thông tin ngắn gọn:

nội dung tối thiểu:

chiều rộng tối thiểu mà một nội dung (một nhóm từ) có thể có. Nó có nghĩa là chiều rộng của từ lớn nhất trong nội dung.

thí dụ:

hi

this 

is

biggest-word-in-the-content

<------- min-content ------>

nội dung tối đa:

chiều rộng tối đa mà một nội dung (một nhóm từ) có thể có. Nó có nghĩa là chiều rộng của nội dung khi tất cả các từ được sắp xếp cùng nhau trên một dòng.

thí dụ:

hi this is a content without considering any line breaks.

<---------------------- max-content ------------------->