A különbség - div - és - span, webreference

Elemek az előző fejezetben jelennek meg egymás után ugyanazon a vízszintes vonal. Úgy viselkednek, mint a normál szöveg, és egyszerűen jelenik meg egymás mellett, akkor is, ha egy bizonyos méret és egyéb tulajdonságok, amelyek nem tartoznak a szöveget. Ez nem meglepő, hiszen . és - elemek egy csoportba tartozónak kell nevezett vonal-blokk. Ilyen elemek lehetnek különböző méretű, de a böngésző mindig megjeleníti azokat vízszintesen, mint a szöveges. Ebben a fejezetben megtudjuk, mi is a különböző csoportok elemeinek megfelelően, ahogy lefektetett az oldalon.</p><p>Megtekintheti, hogy az elemek működnek <div> Az általunk használt hárman, és állítsa őket a szélesség, magasság és a háttér.</p> <p>Feltételek szerint a fent megadott, a HTML a következő.</p> <p>A CSS-ben írunk egy osztály .container. amely kapcsolatban van a címke <div> .</p> <p>Nézzük meg a böngészőben.</p> <p><div style="text-align:center;"><img src="http://images-on-off.com/images/34/raznitsamezhdudivispanwebreference-c9060a77.png" title="A különbség - div - és - span, webreference (webreference)" alt="A különbség - div - és - span, webreference" /></div></p> <p>Úgy néz ki, mint egy nagy téglalap. Mit szólnál a címkék elválasztásához <div> egymástól?</p> <p>Én hozzá egy tulajdonság margin-bottom (fent kiemelt) elválasztásához <div> tagolt alsó 10 pixel. Itt az ideje, hogy ellenőrizze a hatást a böngészőben.</p> <p><div style="text-align:center;"><img src="http://images-on-off.com/images/34/raznitsamezhdudivispanwebreference-56c91835.png" title="A különbség - div - és - span, webreference (span)" alt="A különbség - div - és - span, webreference" /></div></p> <p>Kiváló! A böngésző megjeleníti a „blokkokat” egymás alatt, szemben az előző példához egy formája, ahol a tételeket egy sorban.</p> <p>Mi a különbség? Amikor megjeleníteni címkék, a böngésző felismeri három csoport elemei:</p> <ul> <li>inline (kisbetű);</li> <li>blokk (blokk);</li> <li>inline-blokk (sor-blokk).</li> </ul> <p>Inline elemek nem okoznak az átutalást egy új vonalat és azt mutatják, egy elem mellett egy másik vízszintesen. Blokk elemek vannak beállítva, hogy a blokkok vannak rakva egymás és soha nem jelenik meg a vízszintes, ha nem használja trükkök a CSS (kb amelyből megtudjuk, a következő fejezetben). Sor-blokk hatnak vonalú elemeket (az ábrán egymás mellett), de különböznek tőlük, hogy lehetséges, hogy a méretet. Például, a mező <textarea> Úgy tűnhet, mint egy nagy téglalapot, hanem, hogy a tér kívül egyetlen sort.</p><p>Hadd osszak meg veletek néhány példát tételeket lehet besorolni valamelyik említett három csoport.</p> <ul> <li>kisbetű - <span>. <em>. <strong></li> <li>blokk - <div>. <p>. <article></li> <li>Vonal-blokk - <input>. <textarea></li> </ul> <p>Alapértelmezésben a belső elemek stilisztikai kijelző tulajdonság értéke inline. A blokk-szintű elemek az értékét blokk. és a vonal-blokk elemek inline-blokk. Most meg tudja magyarázni, ezért a címke <span> Nem szállít a szöveget egy új sort. Mivel ezt a sort, majd a CSS display tulajdonság be van állítva, hogy inline. Ezt szem előtt tartva, az alábbi kódot:</p> <p>A böngésző megjeleníti egy sorban:</p> <p>Azonban meg lehet változtatni ezt a viselkedést felvesz egy sort a CSS:</p> <p>Most a címkék <span> eltérő módon jelennek meg, mindegyik új sorban, mint mi meg a display tulajdonság blokként.</p> <p>Ebben a példában használjuk <div>. Akkor vajon mi ez a címke leírja a dokumentumot. A rövid válasz: nem. Mi használja a címkét <div> azokban az esetekben, amikor az összes többi tag nem alkalmasak, hogy mit teszünk bele a dokumentumba. Általában a tag <div> (Kombinálva különböző osztályokba) előállítására használják különböző vizuális hatásokat, aminek eredményeként nincs funkciója, hogy leírja a tartalmát. Például, ha azt szeretné, hogy három függőleges oszlop az oldalon, akkor szükség lehet egy elem, amely megosztani a nagybetűs és kisbetűs-blokkot tartalmaz.</p> <p>Általában egy jó ötlet, hogy nem visszaélni tag <div>. ha lehetséges.</p> <p>Az új ismereteket a blokkokat, nézzük újra a kódot űrlapunkat, hogy a mezők és a leírások szépen mutatja egymás alatt.</p> <p>Úgy néz ki, egy kicsit bonyolultabb, de az egyetlen dolog, amit tett, címkéket <div>. körülvevő minden űrlap elem.</p> <p>Ismét Hasonlítsuk össze az új (jobbra) és a régi kód (a bal oldalon).</p> <p><div style="text-align:center;"><img src="http://images-on-off.com/images/34/raznitsamezhdudivispanwebreference-cdd374d1.png" title="A különbség - div - és - span, webreference (megjelenik egymás mellett)" alt="A különbség - div - és - span, webreference" width="434" height="153" /></div></p> <p>Most lássuk, hogyan működik az új kód jelenik meg a böngészőben!</p> <p><div style="text-align:center;"><img src="http://images-on-off.com/images/34/raznitsamezhdudivispanwebreference-9859a466.png" title="A különbség - div - és - span, webreference (megjelenik egymás mellett)" alt="A különbség - div - és - span, webreference" width="434" height="373" /></div></p> <p>A forma most keres jó!</p> </div> <div class="extra"> <div class="info"><a href="/articles/jogai-es-kotelezettsegei-az-allatok-torveny-altal.html">előző</a> ◈ <a href="/articles/ejjeliszekreny-kezevel-gyartasi-technologia.html">a következő</a></div> <div class="clear"></div> </div> </article> </div> </div> </div> </div> <div id="sidebar" class="col-1-3"> <div class="wrap-col"> <div class="box"> <div class="content"> </div> </div> </div> </div> </div> </div> </section> <footer> <div class="wrap-footer pominodiko"> <div class="row"> <div class="col-1-1"> <div class="wrap-col"> <div class="box"> <div class="content"> </div> </div> </div> </div> </div> </div> <div class="copyright"> <h4>Hasznos cikkek</h4> <p> <li><a href="/szakerto-121/dlszltofestes-husveti-tojast-a-gyermekek-4-6-eves.html">Díszítőfestés húsvéti tojást a gyermekek 4-6 éves</a></li> <li><a href="/szakerto-185/hogyan-legalizalni-a-haz-es-a-fold-nelkuli.html">Hogyan legalizálni a ház és a föld nélküli dokumentumok</a></li> <li><a href="/szakerto-129/mi-ugomonyat-szotar-dahl.html">Mi ugomonyat, szótár Dahl</a></li> <li><a href="/szakerto-203/higienikus-tamponok-o.html">Higiénikus tamponok o</a></li> <li><a href="/articles/az-eskuvoi-auto-amit-tudnod-kell-amikor.html">Az esküvői autó - amit tudnod kell, amikor kiválasztják a esküvői konvoj</a></li> <li><a href="/szakerto-165/a-tortenelem-a-megjelenese-jazz.html">A történelem a megjelenése jazz</a></li> <li><a href="/szakerto-193/aiza-dolmatova-mielott-baliba-koltozott-ugy-tunt.html">Aiza Dolmatova ", mielőtt báliba költözött, úgy tűnt számomra, hogy meghalni fogok! "</a></li> </p> <p>Copyright © 2025</p> </div> <script> new Image().src = "https://counter.yadro.ru/hit;adolfru?r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+ ";h"+escape(document.title.substring(0,150))+ ";"+Math.random();</script> </footer></div> </body> </html>