Hộp kiểu dáng
Thí dụ
Thay đổi thuộc tính boxSize:
document.getElementById("myDIV").style.boxSizing = "border-box";
Định nghĩa và Cách sử dụng
Thuộc tính boxSizing cho phép bạn xác định các phần tử nhất định để phù hợp với một khu vực theo một cách nhất định.
Ví dụ: nếu bạn muốn hai hộp có viền cạnh nhau, bạn có thể đạt được điều đó thông qua việc thiết lập Kích thước hộp thành "hộp viền". Điều này buộc trình duyệt hiển thị hộp với chiều rộng và chiều cao được chỉ định, đồng thời đặt đường viền và phần đệm bên trong hộp.
Hỗ trợ trình duyệt
Property | |||||
---|---|---|---|---|---|
boxSizing | Yes | Yes | Yes | Yes | Yes |
Cú pháp
Trả lại hộp thuộc tính Kích thước:
object.style.boxSizing
Đặt thuộc tính boxSizing:
object.style.boxSizing = "content-box|border-box|initial|inherit"
Giá trị tài sản
Value | Description |
---|---|
content-box | Default value. This is the behavior of width and height as specified by CSS2.1. The specified width and height (and min/max properties) apply to the width and height respectively of the content box of the element. The padding and border of the element are laid out and drawn outside the specified width and height |
border-box | The specified width and height (and min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified 'width' and 'height' properties |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Chi tiết kỹ thuật
Giá trị mặc định: | hộp nội dung |
---|---|
Giá trị trả lại: | Một chuỗi, đại diện cho thuộc tính kích thước hộp của một phần tử |
Phiên bản CSS | CSS3 |
Các trang liên quan
Tham chiếu CSS: thuộc tính box-sizing
❮ Đối tượng phong cách