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

Modelul cutie in CSS - Box model


Next Page >>
HTML images

CSS Tutorial » Modelul cutie in CSS

Fiecare element care poate fi afișat pe o pagină web este alcătuit din una sau mai multe casete dreptunghiulare.

Modelul de casetă CSS descrie de obicei modul în care aceste cutii dreptunghiulare sunt așezate pe o pagină web. Aceste casete pot avea proprietăți diferite și pot interacționa între ele în moduri diferite, dar fiecare casetă are o zonă de conținut și zone opționale de umplere, marginea și chenarul înconjurătoare.

Căptușeala este spațiul transparent între conținutul elementului și marginea acestuia (sau marginea casetei, dacă nu are chenar), în timp ce marginea este spațiul transparent din jurul chenarului.

De asemenea, dacă un element are culoarea de fundal, acesta va fi vizibil prin zona de umplere. Zona de margine rămâne întotdeauna transparentă, nu este afectată de culoarea de fundal a elementului, totuși face ca culoarea de fundal a elementului părinte să fie afișată.

 

Lățimea și înălțimea cutiei div in CSS

Pentru a seta corect lățimea și înălțimea unui element în toate browserele, trebuie să știți cum funcționează modelul casetei.

Exemplu
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="utf-8">
<title>Model CSS format cutie</title>
<style>
div {
width: 320px;
height: 210px;
padding: 15px;
border: 6px solid green;
margin: 20px auto;
}
</style>
</head>
<body>
<div>
<h2>Stil pentru cutie div</h2>
<p>&lt;style&gt;<br>
div {<br>
width: 320px;<br>
height: 210px;<br>
padding: 15px;<br>
border: 6px solid green;<br>
margin: 20px auto;<br>
}<br>
&lt;/style&gt;</p>
</div>
</body>
</html>
Notă: când setați lățimea și înălțimea unui element cu CSS, pur și simplu setați lățimea și înălțimea zonei de conținut. Pentru a calcula dimensiunea completă a unui element, trebuie să adăugați, de asemenea, umplutură, margini și margini.

Etichete: modelul cutiei CSS, ce este, modelul cutiei tradiționale CSS, cutia containerului, schimbarea modelului cutiei CSS

 

Proprietatea CSS padding

Proprietățile CSS padding vă permit să setați spațiul dintre conținutul unui element și marginea acestuia (sau marginea casetei elementului, dacă nu are un chenar definit).

Exemplu

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 4px solid green;
background-color: #93FFC9;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 40px;
padding-left: 30px;
}
</style>
</head>
<body>

<h2>Utilizați proprietăți individuale de umplere padding</h2>

<div>Acest element div are un padding superior de 20 px,
o umplere dreaptă de 10 px, o umplutură inferioară de 40 px și a
30 px stânga umplere. - Acest element div are un padding
20 px sus, 10 px umplere dreapta, o umplere
0 px jos și 30 px umplere la stânga.
- Acest element div are un padding superioară de 20
px, o umplutură dreaptă de 10 px, o umplutură de jos de
40 px și 30 px de umplere la stânga.</div>

</body>
</html>

 

Setați margini pentru fiecare parte

Puteți specifica margini pentru fețele individuale ale unui element, cum ar fi părțile de sus, dreapta, jos și stânga, utilizând proprietățile CSS margin-top, margin-right, margin-bottom și margin-left, respectiv.

Să încercăm următorul exemplu pentru a înțelege cum funcționează:

Exemplu

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid red;
margin-top: 24px;
margin-bottom: 10px;
margin-right: 50px;
margin-left: 180px;
background-color: lightblue;
}
</style>
</head>
<body>

<h2>Usar propiedades de margen individuales</h2>

<div>Acest element div are o marjă superioară de 24 px,
o marjă dreaptă de 50 px, o marjă inferioară de 10 px și a
Marja stângă de 180 px. - Acest element div are un
24 px marja superioară, 50 px marja dreaptă,
o marjă de jos de 10 px și o margine de stânga de 180 px.</div>

</body>
</html>

 

margin si padding box CSS

diagramă model cutie

exemple de modele cutie css

Tags: model cutie, poziționare, css poziție relativă, casetă widget, modele de aspect CSS, explicați caracteristicile modelului cutiei pentru css, diagramă model cutie, exemple de modele cutie

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.