การขยายองค์ประกอบใน CSS สำหรับ JavaScript

การกำหนดคุณสมบัติ CSS width และ height ไม่ได้รับประกันว่าองค์ประกอบจะมีขนาด ตามที่กำหนด มาดูตัวอย่างกัน

ตัวอย่าง

ขณะนี้ขนาดขององค์ประกอบตรง กับที่กำหนด:

html<div id="elem">
  ข้อความ
</div>

css#elem {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
}

Результат:

ตัวอย่าง

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

html<div id="elem">
  ข้อความ
</div>

css#elem {
  padding: 25px;
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
}

Результат:

ตัวอย่าง

การมีเส้นขอบก็ขยายองค์ประกอบด้วย:

html<div id="elem">
  ข้อความ
</div>

css#elem {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
  border: 20px solid #F0D7A1;
}

Результат:

ตัวอย่าง

คุณสมบัติ box-sizing ช่วยให้เปลี่ยนพฤติกรรมที่อธิบายไว้ข้างต้นได้ สามารถทำให้ทั้ง padding และเส้นขอบไม่ขยายองค์ประกอบ สำหรับสิ่งนี้คุณสมบัตินี้จำเป็นต้อง กำหนดค่าเป็น border-box:

html<div id="elem">
  ข้อความ
</div>

css#elem {
  box-sizing: border-box;
  padding: 20px;
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
  border: 20px solid #F0D7A1;
}

Результат:

ความสำคัญของสิ่งที่อธิบายไว้

จากมุมมองของ JavaScript สถานการณ์ที่อธิบายไว้นี้ ไม่สะดวกนัก เพราะปรากฏว่าเมื่ออ่าน ค่าของคุณสมบัติ width แล้ว เราก็ไม่สามารถ มั่นใจได้เลยว่าองค์ประกอบจะมีความกว้าง เท่านี้พอดี