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 現(xiàn)在是一樣大小的!</div>
<br>
<div class="div2">php中文網(wǎng)</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> 
