W HTML wszystkie elementy można podzielić na bloki i małe. Elementy blokowe są zwykle reprezentowane jako prostokątne obszary z pewną ilością informacji. Z ich pomocą tworzona jest siatka strony. Takie elementy zajmują całą dostępną przestrzeń na szerokości, a przed i po nich zwykle jest transfer liniowy. Bloki można ustawić jako wcięcia, poziome i pionowe.

Funkcje elementów blokowych

Blok zawiera znaczniki, które przydzielają dużą ilość informacji tekstowych :,

,

,

. Znacznik jest często używany w układzie nowoczesnych witryn do tworzenia sieci, a po prostu oznacza blok lub kontener. Dopuszczalne jest wstawianie innych znaczników, które mogą nie być ze wszystkimi elementami blokowymi, więc jest to wygodne w użyciu. Bloki są zwykle umieszczone jeden nad drugim i nie są wstawiane do elementarnych elementów. HTML to ciąg elementów HTML, a CSS służy do jego projektowania.


Dla danej szerokości treści całkowita szerokość bloku składa się z wartości wcięcia prawego i lewego, pól, granic i szerokości. Na danej wysokości - od górnego i dolnego wcięcia, pola, granice i wysokości. Tekst w elementach bloków jest wyrównany domyślnie na lewej krawędzi. Jeśli jeden z nich zawiera elementarne elementy razem z blokami, wówczas wokół dużych tworzony jest anonimowy blok. Dla niego zostanie zastosowany styl domyślny. Będzie też śledził dany styl, przypisany do niegoojciec

Strumień dokumentu

Strumień odnosi się do kolejności, w jakiej wyświetlane są elementy strony, określone przez właściwości określone w CSS. W tym samym czasie bloki są domyślnie ustawiane w linii od góry, a małe znaczniki z brakiem miejsca są przenoszone do nowej linii i znajdują się od góry do dołu i od lewej do prawej. Położenie elementów na stronie zależy od jej miejsca w kodzie: im wyższą, tym wcześniej znajduje się. Każdy z elementów bloku wygląda jak prostokąt, który odsuwa sąsiednie. Możesz zmienić to zachowanie za pomocą specjalnych właściwości. Wyrównanie w CSS niektórych bloków lub w środku boków kontenera nazywa się pozycjonowaniem.

Pozycjonowanie elementów

Lokalizacją bloków można zarządzać za pomocą pozycjonowania bezwzględnego i względnego. Pozycjonowanie służy do ustawiania dużych sekcji na stronie dla określonego miejsca do tworzenia złożonych interfejsów, wyskakujących okienek i elementów dekoracyjnych. Główna właściwość używana do pozycjonowania bloków w CSS - pozycja. Ma cztery główne właściwości:

względny;

absolutny;

poprawione;

statyczne.

Za ich pomocą można przełączać tryby położenia, ustawiając jeden z czterech parametrów: górny, prawy, dolny lub lewy. Istnieje również właściwość do układania warstw - z-index. Pozycjonowanie za pomocą właściwości statycznych zwykle nie jest używane, ponieważ domyślnie wskazuje lokalizację bloków. Dlatego użycie jakichkolwiek parametrów nie ma na nie wpływu. Dla użytego układupozostałe trzy właściwości: względna, absolutna, stała.

Względne pozycjonowanie

Względne pozycjonowanie bloków w CSS, czyli położenie właściwości: względne, oznacza, że ​​element można przenieść, zmieniło swoje pierwotne położenie. Taki blok wciąż pozostaje w strumieniu. W rzeczywistości nie otrząsa się, ale swoją kopię. Określa wartości właściwości dla dokładnego wskazania, w jaki sposób blok zostanie przesunięty w jednym kierunku lub w drugim. Są mierzone częściej w pikselach. Ale użyjmy również innych jednostek.

Używanie właściwości we względnym ustawieniu

Górna właściwość przesuwa kopię bloku w górę lub w dół o liczbę pikseli określoną w właściwości. Gdy są użyte, elementy znajdujące się poniżej lub powyżej pozostają na swoich miejscach, ponieważ w rzeczywistości przesunięty blok również się nie porusza. Właściwość bottom przesuwa blok w przeciwnej własności w kierunku górnym. Wartość dodatnia pomaga w przesunięciu w górę, a ujemna w dół. Właściwości i lewo-prawo przesuwa element odpowiednio w prawo iw lewo. Łącząc je, możesz ustawić blok dokładną lokalizację na stronie, przesuwając ją wzdłuż pionowych i poziomych osi współrzędnych. Jeśli zwiększysz wcięcia, będą one obliczane nie od krawędzi samego bloku, ale od jego przesuniętej strony do kopii.

Bezwzględne pozycjonowanie

Bezwzględne pozycjonowanie bloków w CSS jest ustawione na bezwzględną wartość pozycji pozycyjnej. Pozycja, która jest całkowicie umieszczona, wypada ze strumienia dokumentów, a jej położenie zajmują sąsiednie bloki. Szerokość tegoElement jest rozciągany w zależności od jego zawartości i można go wyeliminować, ustawiając pewne wartości na właściwości górnej, lewej, prawej i dolnej. Bezwzględne pozycjonowanie bloków w CSS jest wygodne dla nagłówków. Ale pozycja wyzwalaczy: bezwzględna nie tylko dla bloku, ale także dla elementarnych elementów.

Wyrównanie elementów w środku

Całkowicie zorientowany element liniowy będzie zachowywał się dokładnie w taki sam sposób, jak sznur. Dlatego za pomocą pozycjonowania możesz kontrolować CSS i tekst. Możesz zastosować nowe właściwości, na przykład, aby zmienić wysokość i szerokość. Aby wyśrodkować i wyrównać w pionie w CSS, używana jest kombinacja kilku właściwości. Zarządza wyrównaniem górnej pionowej właściwości. Jeśli chcesz umieścić blok w CSS w środku, główny pojemnik powinien być względnie ustawiony, a element wyrównany - całkowicie ustawiony. Kontener musi ustawić najwyższą właściwość: 50% i użyć właściwości translate o wartości "0 -50%", aby przesunąć element o połowę wysokości. Absolutnie ustawione jako elementy mogą być przydzielone do nowego typu, ponieważ są stosowane do właściwości, które nie są dostępne dla innych typów pozycjonowania.

Pozycjonowanie względem lewego górnego narożnika przeglądarki

Właściwości w lewo, w górę, w prawo i w dole z elementami absolutnie i względnie rozmieszczonymi działają inaczej. W przypadku elementów względnych właściwości te ustalają obciążenie w stosunku do miejsca, w którym znajduje się element. Absolutnie nakrapiane zajmują miejscewzględem określonego układu współrzędnych powiązanego z rozmiarem okna przeglądarki. Punktem wyjścia tego systemu są rogi okna. Podczas korzystania z właściwości left, wcięcie zostanie odjęte od lewej strony przeglądarki, ale pasek przewijania nie pojawi się. Najlepsza właściwość w pozycjonowaniu bezwzględnym ustawia wcięcie z góry przeglądarki na górę elementu, do którego jest stosowane. Łącząc obie właściwości, element można przenieść w stosunku do lewego górnego rogu przeglądarki.