procenty
- Data publikacji
- Ostatnio edytowano
Wyjaśnienie
Wartości niektórych właściwości CSS możemy wyrazić w procentach. Procenty to połączenie interesującej nas liczby oraz znaku %. Wartości wyrażone w procentach zawsze obliczane są przez przeglądarkę internetową na podstawie dodatkowego czynnika, który często jest różny dla poszczególnych właściwości CSS.
Przykładowo. Wartość 80% zbudowana jest z liczby całkowitej 80 oraz ze znaku %. Wartość 80% oznacza rozmiar równy osiemdziesięciu procentom "czegoś".
Przykład
width:70%;
rozmiar szerokości obszaru zawartości tego elementu "div" wynosi "400px", ponieważ do tego elementu "div" została dodana właściwość "width" wraz z wartością "400px"
rozmiar szerokości obszaru zawartości tego elementu "div" wynosi "70%" rozmiaru szerokości obszaru zawartości elementu rodzica tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "width" wraz z wartością "70%", dlatego ostatecznym rozmiarem szerokości obszaru zawartości tego elementu "div" jest rozmiar równy "280px", bo "0.7×400px=280px"
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#rodzic {
width:400px;
font-size:1.3em;
background-color:lightgreen;
}
#dziecko {
width:70%;
background-color:lightblue;
}
</style>
</head>
<body>
<div id="rodzic">
rozmiar szerokości obszaru zawartości tego elementu "div" wynosi "400px", ponieważ do tego elementu "div" została dodana właściwość "width" wraz z wartością "400px"
<div id="dziecko">
rozmiar szerokości obszaru zawartości tego elementu "div" wynosi "70%" rozmiaru szerokości obszaru zawartości elementu rodzica tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "width" wraz z wartością "70%", dlatego ostatecznym rozmiarem szerokości obszaru zawartości tego elementu "div" jest rozmiar równy "280px", bo "0.7×400px=280px"
</div>
</div>
</body>
</html>Interpretacja
-
tak
-
tak
-
tak
-
tak
-
tak
-
tak