Înălțimea și lățimea in CSS
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.
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.
<!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:
<!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>
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:
<!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>
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
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.