Odpowiedź:
Domyślnie szerokość elementu body równa jest szerokości okna przeglądarki. Co to znaczy? Oznacza to, że szerokość elementu body domyślnie dostosuje się do szerokości okna przeglądarki internetowej. Znowu, jej szerokość będzie zależna od szerokości naszego ekranu, czyli jego rozdzielczości.
Domyślnie szerokość elementu blokowego (np. div) równa jest szerokości rodzica, w którym jest on zagnieżdżony. Zatem szerokość elementu <div>,wstawionego bezpośrednio do elementu body, będzie równa jego szerokości.
Szerokość elementów blokowych może być dowolnie zmieniana. W tym celu posługujemy się zasadą CSS o nazwie width (z ang, szerokość). Szerokość najczęściej przyjmuje wartości stałe, wyrażane w px (pixel), czyli w pikselach.
Szerokość elementu może być również wyrażana w wartościach względnych do szerokości rodzica. Mogą to być np. % (procenty). Jeśli rodzic (tak jak w naszym przykładzie) ma 600px szerokości, a szerokość elementu w nim zagnieżdżonego ustalimy na 75%, to z prostej matematyki wyjdzie nam 450px.
Jednak, jeśli zapiszemy powyższe przykłady definiując jedynie szerokość elementu, to nic nam na ekranie się nie pojawi.
Zobaczmy dlaczego tak się dzieje?
Element liniowy – zostanie wyświetlony na ekranie, tylko w sytuacji, gdy dodamy treść do tego elementu.
Element blokowy – zostanie wyświetlony, gdy zaistnieje jedna z dwóch sytuacji, gdy dodamy do niego treść, bądź zdefiniujemy szerokość (width) oraz wysokość (height) elementu blokowego.
Zastosujemy ogólny selektor elementu div, aby dodać kolor tła do wszystkich elementów div. :)
