ตัวอย่าง
เปลี่ยน boxSizing ทรัพย์สิน:
document.getElementById("myDIV").style.boxSizing = "border-box";
ลองตัวเอง» ความหมายและการใช้งาน
สถานที่ให้บริการ boxSizing ช่วยให้คุณกำหนดองค์ประกอบบางอย่างเพื่อให้พอดีกับพื้นที่ในทางหนึ่ง
ตัวอย่างเช่นถ้าคุณต้องการสอง Bordered ด้านข้างกล่องข้างก็สามารถทำได้โดยการตั้งค่า boxSizing ไป "border-box" กองกำลังนี้เบราว์เซอร์ที่จะทำให้กล่องที่มีความกว้างที่กำหนดไว้และสูงและวางชายแดนและ padding ภายในกล่อง
สนับสนุนเบราว์เซอร์
สถานที่ให้บริการ boxSizing ได้รับการสนับสนุนใน Internet Explorer, Opera, Chrome และ Safari
Firefox สนับสนุนทางเลือกที่ MozBoxSizing คุณสมบัติ
วากยสัมพันธ์
กลับ boxSizing ทรัพย์สิน:
object .style.boxSizing ตั้ง boxSizing ทรัพย์สิน:
object .style.boxSizing="content-box|border-box|initial|inherit"
ค่าทรัพย์สิน
| ความคุ้มค่า | ลักษณะ |
|---|---|
| content-box | ค่ามาตรฐาน นี่คือการทำงานของความกว้างและความสูงตามที่ระบุโดย CSS2.1 ระบุความกว้างและความสูง (and min/max properties) นำไปใช้กับความกว้างและความสูงตามลำดับของกล่องเนื้อหาขององค์ประกอบ ช่องว่างภายในและชายแดนขององค์ประกอบที่มีออกมาวางและวาดนอกความกว้างและความสูงที่กำหนด |
| border-box | ระบุความกว้างและความสูง (and min/max properties) ในองค์ประกอบนี้ตรวจสอบกล่องชายแดนขององค์ประกอบ นั่นคือการขยายหรือพรมแดนใด ๆ ที่ระบุในองค์ประกอบที่มีออกมาวางและวาดภายในความกว้างที่ระบุนี้และความสูง ความกว้างและความสูงของเนื้อหาที่มีการคำนวณโดยการลบชายแดนและขยายความกว้างของด้านที่เกี่ยวข้องจากที่ระบุ 'กว้าง' และ 'สูง' คุณสมบัติ |
| initial | ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น |
| inherit | สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก |
รายละเอียดทางเทคนิค
| ราคาเริ่มต้น: | เนื้อหากล่อง |
|---|---|
| กลับค่า: | เชือกคิดเป็นกล่องขนาดทรัพย์สินขององค์ประกอบ |
| CSS รุ่น | CSS3 |
หน้าเว็บที่เกี่ยวข้อง
อ้างอิง CSS: box-sizing property
<สไตล์วัตถุ