Elemente div și cuprind în html
Cu tine din nou Andrew.
Problema următoare se va concentra pe elementul de distribuție a deschiderii si div element HTML.
Deci, despre elementele suplimentare html ...
Să presupunem că aveți nevoie pentru a evidenția orice cuvânt unic în text (presupunând o culoare diferită, și de fundal), sau într-o imagine și text referitoare la acestea, au fost la partea de sus și spre dreapta într-o celulă de masă, precum și conținutul principal al paginii, de exemplu, în partea de jos și spre stânga acolo . În ceea ce privește primul exemplu, eu spun că poți să faci această etichetă cu un set de parametri de dorit, dar se referă la etichetele interzise (browsere noi pot să nu-l suport), și proprietățile de fond de înlocuire nu a avut.
Pentru astfel de cazuri, există două tag-ul specifice, care practic nu fac nimic de la sine. Dar, folosind stilurile potrivite pentru ea, poti obtine orice. Puteți utiliza, în general, doar două dintre aceste tag-uri și aplicarea de stiluri pentru a le, pentru a face întreaga pagină a site-ului.
Care este diferența dintre ele, în cazul în care acestea sunt utilizate pentru unul și același lucru?
Div Element - este un tag bloc, și poate fi oricare cunoscut la noi tag-uri (liste, imagini, tabele, ...).
Element etalon - această linie tag-ul, și se aplică numai la text (selectați o bucată de text într-o culoare diferită).
Stiluri care se aplică etichetele de date - este tot ce avem de stiluri de învățare. Restricții privind utilizarea oricărui stil există.
Să ne uităm la stilurile care sunt cele mai tipice pentru aceste tag-uri. Acestea se aplică, de asemenea, toate celelalte tag-uri, și utilizate în același mod în care sunt folosite mai des doar cu aceste tag-uri (în special
).Primul lucru pe care aș dori să încep acest lucru cu elemente de poziționare.
poziție - seturi sau determină poziția elementului.
static - implicit. Poziția obiectului este determinată de conținutul HTML curent în conformitate cu regulile standard.
absolut - obiectul este poziționat în raport cu poziția părintelui sau în raport cu corpul obiectului. relativă - poziția obiectului este determinată de abaterea de la poziția în care a apărut în mod implicit.
stânga / top - seturi sau determină poziția elementului în raport cu marginea din stânga / sus.
x - număr în pixeli sau procente.
auto - implicit.
Acest exemplu arată că unitatea noastră cu o lățime de 300px se va deplasa în jos la 350px și 200px la stânga, în ceea ce privește locul în care acesta apare în mod implicit.
Următoarea proprietate importantă:
marjă - valoarea care pleacă de la unitatea noastră la instalațiile învecinate de pe cele patru laturi.
margin-top - setează valoarea indentare superioare a obiectului
-Marginea din stânga - specifică magnitudinea liniuță din stânga a obiectului
-Marjă dreapta - setează valoarea obiectului liniuță din dreapta
margin-bottom - setează valoarea indentare inferioară a obiectului
Am creat un bloc cu margini în jurul lui 30px din toate părțile.
De-a lungul ceea ce aș dori să mă opresc:
padding - proprietate specifică cantitatea de spațiu pentru a fi inserat între obiect și limitele sale.
-Padding jos - specifica marimea spatiului care trebuie inserat între limita inferioară a obiectului.
-Padding stânga - specifică cantitatea de spațiu pentru a fi inserat între obiect limita stângă.
-Padding dreapta - specifică cantitatea de spațiu pentru a fi inserat între obiect marginea dreaptă.
padding-top - specifică cantitatea de spațiu pentru a fi inserat între limita superioară a obiectului.
Am creat un bloc de 30px indentat din conținutul tuturor laturile sale.
Și să ne considerăm un exemplu folosind tag-ul :
Să presupunem că avem un tip de construcție:
Dorim să facem cuvântul textului pe fond galben cu litere albastre. Pentru a face acest lucru, anexați într-o etichetă și aplicați stiluri adecvate.
Repet că toate stilurile de mai sus sunt aplicabile nu numai la doi au discutat despre div și durata, dar, de asemenea, la noi toți cunoscute HTML-tag-uri!
orice text!
Din moment ce ai fost Bernatsky Andrew!
Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram
