Demonstrasi grafik analisis mendalam bagi tindanan sempadan jidar CSS_Pertukaran pengalaman

Tindanan sempadan adalah konsep yang agak mudah. Walau bagaimanapun, ia boleh menyebabkan banyak kekeliruan apabila meletakkan halaman web dalam amalan. Ringkasnya, apabila dua sempadan menegak bertemu, mereka membentuk sempadan. Ketinggian sempadan ini adalah sama dengan ketinggian yang lebih besar bagi dua sempadan bertindih.

Apabila elemen muncul di atas elemen lain, sempadan bawah elemen pertama bertindih dengan sempadan atas elemen kedua, seperti yang ditunjukkan dalam gambar:

Sempadan atas elemen bertindih dengan sempadan bawah elemen sebelumnya

Apabila satu elemen terkandung dalam elemen lain (dengan andaian tiada pelapik atau sempadan yang memisahkan sempadan terbuka), sempadan atas dan/atau bawahnya juga ditumpangkan, lihat gambar:

Sempadan atas elemen bertindih dengan sempadan atas induknya

Walaupun ia mungkin kelihatan agak pelik pada mulanya, sempadan itu malah boleh bertindih dengan dirinya sendiri. Katakan anda mempunyai elemen kosong, ia mempunyai sempadan, tetapi tiada sempadan atau padding. Dalam kes ini, sempadan atas dan sempadan bawah bersentuhan antara satu sama lain, dan ia akan bertindih, seperti yang ditunjukkan dalam gambar:

Sempadan atas dan bawah elemen bertindih

Jika jidar ini menyentuh sempadan elemen lain, ia juga akan bertindih, seperti yang ditunjukkan dalam gambar:

Sempadan bertindih elemen kosong bertindih dengan sempadan elemen kosong yang lain

Inilah sebabnya mengapa satu siri elemen perenggan kosong mengambil ruang yang sangat sedikit sempadan ditambah bersama untuk membentuk sempadan kecil.

Tindanan sempadan mungkin kelihatan agak pelik pada mulanya, tetapi ia sebenarnya masuk akal. Ambil, sebagai contoh, halaman teks biasa yang terdiri daripada beberapa perenggan (lihat Rajah 2-8). Ruang di atas perenggan pertama adalah sama dengan margin atas perenggan. Tanpa tindanan sempadan, sempadan antara semua perenggan seterusnya akan menjadi jumlah sempadan atas dan bawah bersebelahan. Ini bermakna ruang antara perenggan adalah dua kali lebih besar daripada bahagian atas halaman. Jika pertindihan sempadan berlaku, sempadan atas dan bawah antara perenggan ditindih, supaya jarak di mana-mana adalah konsisten

Tindan sempadan mengekalkan jarak yang konsisten antara elemen

Tindanan sempadan hanya berlaku pada sempadan menegak kotak blok dalam aliran dokumen biasa. Sempadan antara kotak sebaris, kotak terapung atau kotak berkedudukan mutlak tidak bertindih.

　Masalah tindanan sempadan
Tindanan sempadan ialah ciri CSS yang boleh menyebabkan banyak masalah jika disalahfahamkan. Sila rujuk contoh mudah perenggan bersarang dalam elemen div:

Salin kod Kod adalah seperti berikut:

Perenggan ini mempunyai jidar 20px.

>kotak div ditetapkan sempadan 10 piksel, perenggan menetapkan sempadan 20 piksel:

Salin kod

Kod itu seperti berikut: #kotak{ margin:10px;

warna latar:#d5d5d5; >warna latar belakang:#6699ff;

}


Anda secara semula jadi akan berfikir bahawa gaya yang terhasil akan kelihatan seperti Rajah 1-1, dengan ruang 20 piksel antara perenggan dan div, dan sempadan 10 piksel di sekeliling bahagian luar div.




Rajah 1-1

Walau bagaimanapun, gaya yang terhasil sebenarnya kelihatan seperti Rajah 1-2.

Rajah 1-2

Analisis mendalam tindanan sempadan jidar CSS

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">Perenggan ini mempunyai jidar 20px.<title> </title>
[Ctrl+A Tout sélectionner Remarque : Si vous devez introduire des J externes, vous devez actualiser pour exécuter ]

Deux choses se sont produites ici. Condition. Premièrement, les bordures supérieure et inférieure de 20 pixels du paragraphe se chevauchent avec la bordure de 10 pixels du div pour former une seule bordure verticale de 20 pixels. Deuxièmement, au lieu d’être entourées par le DIV, ces bordures dépassent des bords supérieur et inférieur du DIV. Ce comportement se produit en raison de la manière dont les éléments ayant des enfants au niveau du bloc calculent leur hauteur.

Si un élément n'a pas de bordure verticale ni de remplissage, sa hauteur est la distance entre les bords de bordure supérieur et inférieur des éléments enfants qu'il contient. Par conséquent, les marges supérieure et inférieure de l’élément enfant conteneur dépassent à l’extérieur de l’élément conteneur. Il existe cependant une solution simple. En ajoutant une bordure verticale ou un remplissage, les espaces ne se chevauchent plus et la hauteur de l'élément est la distance entre les bords d'espaces supérieur et inférieur des éléments enfants qu'il contient.

Pour que l'exemple précédent ressemble à la figure 1-1, ajoutez simplement un remplissage ou une bordure autour du div :

Copier le code Le code est le suivant :

#box{
margin:10px
padding:1px;/*ou border:1px solid color;*/
background -color:#d5d5d5;  
}  
p{  
margin:20px;  
background-color:#6699ff; La plupart des problèmes peuvent être résolus en ajoutant une bordure transparente ou un remplissage de 1 px.

Solution supplémentaire :

Copier le code

Le code est le suivant : 1. Rembourrage extérieur

2. Bordure transparente : 1px solide transparent

3. Position de positionnement absolue : absolue :
4. Débordement de DIV externe : caché
5. Ajout de DIV interne ; float:left; display:inline;
6. Le DIV externe utilise parfois zoom:1;