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

előző ◈ a következő

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><br> <br>  <ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-8686842323494376" data-ad-slot="7433472040"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <br> <br>  <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-8686842323494376" data-ad-slot="3846589433"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <br> <br><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><br> <br>  <ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-8686842323494376" data-ad-slot="1656374511"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <br> <br>  <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-8686842323494376" data-ad-slot="7835271068"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <br> <br><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> <br>  <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-8686842323494376" data-ad-slot="7643198360"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <br> <br> </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-204/tizeneves-meglepetesek-vagy-mi-van-ha-gyermeke-az.html">Tizenéves meglepetések, vagy mi van, ha gyermeke az új évet szeretettel üdvözölni kívánja barátaival</a></li> <li><a href="/szakerto-169/mivel-nem-volt-gyongyok-es-milyen-jelentoseggel.html">Mivel nem volt gyöngyök és milyen jelentőséggel voltak az ókorban - a történelem gyöngyök, yuvelirum</a></li> <li><a href="/articles/elektromos-kulcsrakesz-tula-price.html">Elektromos kulcsrakész Tula price</a></li> <li><a href="/szakerto-174/az-hogy-a-szavak-egy-angol-mondat-elemzes.html">Az, hogy a szavak egy angol mondat - elemzés foglalkozik példák</a></li> <li><a href="/szakerto-185/az-ex-felesege-ilya-averbukh-ugynevezett-valodi.html">Az ex-felesége Ilya Averbukh úgynevezett valódi oka a szünet vele</a></li> </p> <p>Copyright © 2024</p> <p> <a href="/privacy.html">Adatvédelmi irányelvek</a> </p> </div> <script type='text/javascript'> //<![CDATA[ // Lazy Load AdSense var lazyadsense=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyadsense||0!=document.body.scrollTop&&!1===lazyadsense)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyadsense=!0)},!0); //]]> </script> <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>