ในการสร้างเค้าโครงขนาดกล่องโดยใช้ CSS3 โค้ดจะเป็นดังนี้ -
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.container{
width: 500px;
border:8px solid rgb(35, 0, 100);
}
.border {
box-sizing: border-box;
width: 100%;
height: 100px;
border: 4px solid rgb(4, 97, 54);
}
.content {
width: 100%;
height: 100px;
padding: 50px;
border: 4px solid rgb(255, 0, 191);
box-sizing: content-box;
}
</style>
</head>
<body>
<h1>Box sizing layout example</h1>
<div class="container">
<div class="border">This div has 100% width and box-sizing property set to border
box</div>
<br>
<div class="content">This div also has 100% width but has the box-sizing property set to
content box</div>
</div>
</body>
</html> ผลลัพธ์
รหัสข้างต้นจะสร้างผลลัพธ์ต่อไปนี้ -
