โดย Parichat » 09/01/2018 3:01 pm
CSS box model เป็นกล่องที่ล้อมรอบทุกองค์ประกอบของ HTML ประกอบด้วยขอบ เส้นขอบ ช่องว่างและเนื้อหาที่แท้จริง ภาพด้านล่างแสดงให้เห็นถึงรูปแบบกล่อง
- 12.JPG (34.33 KiB) Viewed 1551 times
คำอธิบายส่วนต่าง ๆ
- 1.Content เนื้อหาของช่องที่มีข้อความและรูปภาพปรากฏขึ้น
2.Padding พื้นที่รอบ ๆ เนื้อหา padding มีความโปร่งใส
3.Border เส้นขอบที่ล้อมรอบช่องว่างและเนื้อหา
4.Margin ลบพื้นที่นอกพรมแดน ขอบมีความโปร่งใส
ตัวอย่าง
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #e6fff2;
width: 300px;
border: 25px solid #ff99ff;
padding: 25px;
margin: 25px;
}
</style>
</head>
<body>
<h2>ทดสอบการใช้ Box Model</h2>
<p>สวัสดีเราชื่อ MindPHP</p>
<div><h1>ยินดีที่ได้รู้จักพวกคุณ</h1>
<h2>ยินดีที่ได้รู้จักพวกคุณ</h2>
<h2>ยินดีที่ได้รู้จักพวกคุณ</h2>
<h2>ยินดีที่ได้รู้จักพวกคุณ</h2>
<h2>ยินดีที่ได้รู้จักพวกคุณ</h2></div>
</body>
</html>
- 85.JPG (39.88 KiB) Viewed 1551 times
อ้างอิง:
https://www.w3schools.com/css/css_boxmodel.asp
[b][size=150][color=#FF00BF][url=https://www.mindphp.com/forums/viewforum.php?f=73]CSS[/url] box model[/color][/size][/b] เป็นกล่องที่ล้อมรอบทุกองค์ประกอบของ HTML ประกอบด้วยขอบ เส้นขอบ ช่องว่างและเนื้อหาที่แท้จริง ภาพด้านล่างแสดงให้เห็นถึงรูปแบบกล่อง
[attachment=1]12.JPG[/attachment]
[b][color=#FF40BF]คำอธิบายส่วนต่าง ๆ[/color][/b]
[list]1.Content เนื้อหาของช่องที่มีข้อความและรูปภาพปรากฏขึ้น
2.Padding พื้นที่รอบ ๆ เนื้อหา padding มีความโปร่งใส
3.Border เส้นขอบที่ล้อมรอบช่องว่างและเนื้อหา
4.Margin ลบพื้นที่นอกพรมแดน ขอบมีความโปร่งใส[/list]
[b][color=#FF0000]ตัวอย่าง[/color][/b]
[code]<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #e6fff2;
width: 300px;
border: 25px solid #ff99ff;
padding: 25px;
margin: 25px;
}
</style>
</head>
<body>
<h2>ทดสอบการใช้ Box Model</h2>
<p>สวัสดีเราชื่อ MindPHP</p>
<div><h1>ยินดีที่ได้รู้จักพวกคุณ</h1>
<h2>ยินดีที่ได้รู้จักพวกคุณ</h2>
<h2>ยินดีที่ได้รู้จักพวกคุณ</h2>
<h2>ยินดีที่ได้รู้จักพวกคุณ</h2>
<h2>ยินดีที่ได้รู้จักพวกคุณ</h2></div>
</body>
</html>[/code]
[color=#FF0040][b]ผลลัพธ์[/b][/color]
[attachment=0]85.JPG[/attachment]
อ้างอิง: [url]https://www.w3schools.com/css/css_boxmodel.asp[/url]