CSS Box Sizing
Lățimea și înălțimea unui element pot fi calculate în două moduri, cu padding-ul și bordurile incluse sau lăsate deoparte, iar proprietatea CSS box-sizing alege care dintre ele se aplică.
Dacă nu o setezi, browserul le lasă în afara valorii pe care ai dat-o și le adaugă după aceea:
- lățimea reală = width + padding + border
- înălțimea reală = height + padding + border
Așadar, padding-ul și bordura se adaugă peste dimensiunea pe care ai specificat-o, iar elementul apare adesea mai mare decât te așteptai. box-sizing rezolvă această problemă.
Exemplu
Ambele elemente <div> cer aceeași lățime și înălțime, dar apar la dimensiuni diferite: doar al doilea are padding-ul suplimentar care îl mărește.
Output: complete HTML page "}, {
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Without Box Sizing</title>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<h2>Without box-sizing</h2>
<div class="div1">This div has width: 300px and height: 100px.</div>
<br>
<div class="div2">This div also has width: 300px and height: 100px.</div>
<p>The two divs above end up with different sizes, because div2 has padding that is added to the specified width and height.</p>
</body>
</html>
Soluția CSS box-sizing
Cu box-sizing, padding-ul și bordura pot deveni parte din lățimea și înălțimea totală pe care le declari. Valoarea care face asta este box-sizing: border-box;, care le păstrează în interiorul calculului.
Rezultatul este atât de bun încât mulți dezvoltatori și-l doresc pe fiecare element din paginile lor. Browserele aplică deja box-sizing: border-box; multor elemente de formular, dar nu tuturor, ceea ce explică de ce câmpurile de input și zonele de text pot arăta diferit la width: 100%;.
Să setezi box-sizing: border-box; pe tot este și sigur, și înțelept.
Exemplu
Adaugă box-sizing: border-box; la cele două elemente <div> și acum apar la dimensiuni identice.
Output: complete HTML page "}, {
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>With Box Sizing</title>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<h2>With box-sizing: border-box</h2>
<div class="div1">Both divs are the same size now!</div>
<br>
<div class="div2">Hooray!</div>
<p>Both divs appear the same size because box-sizing: border-box includes padding and border in the total width and height.</p>
</body>
</html>
Box-sizing universal
Ca să acoperi întreaga pagină, pune box-sizing: border-box; pe selectorul universal *.
Output: complete HTML page "}, {
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Universal Box Sizing</title>
<style>
* {
box-sizing: border-box;
}
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<h2>Universal box-sizing</h2>
<div class="div1">This div has width: 300px and height: 100px.</div>
<br>
<div class="div2">This div also has width: 300px and height: 100px.</div>
<p>With the universal selector (*) set to box-sizing: border-box, all elements include padding and border in their total width and height.</p>
</body>
</html>