CSS box sizing

Module CSS box sizing cho phép bạn chỉ định cách các phần tử vừa khít với nội dung của chúng hoặc vừa khít trong một ngữ cảnh layout cụ thể. Module này định nghĩa các thuộc tính sizing, minimum sizing và maximum sizing, đồng thời mở rộng các thuộc tính sizing của CSS với các từ khóa đại diện cho intrinsic size dựa trên nội dung và extrinsic size dựa trên ngữ cảnh.

Các phần tử có thể được sizing theo hai cách: extrinsically (từ bên ngoài) hoặc intrinsically (từ bên trong). CSS box model định nghĩa các thuộc tính liên quan đến trang để thiết lập kích thước phần tử một cách tường minh, hay còn gọi là "extrinsically", bao gồm các thuộc tính width, height, padding, và margin (cùng với các thuộc tính border được định nghĩa trong module CSS backgrounds and borders). Module CSS box sizing này mở rộng module CSS box model để cho phép phần tử được sizing theo intrinsic — thiết lập kích thước phần tử dựa trên kích thước nội dung của nó.

Các giá trị sizing được giới thiệu trong module này cho phép các phần tử có size containment sử dụng các intrinsic size tường minh, như thể chiều rộng và chiều cao của nội dung trong luồng khớp với intrinsic size tường minh đã chỉ định, thay vì được sizing như thể chúng rỗng.

Module này cũng giới thiệu khả năng định nghĩa aspect ratio cho box của phần tử, nghĩa là trình duyệt có thể tự động điều chỉnh kích thước của phần tử để duy trì aspect ratio đã chỉ định miễn là một trong các kích thước được sizing tự động.

Module logical properties and values đã mở rộng các thuộc tính có sẵn trong các module box model và box sizing để bao gồm các tương đương liên quan đến writing mode của các thuộc tính box model vật lý và intrinsic box sizing tương ứng.