Wysokość i szerokość elementu są ilościami obliczonymi. Każdy element strony internetowej tworzy prostokątny obszar, który z kolei składa się z kilku obszarów - obszary treści, obszary wyściółki, obszary ramki I tereny polowe element.
Pomiędzy zawartością elementu a jego granicą znajdują się wcięcie dopełnienie, poza granicą elementu - pola margines. Dla każdego elementu istnieje obszar treści; inne obszary są opcjonalne.
Ryż. 1. Model blokowy elementu Właściwość height określa wysokość zawartości elementu blokowego i nie ma wpływu na wyświetlanie elementów inline: inline; . Wysokość elementów inline jest równa wysokości ich zawartości. Wartości ujemne są niedozwolone. Nieruchomość nie podlega dziedziczeniu.
Składnia
P (wysokość: 100px;)
Właściwość szerokość określa szerokość zawartości elementu blokowego i nie ma wpływu na wyświetlanie elementów inline: inline; . Szerokość elementów inline jest równa szerokości ich zawartości. Wartości ujemne są niedozwolone. Nieruchomość nie podlega dziedziczeniu.
Składnia
P (szerokość: 100px;)
Ustaw szerokość i wysokość pozycji elementu pozycjonowanego bezwzględnie: bezwzględna; nie zawsze jest konieczne, ponieważ w tym przypadku wysokość i szerokość są domyślnie określone przez przesunięcie elementu. Jeśli element ma określone obramowania i marginesy, zmniejszają one rozmiar obszaru zawartości o odpowiednie wartości.
Div ( tło: #6A7690; pozycja: bezwzględna; góra: 0; dół: 0; lewy: 50%; prawy: 0; ) /*w tym przypadku wysokość elementu wynosi 100%, szerokość wynosi 50% blok nadrzędny*/ Ryż. 2. Wysokość i szerokość elementu pozycjonowanego bezwzględnie
Korzystając z właściwości padding, możesz ustawić dopełnienie jednocześnie dla kilku boków elementu w następującej kolejności: . Jeśli element ma tło, będzie ono miało zastosowanie także do dopełnienia. Wartości ujemne są niedozwolone. Nieruchomość nie podlega dziedziczeniu.
Jeżeli podane zostaną trzy wartości, np. div (dopełnienie: 10px 20px 30px;), to zostaną one rozłożone w następującej kolejności: pierwsza wartość to dopełnienie górne, druga to dopełnienie prawe i lewe, trzecia to dolna wyściółka.
Jeżeli podane zostaną dwie wartości np. div (padding: 10px 20px;), to pierwsza ustawi dopełnienie górne i dolne, druga ustawi prawe i lewe.
Pojedyncza wartość, taka jak div (padding: 10px;) ustawi to samo wypełnienie ze wszystkich stron elementu.
Składnia
P (dopełnienie: 5px 10px 15px 10px;)
Aby ustawić dopełnienie tylko po jednej stronie elementu, należy użyć jednej z właściwości padding-top, padding-right, padding-bottom, padding-left, na przykład:
P (dopełnienie po lewej stronie: 10px;)
Większość elementów oddzielona jest od siebie marginesami. Właściwość margines to krótka forma zapisu pól elementu w następującej kolejności: góra, prawo, dół, lewo. Używane, gdy trzeba ustawić marginesy z kilku stron, ale niekoniecznie z czterech. Pionowo sąsiadujące pola elementy blokowe zwiń, a górny i dolny margines nie mają wpływu na elementy wbudowane. Dopuszczalne są wartości ujemne. Nieruchomość nie podlega dziedziczeniu.
Jeżeli podane zostaną trzy wartości, np. div (margines: 10px 20px 30px;), to zostaną one rozłożone w następującej kolejności: pierwsza wartość to margines górny, druga to margines prawy i lewy, trzecia to dolny margines.
Jeżeli podane zostaną dwie wartości np. div (margines: 10px 20px;), to pierwsza ustawi margines górny i dolny, druga ustawi prawy i lewy.
Pojedyncza wartość, np. div (margin: 10px;) ustawi równe marginesy ze wszystkich stron elementu.
(margin: 0 auto;) będzie działać tylko wtedy, gdy szerokość elementu zostanie wyraźnie określona.
Ryż. 3. margines: automatyczny; dla elementu pozycjonowanego absolutnie Składnia
Div (margines: 5px 10px 2px 5px;)
Właściwości margines-top , margines-prawy , margines-dół , margines-lewy kontrolują odpowiednie marginesy po każdej stronie elementu, na przykład:
P (margines po lewej stronie: 10px;)
CSS obsługuje także kilka innych właściwości związanych z ustawianiem wysokości i szerokości elementów strony internetowej: min-height , min-width , max-height i max-width . Właściwości te umożliwiają ustawienie minimalnych i maksymalnych wartości szerokości lub wysokości elementu, dając elementowi możliwość wypełnienia dostępnej przestrzeni. Właściwości są często używane do projektowania responsywnych stron internetowych. Dotyczy wszystkich elementów z wyjątkiem elementów śródliniowych i tabelarycznych. Zawsze wynikają z głównej zasady, tj. po zadaniu wysokość elementu lub szerokość. Nie odziedziczony.
Możesz określić regularne wymiary, używając niektórych jednostek miary, a ograniczenia rozmiaru, używając innych jednostek, na przykład:
Div ( szerokość: 400px; maksymalna szerokość: 50%; )
Element będzie miał szerokość 400px tylko wtedy, gdy wartość ta nie przekroczy 50% szerokości bloku kontenera, w przeciwnym razie jego szerokość zostanie zmniejszona.
Ostatnia aktualizacja: 21.04.2016
Rozmiary elementów ustawia się za pomocą właściwości szerokości i wysokości.
Domyślną wartością tych właściwości jest auto, co oznacza, że przeglądarka określa szerokość i wysokość elementu. Możesz także jawnie określić wymiary za pomocą jednostek (piksele, em) lub procentów:
Szerokość: 150 pikseli; szerokość: 75%; wysokość: 15em;
Piksele określają dokładną szerokość i wysokość. Jednostka miary em zależy od wysokości czcionki elementu. Jeśli rozmiar czcionki elementu wynosi na przykład 16 pikseli, wówczas 1 em dla tego elementu będzie wynosić 16 pikseli. Oznacza to, że jeśli szerokość elementu jest ustawiona na 15em, to w rzeczywistości będzie wynosić 15 * 16 = 230 pikseli. Jeśli element nie ma zdefiniowanego rozmiaru czcionki, zostanie on pobrany z parametrów odziedziczonych lub wartości domyślnych.
Wartości procentowe właściwości szerokość są obliczane na podstawie szerokości elementu kontenera. Jeśli na przykład szerokość elementu body na stronie internetowej wynosi 1000 pikseli, a element zagnieżdżony
Wartości procentowe dla właściwości wysokość działają podobnie jak dla właściwości szerokość, z tą różnicą, że teraz wysokość jest obliczana na podstawie wysokości elementu kontenera.
Na przykład:
Jednocześnie rzeczywiste wymiary elementu mogą się różnić od tych ustawionych we właściwościach szerokość i wysokość. Na przykład:
Jak widać na zrzucie ekranu, w rzeczywistości wartość właściwości szerokość - 200px - określa jedynie szerokość wewnętrznej zawartości elementu, a na blok samego elementu zostanie przydzielona spacja, której szerokość jest równa szerokości zawartości wewnętrznej (właściwość szerokość) + dopełnienie (właściwość dopełnienia) + szerokość obramowania (właściwość border-width) + marginesy zewnętrzne (właściwość marginesu). Oznacza to, że element będzie miał szerokość 230 pikseli, a szerokość bloku elementu, biorąc pod uwagę dopełnienie, wyniesie 250 pikseli.
Obliczenia takie należy uwzględnić przy ustalaniu wymiarów elementów.
Korzystając z dodatkowego zestawu właściwości, możesz ustawić rozmiary minimalne i maksymalne:
minimalna szerokość: minimalna szerokość
max-width : maksymalna szerokość
minimalna wysokość: minimalna wysokość
max-height : maksymalna wysokość
W tym przypadku szerokość elementu jest równa 50% szerokości elementu kontenera, ale nie może być mniejsza niż 200 pikseli i większa niż 300 pikseli.
Właściwość box-size pozwala na nadpisanie ustalone wymiary elementy. Może przyjmować jedną z następujących wartości:
content-box: domyślna wartość właściwości, w której przeglądarka dodaje szerokość obramowania i dopełnienie do wartości właściwości szerokości i wysokości, aby określić rzeczywistą szerokość i wysokość elementów
padding-box: Informuje przeglądarkę internetową, że szerokość i wysokość elementu powinna uwzględniać dopełnienie jako część jego wartości. Załóżmy na przykład, że mamy następujący styl:
Szerokość: 200px; wysokość: 100px; margines: 10px; dopełnienie: 10px; obramowanie: 5px stałe #ccc; kolor tła: #eee; rozmiar pudełka: pudełko do wyściółki;
Tutaj rzeczywista szerokość wewnętrznej zawartości bloku będzie wynosić 200 pikseli (szerokość) - 10 pikseli (dopełnienie po lewej stronie) - 10 pikseli (dopełnienie po prawej stronie) = 180 pikseli.
Warto zaznaczyć, że większość nowoczesne przeglądarki nie obsługują tej właściwości.
border-box: Informuje przeglądarkę internetową, że szerokość i wysokość elementu powinna uwzględniać dopełnienie i obramowanie jako część jego wartości. Załóżmy na przykład, że mamy następujący styl:
Szerokość: 200px; wysokość: 100px; margines: 10px; dopełnienie: 10px; obramowanie: 5px stałe #ccc; kolor tła: #eee; rozmiar pudełka: border-box;
Tutaj rzeczywista szerokość wewnętrznej zawartości bloku będzie wynosić 200px (szerokość) - 10px (dopełnienie po lewej stronie) - 10px (dopełnienie po prawej stronie) - 5px (szerokość-lewego obramowania) - 5px (szerokość-prawego obramowania) = 170px.
Przykładowo zdefiniujmy dwa bloki różniące się jedynie wartością właściwości box-size:
W pierwszym przypadku, podczas definiowania rozmiarów bloków, do właściwości szerokości i wysokości zostanie dodana grubość obramowania oraz dopełnienie wewnętrzne i zewnętrzne, dzięki czemu pierwszy blok będzie miał duże wymiary.
The wysokość Właściwość CSS określa wysokość elementu. Domyślnie właściwość definiuje wysokość obszaru zawartości. Jeśli jednak box-sizing jest ustawione na border-box, zamiast tego określa wysokość obszaru granicznego.
Źródło tego interaktywnego przykładu jest przechowywane w repozytorium GitHub. Jeśli chcesz przyczynić się do projektu interaktywnych przykładów, sklonuj https://github.com/mdn/interactive-examples i wyślij nam żądanie ściągnięcia.
Właściwości min-height i max-height zastępują wysokość.
CSS
| Wynik | Obawy dotyczące dostępności | Upewnij się, że elementy ustawione z wysokością nie są obcięte i/lub nie zasłaniają innej zawartości, gdy strona jest powiększona w celu zwiększenia rozmiaru tekstu. |
|---|---|---|
| Dane techniczne |
Specyfikacja | |
| Status Komentarz |
Moduł rozmiaru wewnętrznego i zewnętrznego CSS, poziom 4 | Projekt redaktora |
| Moduł rozmiaru wewnętrznego i zewnętrznego CSS, poziom 3 Komentarz |
Moduł rozmiaru wewnętrznego i zewnętrznego CSS, poziom 4 | Definicja „wzrostu” w tej specyfikacji. |
| Projekt roboczy Komentarz |
Dodano słowa kluczowe max-content, min-content i fit-content. | Dodaje obsługę typu danych CSS reprezentującego wartość odległości. Długości można stosować w wielu właściwościach CSS, takich jak szerokość, wysokość, margines, dopełnienie, szerokość obramowania, rozmiar czcionki i cień tekstu."> |
| Poziom CSS 1 Komentarz |
Dodano słowa kluczowe max-content, min-content i fit-content. | Wstępna definicja. |
| Wartość początkowa | automatyczny |
|---|---|
| Dotyczy | wszystkie elementy oprócz niezastąpionych elementów wbudowanych, kolumn tabeli i grup kolumn |
| Dziedziczny | NIE |
| Procenty | Procent jest obliczany w odniesieniu do wysokości bloku zawierającego wygenerowane pudełko. Jeżeli wysokość bloku zawierającego nie jest określona jawnie (tj. zależy od wysokości zawartości) i element ten nie jest umiejscowiony bezwzględnie, wartość jest obliczana na auto Procentowa wysokość elementu głównego jest zależna od początkowego bloku zawierającego. |
| Głoska bezdźwięczna | wizualny |
| Wartość obliczona | wartość procentowa, automatyczna lub długość bezwzględna |
| Typ animacji | typy danych CSS są interpolowane jako liczby rzeczywiste, zmiennoprzecinkowe.">length , typy danych CSS są interpolowane jako liczby rzeczywiste, zmiennoprzecinkowe.">procent lub calc(); |
| Porządek kanoniczny | unikalny, niejednoznaczny porządek określony przez gramatykę formalną |
Tabela zgodności na tej stronie jest generowana na podstawie danych strukturalnych. Jeśli chcesz przyczynić się do gromadzenia danych, odwiedź https://github.com/mdn/browser-compat-data i wyślij nam prośbę o ściągnięcie.
Zaktualizuj dane dotyczące zgodności w GitHub
| Pulpit | Przenośny | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrom | Krawędź | Firefoksa | Internet Explorera | Opera | Safari | Przeglądarka internetowa na Androida | Chrome na Androida | Firefoksa na Androida | Opera na Androida | Safari na iOS | Internetu Samsunga | |
| wysokość | Pełna obsługa Chrome 1 | Edge Pełne wsparcie 12 | Pełna obsługa Firefoksa 1 | IE Pełne wsparcie 4 | Pełne wsparcie Opery 7 | Safari Pełne wsparcie 1 | Pełna obsługa WebView dla Androida 1 | Chrome Android Pełna obsługa 18 | Pełna obsługa przeglądarki Firefox dla Androida 4 | Opera Android Pełna obsługa 10.1 | Pełna obsługa Safari iOS 1 | Samsung Internet Android Pełna obsługa 1.0 |
| dopasowana zawartość | Pełna obsługa Chrome 46 | Edge Brak wsparcia Nie | Firefox Brak wsparcia Nie | IE Brak wsparcia Nie | Pełne wsparcie Opery 33 | Safari Pełne wsparcie 11 Pełne wsparcie 11 Pełne wsparcie 9 Z prefiksem Z prefiksem | Opera na Androidzie? | Safari iOS Pełne wsparcie 11 Pełne wsparcie 11 Pełne wsparcie 9 Z prefiksem Z prefiksem Zaimplementowano z prefiksem dostawcy: -webkit- | ||||
| maksymalna zawartość | Pełna obsługa Chrome 46 | Edge Brak wsparcia Nie | Z prefiksem Z prefiksem | IE Brak wsparcia Nie | Pełne wsparcie Opery 44 | Safari Pełne wsparcie 11 | WebView Android Pełna obsługa 46 | Pełna obsługa Chrome na Androida 46 | Z prefiksem Z prefiksem Zaimplementowano z prefiksem dostawcy: -moz- | Samsung Internet Android Pełna obsługa 5.0 | ||
| zawartość min | Pełna obsługa Chrome 46 | Edge Brak wsparcia Nie | Firefox Pełne wsparcie 66 Pełne wsparcie 66 Pełne wsparcie 3 Z prefiksem Z prefiksem Zaimplementowano z prefiksem dostawcy: -moz- | IE Brak wsparcia Nie | Pełne wsparcie Opery 44 | Safari Pełne wsparcie 11 | WebView Android Pełna obsługa 46 | Pełna obsługa Chrome na Androida 46 | Firefox Android Pełne wsparcie 66 Pełne wsparcie 66 Pełne wsparcie 4 Z prefiksem Z prefiksem Zaimplementowano z prefiksem dostawcy: -moz- | Opera Android Pełna obsługa 43 | Pełna obsługa Safari iOS 11 | Samsung Internet Android Pełna obsługa 5.0 |
| rozciągać się | Pełna obsługa Chrome 28 Dostępne wypełnienie Webkit">Alternatywna nazwa Pełne wsparcie 28Dostępne wypełnienie Webkit">Alternatywna nazwa Dostępne wypełnienie Webkit">Alternatywna nazwa | Edge Brak wsparcia Nie | Firefox Brak wsparcia Nie | IE Brak wsparcia Nie | Pełne wsparcie Opery 15 Dostępne wypełnienie Webkit">Alternatywna nazwa Pełne wsparcie 15Dostępne wypełnienie Webkit">Alternatywna nazwa Dostępne wypełnienie Webkit">Alternatywna nazwa Używa niestandardowej nazwy: -webkit-fill-available | Safari Pełne wsparcie 9 Dostępne wypełnienie Webkit">Alternatywna nazwa Pełne wsparcie 9Dostępne wypełnienie Webkit">Alternatywna nazwa Dostępne wypełnienie Webkit">Alternatywna nazwa Używa niestandardowej nazwy: -webkit-fill-available | WebView Android Pełna obsługa 4.4 Dostępne wypełnienie Webkit">Alternatywna nazwa Pełne wsparcie 4.4Dostępne wypełnienie Webkit">Alternatywna nazwa Dostępne wypełnienie Webkit">Alternatywna nazwa Używa niestandardowej nazwy: -webkit-fill-available | Pełna obsługa Chrome na Androida 28 Dostępne wypełnienie Webkit">Alternatywna nazwa Pełne wsparcie 28Dostępne wypełnienie Webkit">Alternatywna nazwa Dostępne wypełnienie Webkit">Alternatywna nazwa Używa niestandardowej nazwy: -webkit-fill-available | Firefox Android Brak wsparcia Nie | Opera na Androidzie? | Pełna obsługa Safari iOS 9 Dostępne wypełnienie Webkit">Alternatywna nazwa Pełne wsparcie 9Dostępne wypełnienie Webkit">Alternatywna nazwa Dostępne wypełnienie Webkit">Alternatywna nazwa Używa niestandardowej nazwy: -webkit-fill-available | Samsung Internet Android Pełna obsługa 5.0 Dostępne wypełnienie Webkit">Alternatywna nazwa Pełne wsparcie 5.0Dostępne wypełnienie Webkit">Alternatywna nazwa Dostępne wypełnienie Webkit">Alternatywna nazwa Używa niestandardowej nazwy: -webkit-fill-available |
Witajcie drodzy czytelnicy! Dzisiaj przyjrzymy się, jak ustawić rozmiary elementów blokowych na stronie internetowej za pomocą właściwości CSS i skonfiguruj wyświetlanie treści, jeśli nie mieści się ona w elemencie.
Korzystając z atrybutów stylu szerokości i wysokości, możesz ustawić odpowiednio szerokość i wysokość elementów blokowych:
szerokość: automatyczna|<ширина>| dziedziczyć
wysokość: automatyczna|<ширина>| dziedziczyć
Jako wartości możesz użyć dowolnych jednostek miary dostępnych w css - na przykład piksele (px), cale (in), punkty (pt) itp.:
p (szerokość: 200 pikseli; wysokość: 150 pikseli)
Oprócz jednostek bezwzględnych możesz ustawić względny rozmiar elementów jako procent. W tym przypadku szerokość i wysokość elementu będzie zależała od szerokości i wysokości elementu nadrzędnego. Jeśli element nadrzędny nie zostanie wyraźnie określony, wymiary będą zależeć od okna przeglądarki.
div (szerokość:40%;)
Opcja Auto pozostawia kontrolę nad rozmiarem elementu przeglądarce internetowej i jest wartością domyślną. W takim przypadku wymiary elementu będą takie, aby całkowicie pasował do całej jego zawartości.
Spójrzmy na kilka przykładów.
Witamy na naszej stronie motoryzacyjnej. Tutaj znajdziesz wiele interesujących i przydatne artykuły o samochodach, o nich specyfikacje techniczne i funkcje.
Wynik:
W tym przykładzie utworzyliśmy element div i zagnieżdżono akapit p z tekstem w środku. W przypadku elementu div ściśle ustalamy wymiary na 300 na 300 pikseli. Element p ma wartości właściwości szerokość i wysokość równe auto, więc jak widać na zrzucie ekranu jego szerokość jest ustawiona na szerokość elementu nadrzędnego, a jego wysokość jest taka, aby zmieścił się w całym tekście zawartym w akapit.
Zmieńmy teraz ustawienia CSS dla akapitu p i ustawmy stałe wymiary:
Warstwa 2(
tło: #eee;
szerokość:250px;
}
Wynik:
Jak widać szerokość akapitu zmniejszyła się i wynosi 250 pikseli, a jego wysokość wzrosła tak, aby tekst się zmieścił, ponieważ parametr wysokości pozostał równy auto.
Teraz ustawmy wysokość i szerokość akapitu w procentach:
Warstwa 2(
tło: #eee;
szerokość:50%;
wysokość:50%;
}
Wynik:
Jak widać na obrazku, szerokość elementu p stała się równa połowie szerokości elementu div. Wysokość wzrosła i stała się równa 75 procent wysokości elementu div.
Określając szerokość i wysokość dowolnego elementu w jednostkach względnych, może zaistnieć potrzeba określenia minimalnego i maksymalnego możliwego rozmiaru. Przecież np. przy zmianie rozmiaru okna przeglądarki wymiary elementu mogą się zmniejszać i zwiększać do takich rozmiarów, że czytelność strony staje się bardzo niska.
Możesz zdefiniować minimalną szerokość i wysokość za pomocą atrybutów min-width i min-heigh:
minimalna szerokość:<ширина>
minimalna wysokość:<высота>
Podobne atrybuty stylu max-width i max-height pozwalają ustawić maksymalne rozmiary:
maksymalna szerokość:<ширина>
maksymalna wysokość:<высота>
Oczywiste jest, że przy ustawianiu maksymalnych i minimalnych wartości wysokości i szerokości wymiary elementu nie mogą być większe niż wartości maksymalne i mniejsze niż wartości minimalne.
Warto doprecyzować, że to zadanie Parametry wysokości i szerokości mają sens tylko w przypadku znaczników blokowych, ponieważ w przypadku elementów inline parametry te nie są przetwarzane przez przeglądarkę.
Może się zdarzyć, że po ustaleniu sztywnych parametrów wysokości i szerokości elementu zawartość w nim zawarta może nie zmieścić się w ograniczonym obszarze.
Przykładowo zmniejszmy rozmiar akapitu p z przykładów omówionych powyżej do 100 pikseli:
Warstwa 2(
tło: #eee;
szerokość: 100 pikseli;
wysokość: 100 pikseli;
}
Wynik:
Jak widać tekst przekroczył granice akapitu i nie wygląda to zbyt ładnie. Aby uniknąć takich sytuacji, istnieje reguła CSS - przepełnienie.
Przepełnienie treści może wystąpić, gdy ograniczona jest zarówno szerokość, jak i wysokość elementu. Spójrzmy na dwa akapity:
Tekst pierwszego akapitu
Tekst drugiego akapitu
Wynik:
Ponieważ dla akapitów nie określono ani szerokości, ani wysokości, przeglądarka niezależnie oblicza je na podstawie własnego zrozumienia wartości auto. W rezultacie akapity zajmowały całą dostępną przestrzeń pod względem szerokości i wysokości, zgodnie z zawartą w nich treścią.
Teraz ograniczmy szerokość pierwszego akapitu:
Tekst pierwszego akapitu
Tekst drugiego akapitu
Wynik:
Oczekiwano, że szerokość akapitu zostanie zmniejszona, a wysokość została ustawiona tak, aby pomieścić cały tekst.
Cóż, teraz ograniczmy wysokość pierwszego akapitu:
Tekst pierwszego akapitu
Tekst drugiego akapitu
W rezultacie okazało się, że tekst nie zmieścił się w tak ograniczonym akapicie i dlatego trafił w obszar dolnego sąsiada. W związku z tym praktycznie niemożliwe jest przeczytanie tekstu ani pierwszego, ani drugiego akapitu. Chodzi o kontrolowanie zachowania treści w takich sytuacjach, jakie mają miejsce zasada przepełnienia:
przepełnienie: widoczne|ukryte|przewijanie|automatyczne|dziedziczenie
Domyślnie przepełnienie jest ustawione na widoczne, co informuje przeglądarkę o wyświetleniu treści, która nie mieści się w kontenerze. Wynik można zobaczyć na powyższym przykładzie.
Reguła ukrywa wszystko, co nie mieści się w kontenerze:
Wartość przewijania wyświetli pionowe i poziome paski przewijania elementu, nawet jeśli cała zawartość się zmieści:
Tekst pierwszego akapitu
Tekst drugiego akapitu
Najpopularniejszy i logiczne rozwiązanie, jeśli chcesz utworzyć paski przewijania dla kontenera, jest to wartość automatyczny. W takim przypadku przeglądarka sama określi, kiedy i na jakich osiach powinna wyświetlać paski przewijania:
Tekst pierwszego akapitu
Tekst drugiego akapitu
Wynik:
Aby dostosować paski przewijania, możesz także użyć atrybutów stylu overflow-x i overflow-y, które pozwalają dostosować sposób wyświetlania przewijania na poszczególnych osiach. Zatem odpowiada za oś pozioma, i dla oś pionowa.
Dlatego jeśli na przykład chcesz, aby przewijanie w poziomie nigdy nie pojawiało się w akapicie, a przewijanie w pionie pojawiało się tylko wtedy, gdy jest to konieczne, po prostu napisz następującą regułę css:
p(przepełnienie-x:ukryte;przepełnienie-y:auto;)
I problem zostanie rozwiązany.
To wszystko. Do następnego razu. Nie zapomnij zapisać się na aktualizacje bloga, będę wdzięczny, jeśli skorzystasz z przycisków sieci społecznościowych.
