Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Zmiana sposobu obliczania szerokości elementu

Email Drukuj PDF

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

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15449275