CSS Float, Clear i przepełnienie właściwości | Wyjaśnione
Poza tym, podczas opracowywania strony internetowej, często spotykamy pewne okoliczności, w których zawartość zawierająca w niektórych elementach HTML przepełnia. Aby poradzić sobie z takimi sytuacjami CSS zapewnia również pewne właściwości.
W tym przewodniku przejdziesz przez następujące właściwości CSS.
- Float Property
- Jasna własność
- Nieruchomość przepełnienia
Zaczynajmy.
Float Property
Właściwość Float jest określana jako właściwość pozycjonowania, która jest wykorzystywana do pozycjonowania zawartości i struktury układu witryny. Ta właściwość pozycjonuje element w taki sposób, że inne elementy owijają się.
Składnia
float: wartość;Podobnie jak inne właściwości CSS, właściwość Float renderuje pewne wartości, które są wymienione poniżej.
| Wartość | Opis |
|---|---|
| nic | Jest to wartość domyślna, która zapobiega pływaniu elementu i wyświetla element, w którym istnieje w tekście. |
| lewy | Aby unosić element po lewej stronie, ta wartość jest używana. |
| Prawidłowy | Aby unosić element po prawej stronie, ta wartość jest używana. |
| wstępny | Przypisywa pierwotną wartość do właściwości, którą ta wartość jest używana. |
| dziedziczyć | Aby odziedziczyć tę właściwość z właściwości nadrzędnej, wartość ta jest używana. |
Oto kilka przykładów właściwości pływakowej.
Przykład 1
Załóżmy, że wyświetlasz trochę tekstu na swojej stronie internetowej i chcesz dodać odpowiedni obraz po prawej stronie tekstu. Użyj następującego fragmentu kodu.
Html
Psy są wyjątkowo lojalnymi stworzeniami. Są urocze, zabawni i są najlepszym przyjacielem mężczyzny. Istnieje wiele ras psów. Niektóre rasy psów to Bull Dog, Siberian Husky, Golden Retriever i wiele innych.
CSS
imgFloat: Racja;
Szerokość: 190px;
Wysokość: 170px;
W powyższym przykładzie napisaliśmy trochę tekstu o psach i przekształciliśmy obraz psa na prawą stronę. Oto wyjście.
Obraz psa unosił się odpowiednio do.
Jeśli w tym samym przykładzie właściwość Float jest ustawiona na „Brak” zamiast „po prawej”, obraz psa zostanie wyświetlony tam, gdzie występuje w tekście. Oto, jak to będzie wyglądać.
Przykład 2
Czasami, aby dodać piękno do tekstu pojawiającego się na stronie internetowej, używasz różnych rodzin i rozmiarów czcionek. Oprócz tego unoszącego się tekstu do odpowiedniej pozycji jest również dość ważne. Ten przykład pokazuje, jak unosić literę w akapicie.
Html
DOG są wyjątkowo lojalnymi stworzeniami. Są urocze, zabawni i są najlepszym przyjacielem mężczyzny. Jest wiele
rasy psów. Niektóre rasy psów to Bull Dog, Siberian Husky, Golden Retriever i wiele innych. Jeśli przechodzisz
Depresja lub pewna zła faza w życiu, ognianie psa jest wysoce sugerowane. Oprócz tych psów są również używane do bezpieczeństwa
cele.
CSS
Zakresfloat: lewy;
szerokość: 0.8em;
Wysokość linii: 90%;
Rozmiar czcionki: 60px;
Font-Weight: Bold;
Font Family: Times New Roman;
W powyższym przykładzie unosimy pierwszą literę tekstu po lewej stronie i nadajemy mu określony styl. Wyjście pokazano poniżej.
Pierwsza litera z powodzeniem unosiła się po lewej stronie.
Teraz, gdy zrozumieliśmy właściwość Float CSS, dowiedzmy się o właściwości CSS Clear.
Jasna własność
Wyraźna właściwość jest również właściwością pozycjonującą, która obsługuje elementy obok pływanych elementów.
Jeśli przypiszesz właściwość Clear do elementu w tym samym kierunku, co pływak, zostanie ona zepchnięta w dół pod pływanymi elementami, w przeciwnym razie, jeśli będzie wystarczająca ilość miejsca, element będzie pasował obok elementu pływanego w poziomie.
Składnia
jasne: wartość;Wyczyść właściwość wykazuje niektóre wartości, które zostały wyjaśnione poniżej.
| Wartość | Opis |
|---|---|
| nic | Jest to wartość domyślna, która zapobiega wyczyszczeniu pływanych elementów. |
| lewy | Ta wartość pozycjonuje elementy w dół po lewej stronie elementów pływających. |
| Prawidłowy | Ta wartość pozycjonuje elementy po prawej stronie pływających elementów. |
| Zarówno | Ta wartość pozycjonuje elementy zarówno w lewo, jak i po prawej stronie pływanych elementów. |
| wstępny | Ta wartość przypisuje właściwość jej pierwotną wartość. |
| dziedziczyć | Aby odziedziczyć tę właściwość z właściwości nadrzędnej, wartość ta jest używana. |
Zbadajmy wyraźną właściwość za pomocą odpowiednich przykładów.
Przykład 1
Dowiemy się, jak działa wyraźna własność przy użyciu przykładu psa wymienionego w powyższej sekcji.
Html
Psy są wyjątkowo lojalnymi stworzeniami. Są urocze, zabawni i są najlepszym przyjacielem mężczyzny. Istnieje wiele ras psów. Niektóre rasy psów to Bull Dog, Siberian Husky, Golden Retriever i wiele innych.
CSS
imgfloat: lewy;
szerokość: 170px;
Wysokość: 170px;
Teraz w powyższym przykładzie istnieją dwa elementy
I . Jednak tylko unosi się w lewo. Teraz, aby zrozumieć, jak działa jasna nieruchomość, zastosujemy jasne do
element. Użyj następującego fragmentu kodu.
P.jasneClear: lewy;
Tutaj zastosowaliśmy jasne do
w tym samym kierunku co pływak.
Wyjście
Przed zastosowaniem jasności.
Po zastosowaniu jasnego.
Tekst został oczyszczony z lewej strony pływanego obrazu.
Możesz użyć innych wartości jasnej właściwości za pomocą powyższego przykładu, aby zobaczyć, jak działają.
Nieruchomość przepełnienia
Właściwość przepełnienia kontroluje zachowanie treści, które przepełnia określony obszar elementu, a ponadto właściwość przepełnienia jest zaprojektowana tylko dla elementów na poziomie blokowym.
Składnia
przepełnienie: wartość;Różne wartości właściwości przepełnienia podano poniżej:
| Wartość | Opis |
|---|---|
| widoczny | Jest to wartość domyślna i wyświetli całą zawartość, która przekracza określony obszar elementu. |
| ukryty | Ta wartość ukrywa wszystkie treści przekraczające określony obszar elementu. |
| zwój | Ta wartość ukrywa zawartość, która przekracza obszar elementu w niej i zapewnia zarówno pionowe, jak i poziome paski przewijania do wyświetlenia treści. |
| automatyczny | Ta wartość dodaje pasek przewijania tylko w razie potrzeby. |
| wstępny | Ta wartość przypisuje właściwość jej pierwotną wartość. |
| dziedziczyć | Aby odziedziczyć tę właściwość z właściwości nadrzędnej, wartość ta jest używana. |
Teraz, aby lepiej zrozumieć tę właściwość, rozważymy jeden przykład i za pośrednictwem tego zademonstrujemy różne wartości właściwości przepełnienia.
Przykład.
W tym przykładzie utworzymy A i umieścić w tym trochę treści i zobaczymy, jak działają różne wartości właściwości przepełnienia.
Html
Właściwość przepełnienia kontroluje zachowanie treści, które przepełnia określony obszar elementu, a ponadto właściwość przepełnienia jest zaprojektowana tylko dla elementów na poziomie blokowym.
Najpierw zilustrujmy widoczną wartość właściwości przepełnienia.
CSS
.div1Przepełnienie: widoczne;
kolor tła: Rosybrown;
szerokość: 100px;
Wysokość: 145px;
Border: 2px Solid Black;
Wyjście
Korzystając z widocznej wartości właściwości przepełnienia, zawartość jest wyświetlana poza obszarem pudełka.
Teraz zilustrujemy ukrytą wartość właściwości przepełnienia. Oto fragment kodu.
.div1Olflow: ukryty;
Wyjście
Treść przekraczająca obszar pudełka jest ukryta.
Fragment kodu dla wartości przewijania właściwości przepełnienia jest następujący.
.div1Overflow: Scroll;
Wyjście
Za pomocą pasków przewijania można obejrzeć resztę treści.
A teraz zobaczymy, jak działa wartość automatyczna właściwości przepełnienia.
.div1przepełnienie: auto;
Wyjście
Zgodnie z wymogiem wartość automatyczna dodała tylko pionowy pasek przewijania.
Korzystając z wartości automatycznej, przepełniająca się zawartość jest pomyślnie ukryta w polu.
Wniosek
Float Property jest używany do pozycjonowania treści i strukturyzacji układu witryny, ponadto, ta właściwość pozycjonuje element w taki sposób, że inne elementy owijają się. jasna własność, Z drugiej strony obsługuje elementy, które znajdują się obok pływanych elementów. Tymczasem Nieruchomość przepełnienia kontroluje zachowanie treści, które przepełnia określony obszar elementu. Wszystkie te właściwości wykazują pewne wartości, które wykonują różne działania w tych właściwościach. Te właściwości i ich wartości są szczegółowo wyjaśnione za pomocą przykładów w tym zapisie.