亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

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">這個(gè)是個(gè)較小的框 (width 為 300px ，height 為 100px)。</div>
<br>
<div class="div2">這個(gè)是個(gè)較大的框 (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">兩個(gè) div 現(xiàn)在是一樣大小的!</div>
<br>
<div class="div2">php中文網(wǎng)!</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>
評(píng)論:<br>
<textarea name="message" rows="5" cols="30">
</textarea>
<br><br>
<input type="submit" value="Submit">
</form> 
<p><strong>提示：</strong> 可以嘗試移除樣式中的 box-sizing 屬性，看看會(huì)發(fā)生什么。注意移除后部分瀏覽器 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> 評(píng)論:<br> <textarea name="message" rows="5" cols="30"> </textarea> <br><br> <input type="submit" value="Submit"> </form> <p><strong>提示：</strong> 可以嘗試移除樣式中的 box-sizing 屬性，看看會(huì)發(fā)生什么。注意移除后部分瀏覽器 input, textarea, 和 submit 按鈕的寬度不一致。</p> </body> </html>