AgerNic.com/ro
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
Tutorial

Dimensiunea cutiei div CSS box-sizing: border-box


Next Page >>
HTML images

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:

box-sizing: content-box | padding-box | border-box | initial | inherit

 

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).

Exemplu

<!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:

Exemplu

<!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>

Notă: Folosirea box-sizing:border-box; este mult mai bine, mulți dezvoltatori doresc ca toate elementele paginilor lor să funcționeze astfel.

 

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ă:

Exemplu

<!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

Tags: div size, box size, redimensionare div, redimensionare css text

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.