简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Model kotak lebar dan tinggi

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) = jidar kiri + jidar kiri + padding kiri + lebar kandungan + padding kanan + jidar kanan + jidar kanan. Begitu juga dengan ketinggian elemen

QQ截图20161011160536.png


.

Contohnya:

kod css: 

div{
    width:200px;
    padding:20px;
    border:1px solid red;
    margin:10px;   
}

kod html: 

<body>
   <div>文本内容</div>
</body>

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

QQ截图20161011160553.png

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>宽度和高度</title>
<style type="text/css">
li{
    border-bottom:1px dotted #ccc;
    width:200px;height:30px;
}
</style>
</head>
<body>
<ul>
    <li>别让不会说话害了你</li>
    <li>二十七八岁就应该有的见识</li>
    <li>别让不好意思害了你</li>
</ul>
</body>
</html>


Meneruskan pembelajaran
||
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>宽度和高度</title> <style type="text/css"> li{ border-bottom:1px dotted #ccc; width:200px;height:30px; } </style> </head> <body> <ul> <li>别让不会说话害了你</li> <li>二十七八岁就应该有的见识</li> <li>别让不好意思害了你</li> </ul> </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)  491953 permainan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！