masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

HTML+CSS Mudah Dimulakan Lebar dan Tinggi Model Kotak

Lebar dan tinggi model kotak adalah berbeza daripada apa yang biasanya kita anggap sebagai lebar dan tinggi objek. Lebar dan tinggi yang ditakrifkan dalam CSS merujuk kepada julat kandungan dalam padding.

Jadi lebar sebenar elemen (lebar kotak) = sempadan kiri + sempadan kiri + padding kiri + lebar kandungan + padding kanan + sempadan kanan + sempadan kanan

0.jpg

Perkara yang sama berlaku pada ketinggian elemen

Sebagai contoh, kod berikut: 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
      div{
        width:200px;
        padding:20px;
        margin:10px;
        border:1px solid red;
      }
  </style>
</head>
<body>
    <div>欢迎来到php中文网</div>
</body>
</html>

Panjang sebenar elemen ialah: 10px+1px+20px+200px +20px+1px+10px=262px. Anda boleh melihat model kotak elemen dalam penyemak imbas Chrome, seperti yang ditunjukkan di bawah:

0.jpg

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width:200px; padding:20px; margin:10px; border:1px solid red; } </style> </head> <body> <div>欢迎来到php中文网</div> </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)  492315 permainan