Diferența dintre - div - și - durata, webreference

Elementele din capitolul anterior sunt afișate secvențial pe aceeași linie orizontală. Ei se comportă ca text normal, și pur și simplu afișat unul lângă altul, chiar dacă au o anumită dimensiune și alte proprietăți care nu aparțin textului. Nu ar trebui să fie surprinzător, deoarece . și - elemente care aparțin unui grup numit linie-bloc. Astfel de elemente pot avea dimensiuni diferite, dar browser-ul le va afișa întotdeauna pe orizontală, cum ar fi text. În acest capitol, vom afla mai multe despre diferitele grupuri de elemente în conformitate cu modul în care acestea sunt stabilite pe pagina.</p><p>Pentru a vedea cum funcționează elementele <div> Noi folosim trei dintre ele, și să le setați la lățimea, înălțimea și fundal.</p> <p>În conformitate cu condițiile de mai sus, HTML este după cum urmează.</p> <p>În CSS, vom scrie o .container de clasă. care este asociat cu eticheta <div> .</p> <p>Să ne uităm la ea în browser.</p> <p><div style="text-align:center;"><img src="https://images-on-off.com/images/34/raznitsamezhdudivispanwebreference-c9060a77.png" title="Diferența dintre - div - și - durata, webreference (webreference)" alt="Diferența dintre - div - și - durata, webreference" /></div></p> <p>Se pare ca un dreptunghi mare. Ce zici de a separa etichete <div> unul față de celălalt?</p> <p>Am adăugat o proprietate margine de jos (evidențiată mai sus) pentru a separa fiecare <div> crestate de jos 10 pixeli. Este timpul pentru a verifica efectul în browser.</p> <p><div style="text-align:center;"><img src="https://images-on-off.com/images/34/raznitsamezhdudivispanwebreference-56c91835.png" title="Diferența dintre - div - și - durata, webreference (interval)" alt="Diferența dintre - div - și - durata, webreference" /></div></p> <p>Excelent! Browser-ul afișează „blocuri“ unul sub altul, în contrast cu exemplul anterior, cu o formă în cazul în care elementele care urmează să fie afișate într-o singură linie.</p> <p>Care este diferența? Când este vorba de a afișa tag-uri, browser-ul recunoaște trei grupe de elemente:</p> <ul> <li>inline (litere mici);</li> <li>bloc (bloc);</li> <li>inline-bloc (rândul bloc).</li> </ul> <p>Elementele inline nu determină transferul la o linie nouă și arată un element de lângă alta pe orizontală. Elemente de bloc sunt setate ca blocuri care sunt așezate unul peste altul și nu sunt afișate lângă orizontală, dacă nu folosim trucuri magice în CSS (despre care aflăm în capitolul următor). Rând bloc acționează ca elemente de linie (prezentată unul lângă altul), dar diferă de la ei că este posibil să se stabilească dimensiunea. De exemplu, câmpul <textarea> Acesta poate apărea ca un dreptunghi mare, dar pentru a lua spațiul în afara singură linie de text.</p><p>Lasă-mă să împărtășesc cu voi câteva exemple de elemente care pot fi clasificate în conformitate cu una dintre aceste trei grupuri.</p> <ul> <li>litere mici - <span>. <em>. <strong></li> <li>bloc - <div>. <p>. <article></li> <li>Line-bloc - <input>. <textarea></li> </ul> <p>În mod implicit, elementele de linia de proprietate de afișare stilistică este setată pe linie. Pentru elementele de nivel bloc ale blocului său valoare. și pentru elementele liniei bloc inline-bloc. Acum puteți explica, motiv pentru care tag-ul <span> Aceasta nu transferă textul într-o nouă linie. Deoarece acest element rând, și apoi în proprietatea de afișare CSS este setat pe linie. În acest sens, codul de mai jos:</p> <p>Browser-ul se va afișa într-o singură linie:</p> <p>Cu toate acestea, puteți schimba acest comportament prin adăugarea unui singur rând în CSS:</p> <p>Acum etichetele noastre <span> apar în mod diferit, fiecare pe o linie nouă, așa cum am stabilit proprietatea de afișare ca un bloc.</p> <p>Pentru acest exemplu, vom folosi <div>. Poate vă întrebați ce această etichetă descrie documentul. Răspunsul scurt este: nimic. Noi folosim tag-ul <div> în cazul în care toate celelalte tag-uri nu sunt potrivite pentru ceea ce am pus în document. În general, tag-ul <div> (În combinație cu diferite clase) este utilizată pentru a produce efecte vizuale diferite, ca urmare nu are o funcție pentru a descrie conținutul. De exemplu, dacă doriți să faceți trei coloane verticale pe site-ul, poate fi necesar un element care poate partaja unele elemente litere mari și mici-bloc.</p> <p>În general, o idee bună să nu abuzeze de tag-ul <div>. dacă este posibil.</p> <p>Cu noile noastre cunoștințe despre blocuri, să refaceți codul formularului nostru, astfel încât câmpurile de formular și descrierile frumos afișate sub reciproc.</p> <p>Se pare un pic mai complicat, dar singurul lucru pe care am făcut a fost adăuga etichete <div>. să înconjoare fiecare element de formular.</p> <p>Încă o dată, să compare noul (dreapta) și codul vechi (pe stânga).</p> <p><div style="text-align:center;"><img src="https://images-on-off.com/images/34/raznitsamezhdudivispanwebreference-cdd374d1.png" title="Diferența dintre - div - și - durata, webreference (afișat lângă fiecare)" alt="Diferența dintre - div - și - durata, webreference" width="434" height="153" /></div></p> <p>Acum, să vedem modul în care este afișat noul cod în browser!</p> <p><div style="text-align:center;"><img src="https://images-on-off.com/images/34/raznitsamezhdudivispanwebreference-9859a466.png" title="Diferența dintre - div - și - durata, webreference (afișat lângă fiecare)" alt="Diferența dintre - div - și - durata, webreference" width="434" height="373" /></div></p> <p>Formularul nostru este acum în căutarea mare!</p> <div class="vnizine"><p style="text-align: left;"><a href="/revista-34/cum-sa-faci-custodia-unui-barbat-in-varsta-de-80.html">Pagina anterioară</a></p><p style="text-align: right;"><a href="/revista-34/dialectica-wgandire-noua.html">Pagina următoare</a></p> </div> </article> </div> </div> </div> </div><footer class="akatita-footer clearfix"> <div class="akatita-content-layout layout-item-0"> <div class="akatita-content-layout-row"> <div class="akatita-layout-cell layout-item-1" style="width: 20%"> <p style="font-size: 18px; font-family: 'Times New Roman';">Articole aleatoare</p> <br> <ul> <li><a href="/utilizator-119/hematomie-simptome-tratament-descriere.html">Hematomie, simptome, tratament, descriere</a></li> <li><a href="/utilizator-134/portalul-muzeelor-​​de-la-rani.html">Portalul muzeelor ​​de la răni</a></li> <li><a href="/utilizator-120/metode-moderne-de-stomatologie-fara-durere-si.html">Metode moderne de stomatologie fără durere și complicații</a></li> <li><a href="/utilizator-206/multiplicitatea-conductei.html">Multiplicitatea conductei</a></li> <li><a href="/utilizator-204/rezumatul-cerintelor-sistemului-de-clasificare.html">Rezumatul cerințelor sistemului de clasificare pentru hoteluri și implementarea acestora pe piața turistică din Rusia - banca</a></li> </ul> </div><div class="akatita-layout-cell layout-item-1" style="width: 20%"> <p style="font-size: 18px; font-family: 'Times New Roman';">locație</p> <br> <ul> <li><a href="/locul-pe-harta.html">Suntem pe hartă</a></li> <li><a href="/adresa.html">Adresa</a></li> </ul> <ol> <li><a href="/sitemap/sitemap165.html">sitemap</a></li> <li><a href="/sitemap/sitemap206.html">sitemap</a></li> <li><a href="/sitemap/sitemap232.html">sitemap</a></li> <li><a href="/sitemap/sitemap603.html">sitemap</a></li> <li><a href="/sitemap/sitemap903.html">sitemap</a></li> </ol> </div><div class="akatita-layout-cell layout-item-1" style="width: 20%"> <p style="font-size: 18px; font-family: 'Times New Roman';">Mai multe despre noi</p> <br> <ul> <li><a href="/contactati-ne.html">Contactați-ne</a></li> <li><a href="/despre-site.html">Despre site</a></li></ul> </ul> </div><div class="akatita-layout-cell layout-item-1" style="width: 40%"> <p style="text-align:right;"><a href="#"></a>Drepturi de autor © 2024. Toate drepturile rezervate.</p><br> <p style="text-align: right;"> <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> </p> </div> </div> </div> </footer> </div> </div></body> </html>