ให้เรตสมาชิก: 5 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งาน
 
Boxsize
Boxsize

 

CSS Box Sizing คืออะไร

 

    CSS ย่อมาจาก Cascading Style Sheet หรือ Style sheet ที่ใช้กำหนดรูปแแบหน้าตาของไฟล์ Htmlมีสมบัติ Cascading คือ คำสั่งที่อยู่บนสุดจะทำก่อนเสมอ สามารถใช้กำหนดรูปแบบ Font สี และอื่นๆที่แสดงบนหน้าเว็บไชต์ทั้งหมด สามารถเขียน CSS ไว้ในไฟล์ HTML เลยหรือแยกเป็นไฟล์ style sheet ต่างหากแล้วเรียกใช้ภายหลังก็ได้

     CSS Box Sizing  คือ การกำหนดขนาดของกล่อง Element ที่ครอบ Element นั้นอยู่ 

 

หากไม่มีคุณสมบัติของ CSS box-sizing

     width + padding + border คือ ความกว้างที่แท้จริงของ Element 
     height + padding + border คือ ความสูงที่แท้จริงของ Element 

อธิบาย Boxsizeอธิบาย Boxsize

 

ตัวอย่าง 

<!DOCTYPE html>
<html>
<head>
<style> 

.div1 {
    width: 300px;
    height: 70px;    
    padding: 60px;
    border: 1px solid red;
}
</style>
</head>
<body>

<br>
<div class="div1">(width is also 300px and height is 70px).</div>

</body>
</html>

 

ผลลัพธ์

ผลลัพธ์
ผลลัพธ์

 

Reference : https://www.w3schools.com/css

 

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML css bootstrap

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
งานประจำวันที่ 21 พฤศจิกายน 2561
โดย pprn พ 21 พ.ย. 2018 10:15 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
1
พ 21 พ.ย. 2018 10:15 am โดย pprn
งานประจำวันที่ 21 พฤศจิกายน 2561
โดย tatiya พ 21 พ.ย. 2018 10:09 am บอร์ด M065 - ตติยะ นาชัย
0
3
พ 21 พ.ย. 2018 10:09 am โดย tatiya
งานประจำวันที่ 21 พฤศจิกายน 2561
โดย prakon พ 21 พ.ย. 2018 9:56 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
0
1
พ 21 พ.ย. 2018 9:56 am โดย prakon
งานประจำวันที่ 21 พฤศจิกายน 2561
โดย tai14 พ 21 พ.ย. 2018 9:53 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
0
1
พ 21 พ.ย. 2018 9:53 am โดย tai14
งานประจำวันที่ 21 พฤษจิกายน 2561
โดย Ittichai_chupol พ 21 พ.ย. 2018 9:49 am บอร์ด M070 - อิทธิชัย ชูผล
0
1
พ 21 พ.ย. 2018 9:49 am โดย Ittichai_chupol
งานประจำวันที่ 21 พฤศจิกายน 2561
โดย จันนุสรณ์ ดีแก่ พ 21 พ.ย. 2018 9:43 am บอร์ด MT28 - จันนุสรณ์ ดีแก่
0
3
พ 21 พ.ย. 2018 9:43 am โดย จันนุสรณ์ ดีแก่
งานประจำวันที่ 21 พฤศจิการยน 2561
โดย ธวัชชัย แสนหาญ พ 21 พ.ย. 2018 9:43 am บอร์ด MT27 - ธวัชชัย แสนหาญ
0
2
พ 21 พ.ย. 2018 9:43 am โดย ธวัชชัย แสนหาญ
งานประจำวันที่ 21 พฤศจิกายน 2561
โดย Aussadawut พ 21 พ.ย. 2018 9:42 am บอร์ด M072 - อัษฎาวุฒิ ยิ่งนคร
0
1
พ 21 พ.ย. 2018 9:42 am โดย Aussadawut
งานประจำวันที่ 21 พฤศจิกายน 2561
โดย nice_13 พ 21 พ.ย. 2018 9:40 am บอร์ด M071 - พิชญ์สินี คงจร
0
2
พ 21 พ.ย. 2018 9:40 am โดย nice_13
ภาษาซี (C/C++) กับ โจทย์ทางคณิตศาสตร์ (3) จงเขียนโปรแกรมรับค่าของมุม เพื่อแสดงค่าของ Sin Cos Tan
โดย Aussadawut อ 20 พ.ย. 2018 11:53 pm บอร์ด Share Knowledge
0
16
อ 20 พ.ย. 2018 11:53 pm โดย Aussadawut
R - mod_mzc_search ปรับ module ให้ใช้งานใน Mooziicart
โดย pprn อ 20 พ.ย. 2018 11:26 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
3
อ 20 พ.ย. 2018 11:26 pm โดย pprn
ภาษาซี (C/C++) กับ โจทย์ทั่วไป (1) รับค่าตัวเลขใดก็ได้ และเมื่อรับค่าเลข 0 ให้จบการทำงานของโปรแกรม...
โดย Aussadawut อ 20 พ.ย. 2018 10:43 pm บอร์ด Share Knowledge
0
15
อ 20 พ.ย. 2018 10:43 pm โดย Aussadawut
R - mod_mzc_latest_products ปรับ module ให้ใช้งานใน Mooziicart
โดย pprn อ 20 พ.ย. 2018 7:19 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
7
อ 20 พ.ย. 2018 7:19 pm โดย pprn
Built-in functions (4)ฟังก์ชัน Strpos
โดย จันนุสรณ์ ดีแก่ อ 20 พ.ย. 2018 6:40 pm บอร์ด PHP Knowledge
0
10
อ 20 พ.ย. 2018 6:40 pm โดย จันนุสรณ์ ดีแก่
Data Time Function เบื้องต้น
โดย จันนุสรณ์ ดีแก่ อ 20 พ.ย. 2018 6:26 pm บอร์ด PHP Knowledge
0
10
อ 20 พ.ย. 2018 6:26 pm โดย จันนุสรณ์ ดีแก่
การโหลด geckodriver
โดย ธวัชชัย แสนหาญ อ 20 พ.ย. 2018 5:32 pm บอร์ด Share Knowledge
0
17
อ 20 พ.ย. 2018 5:32 pm โดย ธวัชชัย แสนหาญ
การติดตั้ง selenium บน PyCharm
โดย ธวัชชัย แสนหาญ อ 20 พ.ย. 2018 4:54 pm บอร์ด Python Knowledge
0
17
อ 20 พ.ย. 2018 4:54 pm โดย ธวัชชัย แสนหาญ
Math Function พร้อมตัวอย่างเบื้องต้น
โดย จันนุสรณ์ ดีแก่ อ 20 พ.ย. 2018 4:50 pm บอร์ด PHP Knowledge
0
12
อ 20 พ.ย. 2018 4:50 pm โดย จันนุสรณ์ ดีแก่
VDO Training RTP
โดย tai14 อ 20 พ.ย. 2018 3:34 pm บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
0
7
อ 20 พ.ย. 2018 3:34 pm โดย tai14
วิธีเชื่อ App ที่เขี่ยนเข้ากับ data
โดย zinxinsin อ 20 พ.ย. 2018 3:11 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
6
อ 20 พ.ย. 2018 3:11 pm โดย zinxinsin