Saiz kotak CSS3
Saiz kotak CSS3
Sifat bersaiz kotak CSS3 boleh menetapkan sifat lebar dan ketinggian, yang termasuk pelapik (padding) dan sempadan (sempadan).
Tidak menggunakan sifat bersaiz kotak CSS3
Secara lalai, lebar dan hujung atas elemen dikira seperti berikut:
lebar + pelapik (Padding) + sempadan (sempadan) = Lebar sebenar elemen
tinggi (tinggi) + padding (Padding) + sempadan (sempadan) = Ketinggian sebenar elemen
Ini bermakna Apabila kita tetapkan lebar/ketinggian elemen, ketinggian dan lebar elemen sebenar yang dipaparkan akan menjadi lebih besar (kerana sempadan dan padding elemen juga dikira dalam lebar/tinggi).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>Menggunakan kaedah ini, jika anda ingin mendapatkan kotak yang lebih kecil dan memasukkan 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 (margin dalam) dan sempadan (sempadan) turut disertakan dalam lebar dan tinggi:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>Daripada hasil Lihat saiz kotak: kotak sempadan; untuk hasil yang lebih baik, itulah yang diperlukan oleh banyak 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).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
* {
box-sizing: border-box;
}
input, textarea {
width: 100%;
}
</style>
</head>
<body>
<form action="action_page.php">
用户名:<br>
<input type="text" name="username" value=""><br>
邮箱:<br>
<input type="text" name="email" value=""><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>
![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)
