Salutări, dragi cititori webcodius.ru blog. Astăzi vom continua să studieze și să ia în considerare flotorul regula CSS și clar, sunt de mare importanță în structura blocului de site-uri.
Crearea unui container plutitor folosind float
Exemplu de a crea un blog pe WordPress 4
Inițial, elementele de pagină web sunt dispuse unul în spatele celuilalt, în ordinea în care sunt definite într-un cod html. Prin introducerea unui cod de la punctul tag-uri, titluri, liste, etc. Pe pagina pe care le vedem în aceeași ordine. Dar, folosind unele css atribute putem schimba această ordine. Un float.
float regula ne permite crearea așa-numitele elemente plutitoare. Asta este, putem seta elementul bloc marginea din stânga sau la dreapta aliniat al elementului părinte (un bloc al containerului în care este încorporat, sau de către pagini web). In acest element de blocare va fi presată pe marginea corespunzătoare a părintelui, iar restul conținutului va curge în jurul acestuia din partea opusă. Așa cum am văzut în pură html, atunci când sunt considerate cu aliniaza valorile atributelor de stânga și la dreapta pentru tag-ul img, care este folosit pentru a insera imagini de pe pagina web.
Această regulă poate fi de trei valori posibile:
În mod implicit, se utilizează o valoare care să nu float. adică, elementele nu au nici un flux, și sunt pe ordinea de succesiune.
Valorile Aliniere la stânga și la dreapta elemente ale paginii web, respectiv, marginea din stânga și din dreapta a elementului mamă, iar restul conținutului va curge în jurul acestuia pe partea opusă.
Luați în considerare două elemente ale blocului. Pentru a începe, pur și simplu evidențiați de fundal în culori diferite, cu ajutorul unor reguli de fond:
Și acum, pentru prima și div-let prescrie float cu o valoare de obicei, la stânga, și să-l întreb prin marjă de proprietăți de indentare pentru claritate, de interacțiunea cu tag-ul adiacent:
După cum puteți vedea, primul div a devenit aliniat la stânga și conținutul slănina de celule adiacente înfășurați în jurul ei pe partea dreaptă.
În aplicarea normelor la elementul linia float, acesta din urmă începe să se comporte ca o interacțiune la nivel de bloc cu alte elemente ale pagini web. De exemplu, în situații normale, normele de înălțime și lățime pentru elementele rând nu vor funcționa. Dar, după aplicarea flotorul atribut, parametrii de dimensiune începe la o dată pentru a avea o valoare.
Să adăugăm la exemplele anterioare ale duratei și dimensiunea pentru el prescrie în stil:
Conținutul duratei elementului rând
Figura arată că regulile de lățimea și înălțimea pentru durata și nu au de lucru și dimensiunile sale devin egale, în conformitate cu conținutul său.
Acum, adăugați un element de interval float, de obicei, la sensul stânga:
Conținutul duratei elementului rând
Acum, elementul etalon dobândite în conformitate cu normele și elementele css dimensiuni de oțel adiacente să curgă în jurul ei de pe partea dreapta. De aici putem trage concluzia că regula poate fi folosita ca un flotor la literele mici, și pentru a bloca elemente. Mai mult decât atât, indiferent care element este folosit, de obicei, devine bloc.
Ce se întâmplă dacă setați aceeași valoare a atributului stil float pentru mai multe elemente consecutive? Să vedem:
Conținutul duratei elementului rând
Ei au aliniat orizontal unul cu celălalt, în ordinea în care acestea sunt înregistrate într-un cod html și va fi aliniat la marginea specificată a elementului mamă.
Rămâne de notat faptul că, în general, float utilizat în structura de bloc, bazat pe containere plutitoare. În aplicarea unui astfel de design este adesea necesar să se plaseze toate elementele de mai jos cele care au fost aliniate la marginea din stânga sau din dreapta. Dacă pur și simplu eliminați-le plutească regulă stil sau setat la nici unul pentru ea, rezultatul va fi imprevizibil. În acest caz, este vorba de ajutor, în general, clar.
regulă clară
Exemplu de a crea un blog pe WordPress 4
Stilul atribut clar oferă posibilitatea de a indica în mod clar că elementul de bloc, în orice caz, ar trebui să fie sub containere plutitoare. Cu alte cuvinte, în cazul în care elementul este specificat folosind proprietăți înveliți float, apoi anulează-l acțiune clar pentru aceste părți. Se poate lua următoarele valori:
Când clar elementul stâng egal localizat sub toate elementele pentru care se stabilește lăsat proprietățile float. Dacă ștergeți același drept, apoi a anulat folie de pe partea dreaptă. Și ambele anulează înfășurați pe ambele părți ale elementului. Valoare nici una suprascrie reguli clare și acest lucru este implicit.
Adăugați în exemplul anterior, pentru primul div bloc, în general, clar: stânga:
Conținutul duratei elementului rând
Cu această regulă am făcut div pentru a ignora elementul plutitor din stânga acestuia.
Modular layout-ul - crearea unui aspect coloană folosind float
Exemplu de a crea un blog pe WordPress 4
Așa cum am mai spus, float proprietate este foarte potrivit pentru a crea coloane cu aspect de bloc. Când creați un aspect, este de obicei necesar pentru a construi blocuri unul lângă altul, dar blocurile CSS implicite stau una sub cealaltă. În acest caz, în ajutorul elementelor flotante și proprietatea float.
Să presupunem că vrem să facem un aspect pe două coloane, cu un antet și subsol. În caseta din stânga, vom fi meniul, iar în dreapta conținutul principal al site-ului. Pentru a începe într-o prescrie cod html blocuri corespunzător:
Deci, suntem într-un capac separat bloc (id = "antet"), coloana din stânga (id = "leftbar"), zona de conținut (id = "conținut") și subsol (id = "subsol"). Înainte de blocuri care ar trebui să fie plasate sub vecinii lor anterioare am pus containerele goale la „CLR“ class = atribut. Și astfel acest cod html va fi afișat în browser:
După cum se vede în figură, blocurile aliniate în ordine, de sus în jos. Blocuri create acum prescrie pentru stiluri css lor (cere un leftbar bloc, în general, pluti, limita lățimea a și leftbar-conținut-a și a defini un model pentru blocuri):
CLR clar: ambele;
>
#leftbar float: left;
lățime: 250px;
fundal: # E6EDF1;
>
latime #content: 750px;
fundal: #fff;
>
fundal #footer: # 314451;
Culoare: #fff;
text-align: center;
>
Și uite ce sa întâmplat:
Vedem că prin regula float: left bloc leftbar a început să înoate, iar conținutul blocului de conținut în timp ce curge în jurul acestuia. Pentru a preveni acest lucru cere conținutul extern indentare bloc folosind reguli stânga marja de 10 pixeli mai mare decât lățimea leftbar blocului:
latime #content: 750px;
fundal: #fff;
margin-left: 260px;
>
Ca rezultat, am primit un aspect pe două coloane a site-ului.
Deci, să rezumăm. În acest articol, ne-am uitat la două proprietăți css, care stau la baza blocului de aspect:
- float - utilizarea acestuia sunt elemente flotante și devine posibil să se construiască blocuri adiacente unul cu altul;
- clar - anulează float elemente ale blocului flotant vecine.