กวดวิชาCSS

CSS HOME บทนำ CSS ไวยากรณ์ CSS ตัวเลือก CSS CSS วิธีการ ความคิดเห็น CSS CSS สี พื้นหลัง CSS CSS Borders CSS Margins CSS Padding CSS ความสูง/ความกว้าง โมเดลกล่อง CSS CSS Outline CSS Text แบบอักษร CSS ไอคอน CSS ลิงค์ CSS รายการ CSS ตาราง CSS จอแสดงผล CSS CSS ความกว้างสูงสุด ตำแหน่ง CSS CSS Z-ดัชนี CSS Overflow CSS Float CSS Inline-block CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS ความทึบ แถบนำทาง CSS CSS Dropdowns CSS Image Gallery CSS Image Sprites CSS Attr Selectors แบบฟอร์ม CSS CSS Counters เค้าโครงเว็บไซต์ CSS หน่วย CSS ความจำเพาะของ CSS CSS !สำคัญ ฟังก์ชันคณิตศาสตร์ CSS

CSS ขั้นสูง

CSS มุมโค้งมน รูปภาพ CSS Border พื้นหลัง CSS CSS สี คำหลักสี CSS CSS Gradients CSS Shadows เอฟเฟกต์ข้อความ CSS CSS Web Fonts การแปลง CSS 2D การแปลง CSS 3D การเปลี่ยน CSS ภาพเคลื่อนไหว CSS CSS Tooltips CSS สไตล์รูปภาพ ภาพสะท้อน CSS CSS วัตถุพอดี CSS วัตถุตำแหน่ง CSS Masking ปุ่ม CSS CSS Pagination CSS หลายคอลัมน์ ส่วนต่อประสานผู้ใช้ CSS ตัวแปร CSS ขนาดกล่อง CSS CSS Media Queries ตัวอย่าง CSS MQ CSS Flexbox

CSS Responsive

แนะนำ RWD วิวพอร์ต RWD RWD Grid View แบบสอบถามสื่อ RWD รูปภาพ RWD วิดีโอ RWD กรอบงาน RWD เทมเพลต RWD

CSS Grid

บทนำกริด คอนเทนเนอร์กริด รายการกริด

CSS SASS

กวดวิชา SASS

ตัวอย่างCSS

เทมเพลต CSS ตัวอย่าง CSS แบบทดสอบ CSS แบบฝึกหัด CSS ใบรับรอง CSS

การอ้างอิงCSS

การอ้างอิง CSS ตัวเลือก CSS ฟังก์ชัน CSS CSS อ้างอิง Aural CSS Web Safe Fonts CSS Animable หน่วย CSS ตัวแปลง CSS PX-EM CSS สี ค่าสี CSS ค่าดีฟอลต์ CSS รองรับเบราว์เซอร์ CSS

ขนาดกล่อง CSS


ขนาดกล่อง CSS

คุณสมบัติ CSS box-sizingช่วยให้เราสามารถใส่ช่องว่างภายในและเส้นขอบในความกว้างและความสูงทั้งหมดขององค์ประกอบ


ไม่มี CSS box-sizing Property

ตามค่าเริ่มต้น ความกว้างและความสูงขององค์ประกอบจะคำนวณดังนี้:

width + padding + border = ความกว้างที่แท้จริงขององค์ประกอบ
ความสูง + padding + border = ความสูงที่แท้จริงขององค์ประกอบ

ซึ่งหมายความว่า: เมื่อคุณกำหนดความกว้าง/ความสูงขององค์ประกอบ องค์ประกอบมักจะปรากฏใหญ่กว่าที่คุณกำหนด (เนื่องจากเส้นขอบและช่องว่างภายในขององค์ประกอบถูกเพิ่มเข้ากับความกว้าง/ความสูงที่ระบุขององค์ประกอบ)

ภาพประกอบต่อไปนี้แสดงสอง <div> องค์ประกอบที่มีความกว้างและความสูงที่ระบุเหมือนกัน:

div นี้เล็กกว่า (กว้าง 300px และสูง 100px)

div นี้ใหญ่กว่า (ความกว้าง 300px และความสูง 100px ด้วย)

องค์ประกอบ <div> สองรายการด้านบนจบลงด้วยขนาดที่แตกต่างกันในผลลัพธ์ (เนื่องจาก div2 มีการระบุช่องว่างภายใน):

ตัวอย่าง

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

คุณสมบัติbox-sizingช่วยแก้ปัญหานี้ได้



ด้วย CSS box-sizing Property

คุณสมบัติbox-sizingนี้ช่วยให้เราสามารถรวมช่องว่างภายในและเส้นขอบในความกว้างและความสูงทั้งหมดขององค์ประกอบ

หากคุณตั้งค่าbox-sizing: border-box;องค์ประกอบ ช่องว่างภายในและเส้นขอบจะรวมอยู่ในความกว้างและความสูง:

divs ทั้งสองมีขนาดเท่ากันในขณะนี้!

ไชโย!

นี่คือตัวอย่างเดียวกันกับข้างต้น โดยbox-sizing: border-box; เพิ่มองค์ประกอบ <div> ทั้งสองรายการ:

ตัวอย่าง

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

เนื่องจากผลลัพธ์ของการใช้box-sizing: border-box;นั้นดีขึ้นมาก นักพัฒนาหลายคนต้องการให้องค์ประกอบทั้งหมดบนหน้าเว็บของตนทำงานในลักษณะนี้

โค้ดด้านล่างช่วยให้แน่ใจว่าองค์ประกอบทั้งหมดมีขนาดที่เข้าใจง่ายขึ้น เบราว์เซอร์จำนวนมากใช้box-sizing: border-box;สำหรับองค์ประกอบของฟอร์มจำนวนมากอยู่แล้ว (แต่ไม่ใช่ทั้งหมด ซึ่งเป็นสาเหตุที่ความกว้างของอินพุตและพื้นที่ข้อความดูแตกต่างกัน: 100%;)

การใช้สิ่งนี้กับองค์ประกอบทั้งหมดนั้นปลอดภัยและชาญฉลาด:

ตัวอย่าง

* {
  box-sizing: border-box;
}

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

Property Description
box-sizing Defines how the width and height of an element are calculated: should they include padding and borders, or not