margin: auto - wyśrodkowanie kontenera o ustalonej szerokości
border-radius - zaokrąglone rogi
box-shadow - cień pudełka
Rozgrzewka · 3 minuty
Trzy pytania z poprzedniej lekcji
Wymieńcie cztery warstwy pudełka w kolejności od treści na zewnątrz.
Co zmienia box-sizing: border-box w porównaniu z domyślnym zachowaniem?
Gdzie w przeglądarce sprawdzicie realny box model konkretnego elementu?
Część 1 · width, min-width, max-width
Ile miejsca zajmie pudełko?
width i height ustawiają rozmiar pudełka wprost - ma taki rozmiar niezależnie od tego, ile w nim jest treści. min-width i max-width tego nie ustalają, tylko ograniczają: pudełko może się kurczyć albo rosnąć, ale nie mniej niż min-width i nie więcej niż max-width.
MDN: „When a size is given to an element... we refer to it as an extrinsic size” · „A common use of max-width is to cause images to scale down if there is not enough space to display them at their intrinsic width, while making sure they don't become larger than that width” · developer.mozilla.org/docs/Learn_web_development/Core/Styling_basics/Sizing
Część 2 · margin: auto
Wyśrodkowanie kontenera
Wartość auto w margin każe przeglądarce samej policzyć, ile miejsca zostawić z lewej i prawej strony, tak żeby pudełko wypadło dokładnie na środku. Warunek: pudełko musi mieć ustaloną szerokość (width) - bez niej przeglądarka nie ma czego dzielić na pół, i margin: auto nic nie zmieni.
.wrapper {
width: 800px;
margin: 0 auto;
}
/* 0 = góra/dół bez zmian, auto/auto = środek w poziomie */
MDN: „auto - The browser selects a suitable margin to use. For example, in certain cases this value can be used to center an element” · „You can horizontally center an element within its parent by setting margin: 0 auto;” · developer.mozilla.org/docs/Web/CSS/margin
Część 3 · border-radius
Zaokrąglone rogi
border-radius zaokrągla rogi pudełka. Wartość to promień zaokrąglenia - im większa liczba, tym mocniej zaokrąglony róg. Ustawienie 50% na kwadracie zamienia go w koło.
MDN: „You can add rounded corners to a box using the border-radius property... Two lengths or percentages may be used as a value, the first value defining the horizontal radius, and the second the vertical radius” · developer.mozilla.org/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders
Część 4 · box-shadow
Cień pudełka
box-shadow dodaje cień dookoła pudełka. Podajecie cztery rzeczy po kolei: przesunięcie w poziomie, przesunięcie w pionie, rozmycie, a na końcu kolor cienia.
Ciekawostka z MDN: cień umie też działać do środka, nie tylko na zewnątrz. Słowo inset zmienia cień zewnętrzny na wewnętrzny, tak jakby pudełko było wciśnięte do środka zamiast unosić się nad stroną.
MDN: „The box-shadow CSS property adds shadow effects around an element's frame” · „A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color” · „Changes the shadow from an outer box-shadow to an inner box-shadow (as if the content is pressed into the box)” · developer.mozilla.org/docs/Web/CSS/box-shadow · ciekawostka: developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
CSS · egzamin
Tak pytają na egzaminie
1. Zapis CSS margin: auto; oznacza, że marginesy są
odziedziczone po elemencie rodzica dla danego elementu.
stałe dla danej przeglądarki, niezależnie od rozmiaru jej okna.
równe domyślnym wartościom marginesów elementu, do którego są przypisane.
wyliczane przez przeglądarkę tak, aby element został wyśrodkowany w poziomie.
2. Które formatowanie obramowania odpowiada stylowi border-style: dotted solid;?
CKE, EE.09, styczeń 2023, zadanie 31 · CKE, EE.09, styczeń 2022, zadanie 31
Ćwiczenie · przy komputerze · 20 minut
Ćwiczenie: wygląd pudełek
W style.css ustaw głównemu kontenerowi strony width (np. 800px) i margin: auto, żeby strona miała stałą szerokość i była wyśrodkowana.
Dodaj border-radius (np. 10px) i box-shadow (np. 0 4px 12px rgba(0,0,0,.3)) do zdjęcia albo panelu na stronie.
Zapisz, F5, zmniejsz i powiększ okno przeglądarki - kontener ma zostać na środku.
Jeśli pracujecie z Gitem: commit „Wygląd pudełek” i wypchnięcie zmian.
Pamiętajcie:margin: auto centruje tylko wtedy, gdy element ma ustaloną szerokość - bez width nic się nie zmieni.
Pytania kontrolne
Trzy pytania na koniec
Czym różni się min-width od max-width?
Dlaczego margin: auto nie wyśrodkuje pudełka bez ustawionej szerokości?
Ile wartości podajecie w box-shadow i co oznaczają?
To tyle na dziś: temat CSS - model pudełkowy zamknięty, na następnej lekcji stylizacja list, tabel i formularzy.
Rozkład: Model pudełkowy 2/2 → Listy, tabele i formularze
Z realnych wdrożeń
A jak to wygląda w produkcji?
Na lekcji
W produkcji
Status
Sztywna szerokość w pikselach
Jednostki względne (%, vw) i max-width razem z media queries, żeby strona działała na telefonie i monitorze
rozbudowane
Jeden margin: auto na kontenerze
display: flex z justify-content: center centruje elementy w obu osiach naraz, nie tylko w poziomie
rozbudowane
Jedna wartość border-radius na cały kwadrat
Osobne właściwości na każdy róg (np. border-top-left-radius) do asymetrycznych kształtów w kartach i przyciskach
rozbudowane
Jeden box-shadow
Kilka cieni naraz (oddzielone przecinkiem) do efektu głębi - im dalej element „unosi się” nad stroną, tym większy cień