Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Apakah perbezaan antara dua model kotak dalam css3
Apakah perbezaan antara dua model kotak dalam css3
- 青灯夜游asal
- 2022-02-28 14:10:593731semak imbas
Perbezaan: 1. Lebar dan tinggi kotak standard ialah lebar dan tinggi kawasan kandungan, manakala lebar dan tinggi model aneh merujuk kepada lebar dan tinggi "padding sempadan kawasan kandungan "; 2. Kotak standard meningkatkan kawasan kandungan Margin, sempadan dan jidar tidak menjejaskan saiz elemen, manakala model aneh.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
Model kotak termasuk kandungan, padding, jidar dan jidar
Terdapat dua model kotak dalam CSS, iaitu model standard W3C dan IE model pelik. .
Pengenalan:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>8b05045a5be5764f313ed5b9168a17e6 Mengisytiharkan jenis penghuraian dokumen, jadi betapa pentingnya
Jenis penghuraian:
BackCompat : Mod pelik, mod penyemak imbas sendiri
CSS1Compat: Mod standard, halaman penghuraian dan pemaparan standard W3C
Jika tiada pengisytiharan dibuat, ia akan dipaparkan mengikut mod pelik Pelayar yang berbeza memaparkan secara berbeza
1. Model Standard
Model Standard W3C
Apabila kita menetapkan lebar dan lebar sesuatu elemen Apabila menetapkan ketinggian, model kotak standard hanya menetapkan lebar dan ketinggian kandungan (bahagian biru), jadi lebar dan ketinggian sebenar elemen ini juga mesti menambah paddingnya (margin dalam), jidar (sempadan) dan jidar ( margin luar).
Formula:
lebar = lebar kandungan
tinggi = tinggi kandungan
2. Model Pelik
Model Pelik
Apabila kita menetapkan lebar dan lebar elemen ketinggian, model kotak pelik merawat keseluruhan kotak secara keseluruhan. Beri keseluruhan kotak itu lebar dan tinggi. Jika anda juga menetapkan margin dan sempadan tambahan pada kotak. Kemudian bahagian kandungan berwarna biru di tengah akan diramas dan menjadi lebih kecil.
Formula:
lebar = padding sempadan Lebar kandungan
tinggi = padding sempadan Ketinggian kandungan
Perbezaan utama antara model standard W3C dan model pelik IE ialah lebar dan tinggi kotak.
①Lebar dan tinggi kotak standard mewakili lebar dan tinggi kandungan, lebar=lebar kandungan, tinggi=tinggi kandungan akan meningkatkan jidar dalam, jidar dan jidar luar; tidak menjejaskan Saiz kawasan kandungan, tetapi meningkatkan saiz keseluruhan kotak elemen.
②Lebar kotak pelik termasuk pelapik, lebar kandungan dan jidar. ketinggian mengandungi ketinggian, jidar dan padding kandungan padding-bottom border-bottom)
Ringkasan:
1 : hanya tetapkan saiz kandungan. Model kotak IE: Anggap keseluruhan elemen sebagai saiz set keseluruhan. 2. Model kotak css terdiri daripada kandungan, padding, border dan margin. Tetapi saiz kotak ditentukan oleh kandungan, padding dan bahagian sempadan, tanpa margin.
3. Apabila menulis kod halaman, kita harus cuba menggunakan model W3C standard (jenis DOCTYPE perlu diisytiharkan dalam halaman), untuk mengelakkan ketidakserasian berbilang pelayar pada halaman yang sama.
Oleh kerana jika jenis DOCTYPE tidak diisytiharkan, pelayar IE akan mentafsir model kotak sebagai model kotak IE, dan FireFox akan mentafsirkannya sebagai model kotak W3C jika jenis DOCTYPE diisytiharkan dalam halaman, semua pelayar akan akan mentafsir model kotak sebagai model kotak W3C.
(Mempelajari perkongsian video:
tutorial video css,
bahagian hadapan webAtas ialah kandungan terperinci Apakah perbezaan antara dua model kotak dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!