CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย
Moderator: mindphp, ผู้ดูแลกระดาน
-
Parichat
- PHP VIP Members
- โพสต์: 4859
- ลงทะเบียนเมื่อ: 08/01/2018 10:03 am
โพสต์ที่ยังไม่ได้อ่าน
โดย Parichat »
CSS box model เป็นกล่องที่ล้อมรอบทุกองค์ประกอบของ HTML ประกอบด้วยขอบ เส้นขอบ ช่องว่างและเนื้อหาที่แท้จริง ภาพด้านล่างแสดงให้เห็นถึงรูปแบบกล่อง
- 12.JPG (34.33 KiB) Viewed 1555 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 1555 times
อ้างอิง:
https://www.w3schools.com/css/css_boxmodel.asp
Live Simply, Laugh Often, Love Deeply.....
-
-
- 0 ตอบกลับ
- 1274 แสดง
-
โพสต์ล่าสุด โดย norisa_dl
23/04/2021 1:13 pm
-
-
- 1 ตอบกลับ
- 802 แสดง
-
โพสต์ล่าสุด โดย Aranya
26/01/2021 11:31 am
-
-
- 0 ตอบกลับ
- 2428 แสดง
-
โพสต์ล่าสุด โดย Parichat
13/06/2018 10:58 am
-
-
- 0 ตอบกลับ
- 1518 แสดง
-
โพสต์ล่าสุด โดย wkid
20/05/2022 12:23 pm
สมาชิกกำลังดูบอร์ดนี้: Majestic-12 [Bot] และบุคลทั่วไป 71