Używanie CSS do umieszczania elementów HTML

• Może 12, 2024

Reguły CSS umożliwiają umieszczanie elementów HTML dokładnie tam, gdzie chcesz. Możesz dostosować sposób, w jaki reagują na inne elementy wokół nich, a nawet całkowicie je ukryć. Oto podział na właściwości umieszczania CSS.

Wyświetlanie: ta właściwość określa sposób wyświetlania elementu. Ustawienie wyświetlania na „none” całkowicie ukrywa element, podczas gdy inne wartości mogą zmienić sposób, w jaki element reaguje na inne właściwości i elementy. Na przykład div są domyślnie ustawione tak, aby wyświetlały się jako „blok”, co oznacza, że ​​działa jak prostokątny obiekt, ale można użyć „display: inline”, aby zmusić div do działania jak akapit. Możesz też zrobić coś przeciwnego i użyć polecenia „display: block”, aby zmusić akapit do działania jak div.

Pozycja: określa, jak element reaguje na otaczające go elementy. Elementy domyślnie używają „position: static”, co oznacza, że ​​są wyświetlane w kolejności zgodnej z kodem HTML. „Pozycja: względna” oznacza, że ​​statyczne położenie elementu jest obliczane, a następnie równoważone przez wszystko, co wskażesz we właściwościach „u góry” i „po lewej”. Pozostałe elementy strony działają tak, jakby element względny wciąż znajdował się w swoim statycznym położeniu. Elementy „Pozycja: absolutna” ignorują ich statyczne położenie, opierając swoje położenie wyłącznie na wartościach właściwości u góry, z lewej, z prawej i u dołu. Ponadto inne elementy zignorują ten element (więc jeśli nie będziesz ostrożny, możesz skończyć z niechlujnymi nakładkami). „Pozycja: ustalona” jest podobna do „pozycja: absolutna”, z tym wyjątkiem, że element zachowa swoje miejsce, nawet jeśli odwiedzający przewinie stronę.

Widoczność: decyduje, czy element ma być wyświetlany na stronie, czy nie. Różnica między „display: none” a „visibility: hidden” polega na tym, że w pierwszym przypadku pozostałe elementy strony zachowują się tak, jakby niewidzialny obiekt nie istniał; w drugim przypadku inne elementy zajmą miejsce dla elementu ukrytego. Oczywiście ustawienie domyślne to „widoczne”.

Float: Ustawia, czy element ma być kaskadowany na lewo czy na prawo od innych elementów (lub wcale nie jest kaskadowany, co jest ustawieniem domyślnym). Ta właściwość jest niezwykle pomocna w uzyskiwaniu prawidłowego pozycjonowania elementów względnych. Musisz ustawić szerokość dowolnego elementu pływającego, aby nie był wyświetlany poprawnie. Ponadto, jeśli użyjesz liczby zmiennoprzecinkowej dla jednego elementu, prawdopodobnie będziesz chciał ustawić również właściwość dla wszystkich elementów wokół niego.

Wyczyść: ta właściwość działa w połączeniu z właściwością „float”. Decyduje, w jaki sposób element pozwoli innym elementom unosić się wokół niego - „clear: left” oznacza, że ​​żaden inny element nie może unosić się na lewo; „clear: right” blokuje z prawej strony, a „clear: oba” oznacza, że ​​żaden element nie może unosić się po obu stronach. Domyślne ustawienie to „clear: none” (co oznacza, że ​​inne elementy mogą unosić się na boki).

Instrukcje Wideo: Position - pozycjonowanie elementów na stronie (Może 2024).