Saiz kotak CSS3
Saiz kotak CSS3
Sifat bersaiz kotak CSS3 boleh ditetapkan Sifat lebar dan ketinggian termasuk pelapik (padding) dan sempadan (sempadan).
Tidak menggunakan sifat saiz kotak CSS3
Secara lalai, lebar dan tinggi sesuatu elemen dikira seperti berikut :
lebar(lebar) + pelapik(margin dalam) + sempadan(sempadan) = lebar sebenar elemen
tinggi(tinggi) + pelapik(birai dalam) + sempadan(sempadan) = sebenar ketinggian elemen
Ini bermakna apabila kita menetapkan lebar/tinggi elemen, ketinggian dan lebar elemen sebenar yang dipaparkan akan menjadi lebih besar (kerana sempadan dan padding elemen juga dikira dalam lebar/ ketinggian).
Walaupun tetapan lebar dan ketinggian kedua-dua <div> elemen dalam gambar di atas adalah sama, saiz sebenar yang dipaparkan adalah tidak konsisten kerana div2 menentukan pelapik:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>Jalankan dan cuba
Gunakan cara ini jika anda ingin mendapatkan kotak yang lebih kecil Dan termasuk padding, anda perlu mengambil kira lebar sempadan dan padding.
Sifat bersaiz kotak CSS3 menyelesaikan masalah ini dengan baik.
Gunakan sifat saiz kotak CSS3
Sifat saiz kotak CSS3 termasuk padding (dalam) dalam lebar dan tinggi daripada margin unsur) dan sempadan (sempadan).
Jika saiz kotak: kotak sempadan; ditetapkan pada elemen, padding (padding) dan sempadan (sempadan) juga disertakan dalam lebar dan tinggi:
Contoh
Berikut ialah contoh mudah untuk menambah saiz kotak: atribut kotak sempadan kepada dua elemen <div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>Jalankannya dan cuba
bersaiz kotak: kotak sempadan Kesannya lebih baik, itulah yang diperlukan oleh ramai pembangun.
Kod berikut boleh memaparkan saiz semua elemen dengan cara yang lebih intuitif. Banyak penyemak imbas sudah menyokong saiz kotak: kotak sempadan; (tetapi bukan semua - itulah sebabnya elemen input dan teks dengan lebar: 100%; mempunyai lebar yang berbeza).
Adalah disyorkan untuk menggunakan saiz kotak untuk semua elemen:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
* {
box-sizing: border-box;
}
input, textarea {
width: 100%;
}
</style>
</head>
<body>
<form action="action_page.php">
用户名:<br>
<input type="text" name="username" value="php"><br>
邮箱:<br>
<input type="text" name="email" value="429240967@qq.com"><br>
评论:<br>
<textarea name="message" rows="5" cols="30">
</textarea>
<br><br>
<input type="submit" value="Submit">
</form>
<p><strong>提示：</strong> 可以尝试移除样式中的 box-sizing 属性，看看会发生什么。注意移除后部分浏览器 input, textarea, 和 submit 按钮的宽度不一致。</p>
</body>
</html>Jalankannya dan cuba
