Saiz sempadan CSS3
Atribut bersaiz kotak
membolehkan elemen tertentu ditakrifkan dengan cara khusus yang sepadan dengan kawasan tertentu.
Nilai lalai: content-box
Sintaks JavaScript: object.style.boxSizing="border-box"
Syntax
saiz kotak: kotak kandungan|kotak-sempadan|warisan;
kotak kandungan: Lebar dan tinggi digunakan pada kotak kandungan elemen masing-masing. Melukis pelapik dan sempadan elemen di luar lebar dan ketinggiannya.
kotak sempadan: Set lebar dan ketinggian untuk elemen menentukan kotak sempadan elemen. Iaitu, sebarang padding dan sempadan yang ditentukan untuk elemen akan dilukis dalam lebar dan ketinggian yang ditetapkan. Lebar dan tinggi kandungan diperoleh dengan menolak sempadan dan pelapik masing-masing daripada lebar dan tinggi yang ditetapkan.
warisan: Menentukan bahawa nilai atribut saiz kotak harus diwarisi daripada elemen induk.
Jika saiz kotak: kotak sempadan; ditetapkan pada elemen, padding (padding) dan sempadan (sempadan) turut disertakan dalam lebar dan tinggi:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.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;
}
</style>
</head>
<body>
<div class="div1">两个 div 现在是一样大小的!</div>
<br>
<div class="div2">php中文网</div>
</body>
</html>
Tidak menggunakan sifat bersaiz kotak CSS3
Secara lalai, lebar dan tinggi sesuatu elemen dikira seperti berikut:
lebar(lebar) + pelapik(birai dalam) + sempadan(sempadan) = lebar sebenar elemen
tinggi(tinggi) + pelapik(birai dalam) + sempadan(sempadan) = ketinggian sebenar elemen
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="div1">这个是个较小的框 (width 为 300px ，height 为 100px)。</div>
<br>
<div class="div2">这个是个较大的框 (width 为 300px ，height 为 100px)。</div>
</body>
</html> 
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
