masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

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>


Meneruskan pembelajaran
||
<!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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492414 permainan