บทช่วยสอน CSS3 กล่องขนาดคุณสมบัติ ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ ตัวอย่าง,สนับสนุนเบราว์เซอร์,แอตทริบิวต์คำจำกัดความและคำแนะนำ,ไวยากรณ์,บทความที่เกี่ยวข้อง,

CSS3 กล่องขนาดคุณสมบัติ

ตัวอย่าง

สองกล่องชายแดนกำหนด:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}

ลอง»

สนับสนุนเบราว์เซอร์

ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์แรกที่สนับสนุนหมายเลขรุ่นของทรัพย์สิน

ทันทีหลังจาก -webkit- ดิจิตอล -ms- หรือ -moz- ที่ผ่านมาในการสนับสนุนของคำนำหน้าแอตทริบิวต์หมายเลขรุ่นเบราเซอร์แรก

属性
box-sizing 10.0
4.0 -webkit-
8.0 29.0
2.0 -moz-
5.1
3.2 -webkit-
9.5

แอตทริบิวต์คำจำกัดความและคำแนะนำ

คุณสมบัติกล่องปรับขนาดช่วยให้คุณกำหนดองค์ประกอบบางอย่างในทางที่จะปรับให้เข้ากับพื้นที่ที่กำหนด

ตัวอย่างเช่นถ้าคุณต้องการที่จะวางสองเคียงข้างกับกล่องชายแดนโดยกล่องปรับขนาดที่ "ชายแดนกล่อง" นี้สามารถทำให้เบราว์เซอร์แสดงกล่องที่มีความกว้างและความสูงที่กำหนดและชายแดนและการขยายเข้าไปในกล่อง

เริ่มต้น: เนื้อหากล่อง
มรดก: ไม่
เวอร์ชัน: CSS3
ไวยากรณ์ javascript: วัตถุ .style.boxSizing = "border-กล่อง"


ไวยากรณ์

กล่องปรับขนาด: เนื้อหากล่อง | ชายแดนกล่อง | สืบทอด:

ความคุ้มค่า คำอธิบาย
เนื้อหากล่อง นี่คือการทำงานของความกว้างและความสูงที่ระบุ CSS2.1 องค์ประกอบความกว้างและความสูง (นาที / แอตทริบิวต์สูงสุด) เหมาะสำหรับการระบุความกว้างและความสูงของกล่อง padding และเส้นขอบและการวาดภาพรูปแบบที่ระบุความกว้างและความสูงขององค์ประกอบยกเว้น
ชายแดนกล่อง ระบุความกว้างและความสูง (นาที / แอตทริบิวต์แม็กซ์) เพื่อตรวจสอบกล่องชายแดนองค์ประกอบของ ในคำอื่น ๆ องค์ประกอบที่ระบุไว้กว้างและความสูงรวมทั้งการกำหนดของช่องว่างภายในและชายแดน ความกว้างและความสูงของเนื้อหาลบด้านที่เกี่ยวข้องของชายแดนและกรอกคำนวณจากความกว้าง "width" และ "ความสูง" แอตทริบิวต์ที่ระบุ
สืบทอด ราคาระบุคุณสมบัติกล่องขนาดควรได้รับการสืบทอดมาจากองค์ประกอบหลัก


บทความที่เกี่ยวข้อง

CSS3 กวดวิชา: CSS3 ส่วนติดต่อผู้ใช้

CSS3 กล่องขนาดคุณสมบัติ
10/30