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

Înălțimea și lățimea in CSS


Next Page >>
HTML images

CSS Tutorial » Înălțimea și lățimea in CSS

Cum se aplică înălțimea și lățimea în CSS definiția.

Proprietatea lățime și înălțime definește lățimea și înălțimea zonei de conținut a unui element. Această lățime și înălțime nu include umplutura, marginile sau marginile.

CSS are mai multe proprietăți de dimensiuni, cum ar fi: lățime - lățime, înălțime - înălțime, lățime maximă - lățime maximă, lățime minimă - lățime minimă, înălțime maximă - înălțime maximă și înălțime minimă - înălțime minimă care vă permit să controlați lățimea și înălțimea unui element. Următoarele secțiuni descriu cum să utilizați aceste proprietăți pentru a crea un aspect mai bun al paginii web.

Acest element verde are o lățime de 300 px, o înălțime de 150 px, margine roșie subțire, margine solidă, galbenă de 10 px.

Proprietățile de înălțime și lățime pot avea următoarele valori:

  • auto - Aceasta este implicită. Browserul calculează înălțimea și lățimea
  • length - Definește înălțimea / lățimea în px, cm, etc.
  • % - Definește înălțimea / lățimea în procente din blocul containerului
  • initial - Setează înălțimea / lățimea la valoarea implicită
  • inherit - Înălțimea / lățimea este moștenită de valoarea sa principală

 

Înălțimea și lățimea CSS

Proprietatea lățime și înălțime definește lățimea și înălțimea zonei de conținut a unui element. Această lățime și înălțime nu include umplutura, marginile sau marginile.

Exemplu
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="utf-8">
<title>CSS setează lățimea și înălțimea unui element</title>
<style>
div {
width: 310px;
height: 210px;
background-color: #9FC;
}
</style>
</head>
<body>
<div>Joacă-te cu valorile pentru a vedea cum funcționează!</div>
</body>
</html>

Regulile de stil de mai sus atribuie elementului o lățime fixă ​​de 310 pixeli și o înălțime de 210 pixeli <div>.

Etichete: CSS înălțime și lățime, înălțime și lățime, stil, cum se aplică înălțimea și lățimea în CSS, care este lățimea și înălțimea în CSS

 

Setarea lățimii și înălțimii maxime

Puteți utiliza proprietatea lățime maximă și înălțime maximă pentru a specifica lățimea și înălțimea maximă a zonei de conținut.
Această lățime și înălțime maximă nu include umplutura, marginile sau marginile.

Un element nu poate fi mai lat decât valoarea lățimii maxime, chiar dacă proprietatea lățimii este setată la ceva mai mare. De exemplu, dacă lățimea este setată la 350 px și lățimea maximă este setată la 290 px, lățimea reală a elementului va fi de 290 px. Similar în înălțime. Să vedem un exemplu:

Exemplu
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="utf-8">
<title>CSS Setează lățimea maximă a unui element</title>
<style>
pre {
width: 350px;
background-color: #9F9;
}
div {
width: 350px;
max-width: 250px;
background: #bbb3ff;
}
p {
float: left;
max-width: 400px;
background: #eee8aa;
}
</style>
</head>
<body>
<pre>această cutie verde are 350 px</pre>
<div>Lățimea maximă a acestui element div este setată la 250 px, deci nu poate fi mai mare decât aceasta.</div>
<p>Introduceți un text pentru a vedea cum funcționează.</p>
</body>
</html>
Notă: dacă proprietatea lățime minimă este specificată cu o valoare mai mare decât proprietatea lățime maximă, în acest caz, se va aplica valoarea lățimii minime.

 

Setări minime de lățime și înălțime

Puteți utiliza proprietatea min-lățime și min-înălțime pentru a specifica lățimea și înălțimea minimă a zonei de conținut. Această lățime și înălțime minime nu include umplutura, marginile sau marginile.

Un element nu poate fi mai îngust decât valoarea lățimii minime, chiar dacă proprietatea lățimii este setată la ceva mai mic. De exemplu, dacă lățimea este setată la 300 px și lățimea minimă este setată la 400 px, lățimea reală a elementului va fi de 400 px. Să vedem cum funcționează cu adevărat:

Exemplu
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="utf-8">
<title>CSS setează lățimea minimă a unui element</title>
<style>
pre {
width: 300px;
background-color: #9F9;
}
div {
width: 100px;
min-width: 350px;
background: #bbb3ff;
}
p {
float: left;
min-width: 400px;
background: #eee8aa;
}
</style>
</head>
<body>
<h2>CSS setează lățimea minimă a unui element</h2>
<pre>această cutie verde are 300 px</pre>
<div>Lățimea minimă a acestui element div este setată la 350 px,
deci nu poate fi mai îngust decât atât.</div>
<p>Introduceți un text pentru a vedea cum funcționează.</p>
</body>
</html>
Notă: Proprietatea cu lățimea minimă este în general utilizată pentru a se asigura că un element are cel puțin o lățime minimă, chiar dacă nu este prezent conținut. Cu toate acestea, elementului i se va permite să crească normal dacă conținutul său depășește lățimea minimă stabilită.

 

procentul de înălțime și lățime CSS nu funcționează

cum se face înălțimea la fel ca lățimea in CSS

care este lățime și înălțime CSS intr-o cutie div

Tags: procentul de înălțime și lățime css nu funcționează, stenogramă, proprietăți, auto, raport, cum se face înălțimea la fel ca lățimea

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.


analytics piwika