Share
Standardul CSS afirmă că granițele și căptușelile trebuie aplicate peste lățimea specificată a unui element. Ca atare, dacă am o dimensiune 200px div, și aplică 40px în valoare de frontiere și padding, total, lățimea va fi apoi 240px. Acest lucru are sens perfect; cu toate acestea, Internet Explorer a făcut lucrurile în mod diferit. Au adoptat un model în care lățimea maximă este cea pe care ați specificat-o. Granițele și căptușelile sunt apoi luate în considerare în această lățime, reducând zona de conținut. Drept rezultat, lățimea elementului nu depășește niciodată lățimea declarată de 200px.
Deoarece lucrăm în cea mai mare parte cu aspecte plutitoare extrem de sensibile, în care chiar adăugarea unei margini de 1px poate sparge designul, mă întreb: a făcut Internet Explorer să aibă dreptate?
"Proprietatea CSS cu dimensiunea cutiei este utilizată pentru a modifica modelul implicit de casetă CSS utilizat pentru a calcula lățimile și înălțimile elementelor. Este posibil să utilizați această proprietate pentru a emula comportamentul browserelor care nu suportă corect specificația modelului căsuței CSS. "
Acest lucru înseamnă că, dacă trebuie să decideți că doriți să imitați interpretarea originală a modelului cutie de pe Internet Explorer, puteți. Valoarea implicită pentru dimensionarea în cutie este "caseta de conținut". Aceasta înseamnă pur și simplu că lățimea și înălțimea unui element nu includ marginile și căptușelile (sau marginile).
Prin schimbarea acestei valori la "border-box", valorile lățimii și înălțimii atunci include frontierele și umplutura.
#box width: 200px; înălțime: 200px; fundal: roșu; padding: 10px; margine: 10 pix solid negru; -moz-box-size: caseta de margine; -webkit-box-size: caseta de frontieră; box-size: caseta de margine;
Pentru că am declarat box-dimensionare cu o valoare a "casetei de frontieră", lățimea finală a elementului #box, denumită mai sus, va fi de 200px.
Mai ales pentru planurile plutitoare, acest lucru vă poate salva o mulțime de dureri de cap! Dar cu asta am spus că sunt încă nedecis. Care sunt gândurile tale în interpretarea de către Internet Explorer a modelului de cutie?
Accentsconagua