Plan kursów

Zaawansowane kursy CSS

• Dodatkowa książka CSS
• CSS Wprowadzenie
• Podstawowa gramatyka CSS
• Zaawansowana gramatyka CSS
• Pochodne selektory CSS
• Selektor id CSS
• Selektor klas CSS
• Tworzenie CSS
• Tło CSS
• Tekst CSS
• Czcionki CSS
• Listy CSS

Model ramki CSS

• Podsumowanie modelu ramki CSS
• Wewnętrzny margines CSS
• Krawędzie CSS
• Zewnętrzny margines CSS
• Scalenie zewnętrznych marginesów CSS

Umieszczanie CSS

• Podsumowanie pozycjonowania CSS
• Pozycjonowanie względne CSS
• Pozycjonowanie absolutne CSS
• Pływające CSS

Wybieracz CSS

• Selektor elementu CSS
• Grupowanie selektorów CSS
• Szczegółowe wyjaśnienie selektora klas CSS
• Szczegółowe wyjaśnienie selektora id CSS
• Szczegółowe wyjaśnienie selektora atrybutów CSS
• Selektor potomka CSS
• Selektor potomka CSS
• Selektor brata bezpośredniego CSS

Wybieralne kursy

Polecane kursy:

• Skarbiec CodeW3C.com

Ramki z浮动ą mogą się przemieścić w lewo lub w prawo, aż ich zewnętrzna krawędź dotknie krawędzi ramki zawartości lub innej ramki z浮动ą.

Ponieważ ramki z浮动ą nie są w normalnym strumieniu dokumentu, ramki blokowe w normalnym strumieniu dokumentu zachowują się, jakby ramki z浮动ą nie istniały.

Pływające CSS

Patrząc na rysunek poniżej, gdy ramka 1 płynie w prawo, odłącza się od strumienia dokumentu i przesuwa się w prawo, aż jego prawy krawędź dotknie prawego krawędzi ramki zawartości:

Patrząc na rysunek poniżej, gdy ramka 1 płynie w lewo, odłącza się od strumienia dokumentu i przesuwa się w lewo, aż jego lewy krawędź dotknie lewego krawędzi ramki zawartości. Ponieważ nie jest już w strumieniu dokumentu, nie zajmuje miejsca i rzeczywiście pokrywa ramkę 2, co sprawia, że ramka 2 znika z pola widzenia.

Jeśli przesunie się wszystkie trzy ramki w lewo, ramka 1 będzie płynąć w lewo, aż natknie się na ramkę zawartości, a pozostałe dwie ramki będą płynąć w lewo, aż natkną się na poprzednią ramkę z浮动ą.

Jak widać na rysunku poniżej, jeśli zawartość ramki jest zbyt wąska, aby pomieścić trzy poziome elementy z浮动ą, inne bloki z浮动ą przesuwają się w dół, aż będzie wystarczająca przestrzeń. Jeśli wysokości elementów z浮动ą są różne, mogą one być "zatrzymane" przez inne elementy z浮动ą, gdy się przesuwają w dół:

Atrybut float CSS

W CSS, realizujemy浮动 elementów za pomocą atrybutu float.

Aby uzyskać więcej informacji na temat atrybutu float, odwiedź podręcznik:Atrybut float CSS。

Ramka wierszowa i czyszczenie

Ramka wierszowa obok ramki z浮动ą jest skrócona, co daje przestrzeń dla ramki z浮动ą, a ramka wierszowa otacza ramkę z浮动ą.

Dlatego utworzenie ramki z浮动ą pozwala na otaczanie tekstu obrazem:

Aby zapobiec otaczaniu ramki z浮动ną ramką, należy zastosować do niej Atrybut clear.Wartość atrybutu clear może być left, right, both lub none, co oznacza, które boki ramki nie powinny przylegać do pudełka przesuwanego.

Aby osiągnąć ten efekt, w elemencie do czyszczenia,górna marginesdodaj wystarczająco dużo przestrzeni, aby krawędź górna elementu spadła pionowo poniżej pudełka przesuniętego:

To jest użyteczny narzędzie, które pozwala otaczającym elementom zostawić przestrzeń dla elementu przesuwanego.

Zacznijmy dokładniej przyjrzeć się przesunięciom i czyszczeniu. Załóżmy, że chcemy przesunąć obraz do lewej strony bloku tekstu i chcemy, aby obraz i tekst zawierały się w innym elemencie z kolorem tła i ramką. Możesz napisać poniższy kod:

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>tekst</p>
</div>

W tym przypadku, pojawił się problem. Ponieważ element przesuwany wyłączył się z strumienia dokumentu, div otaczający obraz i tekst nie zajmuje miejsca.

Jak sprawić, aby otaczający element wizualnie otaczał element przesuwany? W tym elemencie należy zastosować clear:

Niestety, pojawił się nowy problem, ponieważ nie ma istniejących elementów, które można by zastosować do czyszczenia, więc możemy dodać pusty element i go wyczyścić.

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
.clear {
  clear: both;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>tekst</p>
<div class="clear"></div>
</div>

To pozwoli osiągnąć oczekiwany efekt, ale wymaga dodania dodatkowego kodu. Często można zastosować clear, ale czasami musi się dodać bezsensowne znaczniki, aby przeprowadzić układ.

Jednak mamy jeszcze inny sposób, który polega na przesuwaniu div kontenera:

.news {
  background-color: gray;
  border: solid 1px black;
  float: left;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>tekst</p>
</div>

Otrzymamy efekt, który chcemy. Niestety, następny element zostanie wpłynięty przez ten element przesuwany. Aby rozwiązać ten problem, niektórzy ludzie wybierają, aby wszystko w układzie było przesuwane, a następnie używają odpowiednich znaczących elementów (często stopki strony) do czyszczenia tych przesunięć. To pomaga zmniejszyć lub wyeliminować niepotrzebne znaczniki.

W rzeczywistości, wszystkie strony na stronie CodeW3C.com korzystają z tej technologii. Jeśli otworzysz używany plik CSS, zobaczysz, że wykonaliśmy czyszczenie div dla stopki, a trzy div nad stopką są przesuwane w lewo.

Atrybut clear CSS

Rozumiemy szczegółowo omówiliśmy działanie CSS czyszczenia i zastosowanie metod atrybutu clear. Jeśli chcesz dowiedzieć się więcej o atrybucie clear, odwiedź podręcznik:Atrybut clear CSS。

Narzędzia

Podręcznik referencyjny CSS

Przykłady CSS

Testy CSS

Tutoriale CSS

Linki sponsorowane