Share
Weekend-ul trecut am descarcat placa de bord Skeleton a lui Dave Gamache pentru a te juca; bună, curată, distractivă receptivă. Când sa ajuns la designul de formă, mi-a fost amintit de o problemă care poate afecta intrările în aspecte flexibile: lățimi greșite. Dacă ați avut vreodată aceeași problemă sau nu ați știut niciodată despre aceasta, citiți mai departe ...
Să presupunem că avem un aspect cu un element care conține o lățime flexibilă (întindeți browser-ul dvs. și veți întinde containerul). În interiorul containerului nostru avem o varietate de elemente (titluri, paragrafe, reguli orizontale, divizii) și avem și o formulă simplă care găzduiește câțiva biți formați și boboci tipici.
Conținutul crește și se micșorează în funcție de lățimea containerului. Elementele de nivel de blocaj (cum ar fi divs) se potrivesc exact cu lățimea. Acestea umple automat în mod automat 100% din lățimea containerului și, indiferent de eventualele plăcuțe sau margini, ele rămân în ordine în limitele părintelui lor.
Intrările de formulare nu sunt.
Pentru a umple lățimea containerului trebuie să aplicăm a lățime: 100%;. Cu toate acestea, adăugarea de umpluturi, margini sau margini va determina ca intrările noastre să izbucnească din constrângerile containerului. Păcat.
Nu chiar. Modelul CSS Box dictează modul în care se comportă dimensiunile elementului de cale și din moment ce standardele web au fost introduse, am ajuns să acceptăm faptul că umplutura, marginile și granițele adăuga la dimensiunile unui element.
Deci, cu siguranță, divul nostru în acest caz este acela care se comportă în mod neașteptat, dar asta pentru că nu am definit de fapt lățimea.
Se pare că se ocupă de felul în care Internet Explorer era obișnuit. Modul de abordare în mod ciudat a însemnat că ați definit lățimea și înălțimea unui element și s-ar lua în considerare orice umplutură sau granițe în aceste dimensiuni. Dacă ați specificat o div pentru a fi 600px lățime, chiar dacă ați adăugat 10px de umplutură, ar fi în continuare 600px lățime. Veți ști categoric cât de mari erau elementele voastre.
Atâta timp cât eram conștienți de modul în care comportau elementele noastre, am putea permite diferențele și specificând dimensiunile fixe în consecință. Dar în această epocă a aspectelor fluide, nu știm neapărat cât de cuprinzătoare sunt elementele care conțin. Sigur că există o modalitate de a ne face să ne comportăm în același mod ca orice altceva? Din fericire există. Și vom construi un demo rapid pentru ao ilustra.
Așa cum a fost scheletul de schelet care mi-a amintit de această problemă, vom merge și vom lua-o pentru a ne construi rapid o demonstrație.
Notă: Orice stil în placa de bază Skeleton este în scopul de aspect și estetica de bază - adăugarea mea la CSS nu este o critică!
Despachetați fișierele și veți vedea ceva de genul:
Prima schimbare pe care o voi face este index.html. În ultima coloană vom schimba conținutul pentru un formular:
și apoi vom adăuga câteva linii în foile de stil / layout.css:
.coloană background: # f7f7f7; introduceți [type = 'text'], selectați, textarea width: 100%;
Tot ce am facut este ca coloanele sa aiba un fundal gri (astfel incat sa vedem unde se afla limitele) si a facut ca elementele noastre sa fie 100% largi. Verificați rezultatul până acum. Problema introducerilor greșite este ilustrată în mod clar, deci acum la soluția ...
Putem face ca elementele formularului nostru să se comporte în conformitate cu modelul vechi cutie de moduri cu o linie de css ...
introduceți [type = 'text'], textarea box-size: border-box; -moz-box-size: caseta de margine; -webkit-box-size: caseta de frontieră;
Bine, șase linii, dar cea mai importantă este box-size: caseta de margine;, împreună cu frații săi predați de furnizori. Am aplicat această regulă la intrările de text și textare, spunând browserului să-și facă dimensiunile cu umplutură și frontiere interior. Aruncați o privire la demo-ul rezultat, perfecto! Redimensionați browserul și veți vedea că elementele de formă se joacă frumos la fel ca prietenii lor de nivel bloc.
În ceea ce privește suportul pentru browser, ești bine acoperit. În mod ironic, IE7 nu recunoaște proprietatea cu dimensiunea căsuței, dar este singurul browser cu care vei avea probleme.
Accentsconagua