Dimensiunea cutiei div CSS box-sizing: border-box
CSS Tutorial » box-sizing: border-box
Ce este și la ce serveste?
Proprietatea CSS cu dimensiunea casetei box-sizing: border-box setează modul în care se calculează lățimea și înălțimea totală a unui element.
Ce face proprietatea de dimensionare a cutiei?
Dimensiunea casetei proprietății CSS indică modul în care ar trebui calculate măsurile unui element. Ce inseamna asta? Ei bine, dacă adăugați o căptușeală sau un chenar, dimensiunea de redare a cutiei va fi: lățime + căptușire + chenar și atunci nu se potrivește.
Sintaxa:
Acest element verde are o lățime de 300 px, o înălțime de 150 px, margine roșie de 14 px, solidă, margine galbenă de 10 px și
centrat în centru.
Caseta div verde nu se potrivește cu cea galbenă
Fara box-sizing: border-box; Proprietate dimensiune casetă CSS
În mod implicit, lățimea și înălțimea unui element sunt calculate astfel:
lățime + umplutură + chenar = lățimea reală a unui element
înălțime + umplutură + chenar = înălțimea reală a unui element
Acest lucru înseamnă: când setați lățimea / înălțimea unui element, elementul apare adesea mai mare decât ați setat (deoarece marginea și căptușeala elementului sunt adăugate la lățimea / înălțimea specificată a elementului).
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
width: 300px;
height: 100px;
border: 2px solid blue;
}.div2 {
width: 300px;
height: 100px;
padding: 30px;
border: 6px solid red;
}
</style>
</head>
<body><div class ="div1"> Această divizare este mai mică (lățimea este de 300 px și înălțimea este de 100 px). </div>
<br /> <br />
<div class = "div2">Aceasta cutie div este mai mare (lățimea este de asemenea de 300 px și înălțimea de 100 px).
Această cutie div este mai mare (lățimea este de asemenea de 300 px și înălțimea de 100 px). </div></body>
</html>
Proprietatea cu dimensiunea casetei va rezolva această problemă.
Etichete: dimensiunea casetei css dimensionarea casetei: caseta cu chenar, dimensiunea div css, dimensiunea casetei css, redimensionarea div css, redimensionarea casetei de text css
Cu proprietatea dimensiunii casetei CSS
Proprietatea dimensiunii cutiei ne permite să includem umplutura și chenarul în lățimea și înălțimea totală a unui element.
Dacă setați dimensiunea cutiei: border-box; Într-un element, căptușeala și chenarul sunt incluse în lățime și înălțime:
<!DOCTYPE html>
<html>
<head>
<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>
<div class ="div1"> Ambele div au aceeași dimensiune acum!</div>
<br>
<div class ="div2"> ¡Hurra! </div>
</body>
</html>
Aplicați box-sizing: border-box; la toate elementele
Următorul cod asigură că toate elementele sunt dimensionate în acest mod cât mai intuitiv.
Multe browsere folosesc deja box-sizing: border-box; pentru multe elemente de formă (dar nu pentru toate, motiv pentru care intrările și zonele text arată diferit ca lățime: 100%;).
Aplicarea acestui lucru la toate articolele este sigură și prudentă:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}* {
box-sizing: border-box;
}input, textarea {
width: 100%;
}
</style>
</head>
<body><form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br>
Comments:<br>
<textarea name="message" rows="5" cols="30">
</textarea>
<br><br>
<input type="submit" value="Submit">
</form>
<p> <strong> Sfat: </strong> Încercați să eliminați proprietatea dimensiunii casetei din elementul de stil și să vedeți ce se întâmplă.
Rețineți că lățimea postării, zona textului și butonul de trimitere vor ieși de pe ecran. </p></body>
</html>
div size, box size
redimensionare text box
box-sizing: border-box
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.