|
box-sizing |
|
|
Dostępne wartości: |
content-box | border-box | inherit |
|
Wartość domyślna: |
content-box |
|
Przykład: |
div {box-sizing:border-box;} |
|
Dziedziczenie: |
Nie |
|
Obsługa: |
Opera |
Za pomocą stylu box-sizing możemy zmienić zachowanie przeglądarki podczas obliczania szerokości formatowanego elementu. Domyślna wartość prezentowanego stylu jest ustawiona na content-box i powoduje, że przeglądarka określa rozmiar, dodając border-width i border-height oraz dopełnienia do rozmiaru okna. Zmiana domyślnego ustawienia box-sizing powoduje, że przeglądarka zaczyna działać w inny sposób.
Zanim poznamy zasadę działania stylu, przyjrzyjmy się prostemu fragmentowi kodu XHTML/HTML.
<div class="glowna">
<div class="kolumna">Lewa kolumna.</div>
<div class="kolumna">Prawa kolumna.</div>
</div>
A teraz pora na przykładowy kod arkusza wykorzystujący właściwości box-sizing. Efekt działania listingu dla obu dostępnych wartości zobaczą jedynie użytkownicy przeglądarki Opera. Natomiast posiadacze Safari, Chrome, Mozilli Firefox oraz Internet Explorera muszą zadowolić się rysunkiem 15.28.
<<przykład>>
<div class="przyklad">
<h3>Przykład działania box-sizing:border-box</h3>
<div style="width:38em;border:1em solid black;">
<div style="box-sizing:border-box;width:50%;border:1em silver ridge;float:left;">Lewa kolumna.</div>
<div style="box-sizing:border-box;width:50%;border:1em silver ridge;float:left;">Prawa kolumna.</div>
</div>
<h3>Przykład działania box-sizing:content-box</h3>
<div style="width:38em;border:1em solid black;">
<div style="box-sizing:content-box;width:50%;border:1em silver ridge;float:left;">Lewa kolumna.</div>
<div style="box-sizing:content-box;width:50%;border:1em silver ridge;float:left;">Prawa kolumna.</div>
</div>
</div>
<</przykład>>
|
|
Rysunek 15.28. Przykład działania box-sizing |
