Jednostki długości w CSS
W CSS jednostki długości są używane do zdefiniowania wymiaru elementu HTML. Jednostki te mogą mieć stałe wartości, a także wartości dynamiczne dla interfejsu responsywnego. Z tego powodu są one podzielone na dwie klasy absolutne i względne. absolutny klasa zawiera te jednostki, które oferują stałe wartości, podczas gdy względny klasa ma jednostki, które zmieniają swoje wartości zgodnie z elementem nadrzędnym lub głównym.
Jednostki długości są używane przede wszystkim do ustawiania szerokości, wysokości, wyściółki, marginesu, granicy, wielkości czcionki i wielu więcej. Mając na uwadze znaczenie, ten przewodnik zawiera przegląd jednostek długości w CSS z następującymi wynikami uczenia się.
- Lista jednostek długości w klasie absolutnej
- Lista jednostek długości w klasie względnej
- Wykorzystanie jednostek bezwzględnej i jednostek długości względnej
Jednostki długości CSS
W tej sekcji zapisuje jednostki długości w ich odpowiednim kategorii. Jednostki długości są ogólnie podzielone na dwie kategorie, Absolutne i względne. Zbadajmy jednostki, które znajdują się w tych kategoriach i ich użycie.
Jak używać jednostek bezwzględnych
Ta kategoria zawiera te jednostki długości stała wartość W całym dokumencie. W sytuacjach, w których wymagany jest stały rozmiar elementu, jednostki te lepiej służyć celowi. Jednak jednostki bezwzględnej długości nie są odpowiednie do responsywnych projektów. Poniższa tabela zawiera listę i opis jednostek bezwzględnej.
| Jednostka | Symbol | Relacja |
|---|---|---|
| Cal | W | 1 cala = 1 cali lub 1 cali = 96px |
| Centymetr | cm | 1in = 2.5 cm lub 1 cm = 38px |
| Milimetr | mm | 1 cala = 25 mm lub 1 mm = 3.84px |
| Picas | PC | 1in = 6pc lub 1pc = 16px |
| Zwrotnica | Pt | 1In = 72pt lub 1pt = 1.13px |
| Piksele | px | 1in = 96px lub 1px = 1px |
W powyższej tabeli największa jednostka to „Cale (in)” podczas gdy najmniejsza jednostka jest „Pixels (PX)”. Wśród nich, px Jednostka jest najczęściej praktykowana.
Przykład: Używanie jednostek bezwzględnej długości
Poniższy kod pokazuje użycie w jednostkach, PX, PT i MM długości.
Html
Szerokość i wysokość w pikselach (PX)
Szerokość i wysokość w punktach (PT)
Szerokość i wysokość w milimetrze (mm)
W powyższym kodzie trzy akapity są zamknięte w pojedynczy element (służy jako element nadrzędny)
CSS
Z powyższych CSS szerokość i wysokość DIV element jest w calach, podczas gdy PX, PT i MM są używane jako jednostki długości w akapitach.
Wyjście
Na podstawie produkcji obserwuje się, że na elementy dziecięce (akapity) nie wpływają ich element macierzystego ().
Jak używać względnych jednostek długości
Względne jednostki długości dynamicznie manipulują wielkością elementu w odniesieniu do ich rodzica lub elementu korzeniowego. Poniższa lista odnosi się do jednostek względnej długości CSS.
| Jednostka | Symbol | Opis |
|---|---|---|
| Odsetek | % | Względny odsetek elementu nadrzędnego |
| Efemeryczny | em | Odnosi się do wielkości czcionki elementu nadrzędnego |
| Korzeni efemeryczne | rem | Odnosi się do wielkości czcionki elementu głównego |
| Szerokość rzutni | VW | W stosunku do szerokości przeglądarki |
| Wysokość rzutni | VH | W stosunku do wysokości przeglądarki |
| Postać | Ch | W stosunku do szerokości postaci „0” |
| Ex Unit | były | W stosunku do wysokości „x (niższa)” |
| Minimum Viewport | Vmin | Vmin odnosi się do minimalnej wysokości lub szerokości wody przeglądarki |
| Maksymalne | Vmax | VMAX dotyczy maksymalnej wysokości/szerokości wody przeglądarki |
Notatka: W przypadku, gdy nie ma elementu nadrzędnego, jednostki są dostosowywane zgodnie z elementem głównym ().
Przykład: Korzystanie z jednostek długości względnych
Ten przykład zawiera użycie różnych jednostek względnej długości.
Html
Szerokość i wysokość w procentach według elementu nadrzędnego
Szerokość i wysokość w EM (według rodzica)
Szerokość i wysokość w REM (według roota)
W powyższym kodzie tworzone są trzy akapity i są zawarte w element nadrzędny (div). Te akapity wykorzystują różne jednostki względnej (Procent, em i REM) Aby ustawić szerokość i wysokość.
CSS
W powyższym kodzie CSS definiuje się szerokość, wysokość, kolor tła i granica elementu nadrzędnego. .za , .em i .Klasy REM definiują wysokość/szerokość w procentowym (%), efemerycznym (EM) i korzeniowym efemerycznym (REM).
Notatka: Ponieważ domyślna wielkość czcionki Div wynosi 16px, dlatego 1EM = 16px i 1rem = 16px. rem ustawia rozmiar zgodnie z elementem korzenia (ciała), podczas gdy em ustawiłby wartość zgodnie z elementem nadrzędnym (div).
Wyjście
Z wyjścia obserwuje się, że Procent i jednostki EM Dostosuj szerokość/wysokość zgodnie z elementem nadrzędnym (div), podczas gdy rem Jednostka ustawia szerokość/wysokość w odniesieniu do elementu korzeniowego (korpus).
Wniosek
W CSS jednostki długości są podzielone na dwie szersze kategorie: jednostki długości bezwzględnej i jednostki długości względnej. Jednostki bezwzględnej długości mają ustalone wartości, podczas gdy jednostki względne zmieniają swoje wartości zgodnie z elementem nadrzędnym lub głównym. Jednostki bezwzględnej długości są PX, PT, PC, IN, CM i MM oraz jednostki %, em, rem, vw, vhm vmin, vmax, i EX należą do jednostek względnych. Aby lepiej zrozumieć, wykazaliśmy użycie tych jednostek za pomocą przykładów.