Thuộc tính boxSizing của style

Định nghĩa và cách sử dụng

boxSizing Thuộc tính cho phép bạn định nghĩa một cách cụ thể các phần tử đặc định để khớp với một khu vực cụ thể.

Ví dụ, nếu bạn cần đặt hai khung có viền cạnh nhau, bạn có thể đặt box-sizing thành "border-box". Điều này sẽ làm cho trình duyệt hiển thị khung có chiều rộng và chiều cao đã quy định, và đặt viền và lề nội bộ vào khung.

Xem thêm:

Sách tham khảo CSS:box-sizing 属性

Mô hình

Thay đổi thuộc tính boxSizing:

document.getElementById("myDIV").style.boxSizing = "border-box";

Thử ngay

Cú pháp

Trả về thuộc tính boxSizing:

object.style.boxSizing

Thiết lập thuộc tính boxSizing:

object.style.boxSizing = "content-box|border-box|initial|inherit"

Giá trị thuộc tính

Giá trị Mô tả
content-box

Giá trị mặc định. Đây là hành vi của chiều rộng và chiều cao theo CSS2.1.

Chiều rộng và chiều cao quy định (và thuộc tính min/max) được áp dụng cho chiều rộng và chiều cao của hộp nội dung phần tử.

Viền và lề nội bộ của phần tử được sắp xếp và vẽ ngoài chiều rộng và chiều cao quy định.
border-box

Chiều rộng và chiều cao được thiết lập cho phần tử xác định hộp viền của phần tử.

Nghĩa là, bất kỳ viền và lề nội bộ nào được chỉ định cho phần tử cũng sẽ được vẽ trong chiều rộng và chiều cao đã thiết lập.

Để có được chiều rộng và chiều cao của nội dung, cần trừ đi viền và lề nội bộ từ chiều rộng và chiều cao đã thiết lập.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial。
inherit Từ tính này được kế thừa từ phần tử cha. Xem thêm inherit。

Chi tiết kỹ thuật

Giá trị mặc định: content-box
Giá trị trả về: chuỗi, biểu thị box-sizing 属性。
Phiên bản CSS: CSS3

Hỗ trợ trình duyệt

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ