Trzy bloki na 100 szerokości HTML. Wysokość, szerokość i przepełnienie - reguły CSS opisujące obszar treści w układzie blokowym
W nowoczesnym układzie na stronach internetowych często można znaleźć bloki zajmujące 100% szerokości strony.
To wygląda tak:
Zastanówmy się, jak osiągnąć ten efekt.
Rozważmy na przykład następującą sytuację.
Spójrzmy na wynik, który uzyskaliśmy.
Ogólnie nieźle, jednak po bokach bloku znajdują się drobne wcięcia, które psują cały obraz. Chciałbym je usunąć.
Pierwszą rzeczą, która przychodzi na myśl, jest przypisanie właściwości szerokość:100% do bloku. Ale to w żaden sposób nie zmieni sytuacji. Możesz to zobaczyć na własne oczy.
Blok, który powinien zajmować 100% szerokości.
Dlatego możesz bezpiecznie usunąć właściwość szerokość:100%.
Jaki jest prawdziwy powód takich wcięć?
Faktem jest, że blok div, którego szerokość chcemy uzyskać w 100%, jest przechowywany w dwóch elementach nadrzędnych: body i html. Domyślnie przeglądarki nadają im określone wartości właściwości dopełnienia i marginesu.
Aby rozwiązać problem, wystarczy zresetować te wcięcia. Bardzo łatwo to zrobić:
Zobaczmy jak teraz wygląda blok.
Wszystko jest w porządku, przestrzeń która była po bokach została usunięta.
Być może zainteresuje Cię moja usługa projektowania stron docelowych. Następnie kliknij poniższy link, aby dowiedzieć się więcej na ten temat.
Usługa układu strony docelowej.
Obecnie istnieje dość duża liczba ekranów, które mają różne rozdzielczości, co powoduje, że strony wyświetlają się na nich w różny sposób. Należy to wziąć pod uwagę podczas pisania kodu i przestrzegania zasad układy dla różnych ekranów.
W poprzednim artykule sprawdziliśmy już, jak tworzyć układy dla różnych przeglądarek, ale tutaj porozmawiamy o różnych ekranach i ich rozdzielczościach.
Jednym ze sposobów „walki” z różnymi rozdzielczościami jest użycie gumowego układu. W takim przypadku witryna będzie się rozciągać i kurczyć do różnych rozdzielczości, co można zobaczyć na stronach podczas zmiany szerokości przeglądarki. Przeciwnie, w mojej witrynie używany jest układ statyczny.
Aby zastosować układ dla różnych ekranów, pomoże reguła stylu @głoska bezdźwięczna. Na przykład,
@media (maksymalna szerokość: 1024px;) (
Wszystko (dopełnienie: 10px;)
Ten wpis wskazuje, że dla klasy Wszystko wcięcie zostanie zastosowane 10 pikseli w przypadku, gdy rozdzielczość ekranu wynosi do 1024px.
Jeśli chcesz określić regułę dla ekranów pośrednich, wówczas wpis będzie wyglądał następująco:
@media (minimalna szerokość: 1024px;) i (maksymalna szerokość: 1640px) (
.all (dopełnienie: 10px;)
stół (szerokość:80%)
}
W tym przypadku właściwości stylu zostaną zastosowane do ekranów korzystających z rozdzielczości od 1024 do 1640px.
Jeśli dla określonej rozdzielczości istnieje wiele różnych stylów, bardziej racjonalne byłoby umieszczenie ich w osobnym pliku. Aby to zrobić, określając ścieżkę ze strony głównej witryny, musisz dokonać takiego wpisu w jej obrębie :
Gdy trzeba określić reguły tylko dla urządzeń mobilnych (tablety, smartfony), wówczas w tym przypadku wpis jest używany maksymalna szerokość urządzenia Lub minimalna szerokość urządzenia aby wskazać odpowiednio maksymalną i minimalną rozdzielczość.
Możesz także wskazać użycie reguł tylko dla ekranów monitorów, używając atrybutu - ekran. Wpis będzie wyglądał następująco:
Ekran @media (maksymalna szerokość: 1380 pikseli) ( … )
Oznacza to, że style zostaną zastosowane tylko na komputerach stacjonarnych o szerokości ekranu do 1380px.
W ten sam sposób zamiast ekranu możesz określić ręczny(urządzenia mobilne), wydrukować(drukarki), występ(projektory), telewizja(telewizory).
Jeśli chcesz powiadamiać swoich gości o nowościach, raportować o nowościach, możesz zamówić newsletter e-mailowy, który realizowany jest za pomocą specjalnej usługi. Pomoże Ci to bez obaw realizować wygodne i wysokiej jakości newslettery.
szerokość jako procent%
Procent to jednostka miary elementu w stosunku do bloku zawierającego. Działa to świetnie w przypadku obrazów: tutaj ustawiamy wymiary obrazu, którego szerokość wynosi zawsze 50% szerokości kontenera. Spróbuj zawęzić okno przeglądarki i zobaczyć, co się stanie!
Możesz nawet użyć go do ograniczenia maksymalnego i minimalnego rozmiaru obrazu!
układ procentowy szerokości
Możesz użyć procentu, aby utworzyć szablon, ale to podejście będzie wymagało więcej pracy. W tym przykładzie zawartość elementu zaczyna się nieprzyjemnie zawijać, gdy okno przeglądarki jest zbyt wąskie. Wszystko zależy od tego, co najlepiej pasuje do Twoich treści.
Gdy układ jest zbyt wąski, element zostaje spłaszczony. Co gorsza, nie możesz tego naprawić za pomocą nawigacji, ponieważ ta właściwość nie zapobiegnie przesuwaniu się kolumny po prawej stronie.
Lorem ipsum dolor sit amet, consectetur adipiscing elita.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.
Ustaw wysokość div równą szerokości w CSS
Maecenas nisl est, ultrices, gdzie indziej niesklasyfikowane, congue eget, auctor vitae Massa. Fusce luctus przedsionek augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Liczba całkowita fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
Stronę dopasowujemy do wielkości okna przeglądarki
Obecnie istnieje wiele urządzeń cyfrowych o różnych rozmiarach ekranów, od smartfonów po telewizory 42-calowe i większe. Zgodnie z oczekiwaniami wszystkie te urządzenia mają różną rozdzielczość (od około 320x240 do 1920x1200) i często konieczne jest dostosowanie strony internetowej do każdej z tych rozdzielczości. Odbywa się to za pomocą zapytania mediów- część specyfikacji CSS3, która pozwala ustawić zakres selektora. Zapytania o media to blok wskazujący parametry urządzenia wyjściowego, takie jak typ, szerokość i wysokość okna przeglądarki, rozdzielczość oraz orientacja przestrzenna. Wszystko zaczyna się od reguły @głoska bezdźwięczna, po których następują typy urządzeń, operatory logiczne i funkcje multimedialne. Na poniższej liście zaznaczymy wszystkie 3 operatory logiczne.
- I— logiczne „AND”, używane do łączenia kilku warunków;
- nie- logiczne „NIE”, używane do zanegowania dowolnego warunku;
- , - logiczne „LUB”, jeśli spełniony jest przynajmniej jeden z warunków, styl zostanie zastosowany.
Przyjrzyjmy się teraz funkcjom multimedialnym. Za ich pomocą ustawiane są parametry techniczne urządzeń (na przykład rozmiar okna przeglądarki). Obecnie jest ich 12.
- współczynnik kształtu (min. współczynnik kształtu, maksymalny współczynnik kształtu)— określa stosunek szerokości do wysokości wyświetlanego obszaru. Oznaczone na przykład przez 2/3, czyli 2 liczby oddzielone znakiem „/”;
- kolor (min-kolor, max-kolor)— określa liczbę bitów na kanał koloru. Oznaczający min-kolor:2 oznacza, że każdy z trzech kanałów systemu kolorów RGB może wyświetlać 2 2 odcienie i razem 4 * 4 * 4 = 64 różne kolory. Jeśli wartość w ogóle nie jest podana, sprawdzane jest, czy jest ona pokolorowana, czy nie;
- indeks koloru (indeks-min.koloru, indeks-maks.koloru)— określa liczbę kolorów obsługiwanych przez urządzenie;
- współczynnik proporcji urządzenia (min. współczynnik proporcji urządzenia, maksymalny współczynnik proporcji urządzenia)— określa proporcje ekranu urządzenia (2 liczby oddzielone ukośnikiem, np. 4/3);
- wysokość-urządzenia (min-wysokość-urządzenia, maksymalna-wysokość-urządzenia)— określa całą dostępną wysokość ekranu urządzenia lub drukowanej strony;
- szerokość urządzenia (min. szerokość urządzenia, maks. szerokość urządzenia)— określa całą dostępną szerokość ekranu urządzenia lub drukowanej strony;
- siatka— stwierdza, że jest to urządzenie o stałym rozmiarze znaków (terminal lub telefon);
- wysokość (wysokość minimalna, wysokość maksymalna)— ustawia wysokość wyświetlanego obszaru;
- monochromatyczny (min. monochromatyczny, maks. monochromatyczny)— określa, że urządzenie jest monochromatyczne; w przypadku przypisania jakiejkolwiek wartości wskazywana jest liczba bitów na piksel. Na przykład wartość 8 odpowiada 28 odcieniom monochromatycznego koloru wyświetlacza;
- orientacja— określa, czy urządzenie znajduje się w trybie poziomym, wartość krajobraz lub znaczenie portretu portret;
- rozdzielczość (rozdzielczość minimalna, rozdzielczość maksymalna)— określa rozdzielczość urządzenia w dpi (punktach na cal) lub dpcm (kropkach na centymetr);
- skanowanie— określa typ skanowania TV — z przeplotem lub progresywny. W przypadku skanowania z przeplotem telewizor najpierw wyświetla linie nieparzyste klatki, a następnie parzyste, natomiast w przypadku skanowania progresywnego przesyłana i wyświetlana jest cała klatka;
- szerokość (min-szerokość, max-szerokość)— ustawia szerokość wyświetlanego obszaru;
A teraz przykład.
Blokuj rozmiary elementów w CSS
Stwórzmy stronę internetową i ustawmy dla niej styl za pomocą zapytań o media.
To jest nagłówek witryny.
Jest to blok z treścią (główną treścią strony).
Teraz ustawiamy arkusz stylów:
#główny (
rozmiar czcionki: 14px;
}
@ekran multimediów i (maksymalna szerokość: 800 pikseli)(
#nagłówek(
tło:#ff6633;
szerokość:100%;
wysokość:10%;
}
#górne menu(
wyrównanie tekstu:środek;
kolor tła:#ffcc66;
szerokość:100%;
wysokość:12%;
}
#górne menu a(
kolor niebieski;
dekoracja tekstu: brak;
}
#topmenu a:najedź(
kolor niebieski;
dekoracja tekstu:podkreślenie;
}
#treść(
kolor tła:#ffccff;
pływający:w lewo;
szerokość:80%;
wysokość: 68%;
}
#Pasek boczny(
pływający:w lewo;
kolor tła:#ff9966;
szerokość:20%;
wysokość: 68%;
}
#pasek boczny a(
Blok wyświetlacza;
dopełnienie-dół:3px;
kolor niebieski;
dekoracja tekstu: brak;
}
#pasek boczny a: najedź(
kolor niebieski;
dekoracja tekstu:podkreślenie;
}
#stopka(
oba czyste;
kolor tła:#ffff33;
szerokość:100%;
wysokość:10%;
}
}
Ekran @media i (min. szerokość: 800 pikseli)(
#główny (
szerokość: 800 pikseli;
margines:0 automatyczny;
}
#nagłówek(
tło:#ff6633;
szerokość: 800 pikseli;
wysokość: 100 pikseli;
}
#górne menu(
wyrównanie tekstu:środek;
kolor tła:#ffcc66;
szerokość: 800 pikseli;
wysokość: 30 pikseli;
}
#górne menu a(
kolor niebieski;
dekoracja tekstu: brak;
}
#topmenu a:najedź(
kolor niebieski;
dekoracja tekstu:podkreślenie;
}
#treść(
kolor tła:#ffccff;
pływający:w lewo;
szerokość: 650 pikseli;
wysokość: 400 pikseli;
}
#Pasek boczny(
pływający:w lewo;
kolor tła:#ff9966;
szerokość: 150 pikseli;
wysokość: 400 pikseli;
}
#pasek boczny a(
Blok wyświetlacza;
dopełnienie-dół:3px;
kolor niebieski;
dekoracja tekstu: brak;
}
#pasek boczny a: najedź(
kolor niebieski;
dekoracja tekstu:podkreślenie;
}
#stopka(
oba czyste;
kolor tła:#ffff33;
szerokość: 800 pikseli;
wysokość: 50 pikseli;
}
}
Przyjrzyjmy się teraz samemu kodowi. Z dokumentem HTML wszystko jest jasne, połączmy z nim styl mediastyle.css. W arkuszu stylów ustaw najpierw rozmiar czcionki. Następnie mówimy, że jeśli szerokość ekranu (okna przeglądarki) jest mniejsza niż 800 pikseli, to obowiązują dla niego poniższe zasady i ustalamy rozmiary wszystkich bloków jako procent szerokości okna. Jeśli szerokość ekranu jest większa niż 800 pikseli, ustaw wielkość wszystkich bloków w pikselach i ustaw położenie treści na środku strony za pomocą wartości właściwości margines:0 automatyczny;. Tutaj używamy pływających bloków do pozycjonowania. Na tym kończy się nasze badanie CSS. Przykładową stronę, którą stworzyliśmy można zobaczyć tutaj. Możesz bardziej szczegółowo przestudiować kaskadowe arkusze stylów, korzystając z różnej literatury i sieci WWW.
<<Предыдущая | В раздел
Wydawałoby się, że w układzie jest coś trudnego. HTML i CSS to nawet nie są języki programowania. Strona HTML to po prostu bloki umieszczone we właściwym miejscu. W rzeczywistości nie jest to takie proste. Zasiadanie do układu bez zrozumienia niuansów modelu blokowego oznacza marnowanie dużej ilości czasu na przypadkowe dostosowywanie wyników, za każdym razem będąc zaskoczonym nieoczekiwanymi wynikami lub ich brakiem. W budowaniu stron internetowych, podobnie jak w budownictwie, jeśli chcesz zbudować coś poważniejszego niż ogrodzenie, musisz znać subtelności.
css, aby zdefiniować wysokość i szerokość bloku.
Domyślnie szerokość bloku zajmuje całą dostępną dla niego przestrzeń i jest ograniczona szerokością bloku nadrzędnego. Wysokość bloku zależy od jego zawartości.
Rozmiar bloku można zmienić za pomocą właściwości wysokości i szerokości.
Jak ustawić rozmiar bloku w css
Właściwości te ustawia się nie dla całego bloku, ale dla jego zawartości. Należy o tym pamiętać, ponieważ oprócz treści na wielkość bloku wpływają jeszcze dwie właściwości – obramowanie i dopełnienie. Jak sama nazwa wskazuje, granica definiuje granicę. Na zdjęciu granica jest oznaczona czerwoną linią. Odstęp między obramowaniem a zawartością jest określany za pomocą właściwości padding. Jeśli tego nie ustawisz, tekst na obrazku poniżej zostanie dociśnięty blisko krawędzi.
Dlatego przy obliczaniu rozmiaru bloku, oprócz szerokości i wysokości, należy wziąć pod uwagę dopełnienie i obramowanie. Przykładowo obliczmy wielkość bloku, dla którego podane są następujące wartości:
- obramowanie:5pxsolidred;
- dopełnienie: 10px;
- szerokość:200px;
Szerokość bloku 200px+10px*2+5px*2=230px
Aby nie zawracać sobie głowy arytmetyką i zawsze znać dokładnie rozmiar bloku, istnieje właściwość box-size. Przyjmuje trzy wartości.
- content-box — Wartości określone w szerokości i wysokości dotyczą tylko treści.
- padding-box — Wartość określona w szerokości i wysokości określa rozmiar zawartości plus rozmiar dopełnienia.
- border-box — Wartość określona w szerokości i wysokości określa rozmiar zawartości plus dopełnienie i obramowanie
Jeśli dodasz linię do powyższego przykładu
rozmiar bloku będzie wynosić podane 200 pikseli, a szerokość zawartości zostanie zmniejszona do 200 pikseli-10 pikseli*2-5 pikseli*2=170 pikseli.
margines jak poprawnie ustawić odległość pomiędzy blokami.
Błędem byłoby mówić o blokach i nie wspomnieć o marginesie, zwłaszcza, że jest o czym rozmawiać. Dla niewtajemniczonych margines określa wolną przestrzeń wokół bloku. W przeciwieństwie do paddingu, nie wszystko jest tu takie oczywiste. Rozważmy dwa bloki, jeden zagnieżdżony w drugim. Ustaw margines zagnieżdżonego bloku: 10%. Od razu pojawia się pytanie, skąd obliczać te wartości procentowe. Procenty są pobierane z szerokości elementu nadrzędnego. Nie ma znaczenia, czy definiujemy wcięcia poziome, czy pionowe. Odpowiedź, szczerze mówiąc, nie jest oczywista, ale jeśli spojrzysz na wyjaśnienia, stanie się jasne, dlaczego wybrano tę opcję.
To nie koniec niespodzianek. margines dodany do naszego obrazu da tak nieoczekiwany efekt.
Szary na obrazku oznacza blok nadrzędny. Wbrew naszym oczekiwaniom margines zastosowany do bloku podrzędnego nie rozszerzył granic bloku nadrzędnego powyżej i poniżej. Stało się tak, ponieważ blok nadrzędny nie miał na czym budować. W takich przypadkach margines umieszcza się na zewnątrz i odsuwa od sąsiedniego bloku lub granic bloku położonego wyżej. Aby blok mógł zostać odepchnięty od swojego rodzica, blok nadrzędny musi mieć dopełnienie, obramowanie lub właściwość przepełnienia ustawioną na dowolną wartość inną niż widoczna.
Kolejną cechą wcięć jest zapadanie się. Chodzi o to, że jeśli dwa sąsiednie elementy mają określony margines, to odległość między nimi będzie równa największej wartości.
margines może przyjmować wartości ujemne. W takim przypadku jeden blok będzie nachodził na drugi. Określany jest stopień, w jakim jeden blok wpełza na drugi
Element blokowy to element, który pojawia się na stronie internetowej jako prostokąt. Element taki zajmuje całą dostępną szerokość, wysokość elementu określa jego zawartość i zawsze zaczyna się od nowej linii. Elementy blokowe obejmują kontenery
,
,
Dopuszczalne jest zagnieżdżanie jednego elementu blokowego w drugim, a także umieszczanie wewnątrz nich elementów inline ( , Na przykład).
Zabronione jest dodawanie elementów blokowych wewnątrz elementów wbudowanych (przykład 1).
Przykład 1: Używanie elementów blokowych
W tym przykładzie akapit (tag
) jest wkładany do pojemnika
i link (tag ) - w tytule . Swoją drogą błędem byłoby postąpić odwrotnie – dodaj
. Swoją drogą błędem byłoby postąpić odwrotnie – dodaj do pojemnika (Ale mądrze
), od tagu nie dotyczy elementów blokowych.
Zagnieżdżanie znaczników blokowych wewnątrz elementów inline jest bardziej powszechne w przypadku początkujących, którzy nie rozumieją jeszcze różnicy między nimi.
Poza tym przeglądarki nauczyły się wyłapywać takie błędy i mniej więcej poprawnie wyświetlać kod. Zalecamy jednak przestrzeganie specyfikacji w tym zakresie, aby wyświetlić stronę internetową bez błędów.
Szerokość elementu bloku
Domyślnie szerokość bloku jest obliczana automatycznie i zajmuje całą dostępną przestrzeń. W tym miejscu należy wyjaśnić, co należy przez to rozumieć. Na przykład, jeśli tag
Jeżeli w kodzie dokumentu jest taki, to zajmuje on całą wolną szerokość okna przeglądarki i szerokość bloku będzie równa 100%. Warto umieścić jeden tag wewnątrz innego, gdy szerokość znacznika wewnętrznego zaczyna być obliczana w stosunku do jego elementu nadrzędnego, tj. pojemnik zewnętrzny.
Niektóre przeglądarki dość luźno interpretują pojęcie szerokości, chociaż specyfikacja CSS wyraźnie stwierdza, że szerokość jest sumą następujących parametrów: szerokość samego bloku (szerokość), marginesy (margin), pól (padding) i obramowania (border). . Przykład 2 pokazuje, jak utworzyć warstwę zawierającą wszystkie te komponenty.
Przykład 2: Szerokość warstwy
W wyniku tego przykładu otrzymamy warstwę o szerokości 342 pikseli. Na ryc. 1 pokazuje, z czego składa się szerokość warstwy.
Rysunek 1. Szerokość elementu blokowego
W przypadku kiedynie jest określony w kodzie, przeglądarka Internet Explorer przyjmuje wartość właściwości szerokość jako szerokość całego bloku.
Spójrzmy na inny przykład związany z szerokością. Domyślnie szerokość warstwy jest ustawiona na automatyczną, dzięki temu warstwa dopasowuje się do okna przeglądarki bez uwzględnienia wartości ustawionych pól. Jeśli zmienisz szerokość na 100%, podczas dodawania wartości dopełnienia, marginesu lub obramowania nieuchronnie pojawi się poziomy pasek przewijania.
Istnieje kilka podejść do uzyskania uniwersalnego wyniku. Przykład 3 pokazuje utworzenie trzech warstw, których szerokość jest określana procentowo.
Przykład 3. Szerokość warstwy w procentach
Wynik przykładu pokazano na ryc. 2.
Ryż. 2. Wyświetl szerokości warstw w przeglądarce
Szerokość pierwszej warstwy w tym przykładzie (warstwa 1) jest ustawiona na 100%, co powoduje wyświetlenie poziomego paska przewijania. Dla drugiej warstwy (warstwa 2) szerokość jest również ustawiona na 100%, ale marginesy są zdefiniowane dla akapitu wewnętrznego (znacznik
). Dzięki temu szerokość warstwy będzie taka sama we wszystkich przeglądarkach. Trzecia warstwa (warstwa 3) nie ma w ogóle zastosowanej właściwości szerokości, więc jest ona domyślnie zdefiniowana - auto. W tym przypadku warstwa zajmie całą szerokość okna przeglądarki bez poziomych pasów.
Sposób ustawienia szerokości zależy od zastosowanego układu i wyboru programisty, ale w każdym przypadku należy wziąć pod uwagę cechy elementów blokowych i stworzyć uniwersalny kod.
Wysokość
Sytuacja z wysokością elementów blokowych jest podobna do szerokości. Przeglądarka przyjmuje wartość właściwości height jako wysokość warstwy i dodaje do niej wartości marginesu, dopełnienia i obramowania. Jeśli wysokość warstwy nie jest ustawiona jawnie, jest ona obliczana automatycznie na podstawie objętości zawartości.
Załóżmy, że dla warstwy ustawiono wysokość w pikselach, a zawartość warstwy jest wyraźnie większa niż określona wysokość (Przykład 4).
Przykład 4: Wysokość warstwy
Wynik tego przykładu pokazano na ryc. 3.
Ryż. 3. Wysokość bloku w różnych przeglądarkach
Widać, że przeglądarka pozostawia wysokość bez zmian, przez co tekst nie mieści się w bloku i nakłada się na warstwę.
Kolor tła
Najłatwiejszym sposobem ustawienia koloru tła elementu jest użycie ogólnej właściwości tła. W tym przypadku obszar określony wartościami szerokości, wysokości i wypełnienia jest wypełniany tłem (ryc. 4).
Opcje blokowania w CSS
Obszar warstwy wypełniony kolorem tła
Zatem margines nie bierze udziału w tworzeniu kolorowego obszaru.
Granice
Ze względu na różnicę w podejściu przeglądarki do tworzenia elementów blokowych, istnieje również różnica w wyświetlaniu krawędzi. Przeglądarka Internet Explorer 7 rysuje ramkę wewnątrz bloku, a Firefox rysuje ramkę na zewnątrz. Jeśli jednak zastosujemy wypełnienie tła, zobaczymy zupełnie odwrotny obraz (ryc. 5). A wszystko dlatego, że Firefox (Opera) ustawia kolor tła wzdłuż zewnętrznej krawędzi obramowania, a Internet Explorer ustawia go wzdłuż wewnętrznej krawędzi. Począwszy od wersji 8.0, Internet Explorer zmienił styl wyświetlania ramki, jest ona rysowana wewnątrz bloku, podobnie jak w przeglądarce Firefox.
A. Internet Explorer 7
B. Firefox, Internet Explorer 8+
Ryż. 5. Wyświetlanie ramki w przeglądarkach
Przykład 5 pokazuje, jak utworzyć kod, aby uzyskać taką granicę.
Przykład 5: Ramka z kropkami
Różnice w sposobie rysowania obramowań przez przeglądarki są zauważalne jedynie na kolorowych tłach i liniach kropkowanych. W przypadku ramki pełnej wygląd warstwy w przeglądarkach będzie prawie taki sam.
Streszczenie
Elementy blokowe pełnią rolę głównego materiału budowlanego podczas układania stron internetowych. Elementy takie charakteryzują się tym, że zawsze zaczynają się od nowej linii i zajmują całą dostępną szerokość obszaru, na którym się znajdują.
Specyfikacja CSS określa, że o wysokości i szerokości elementu decydują nie tylko wartości wysokości i szerokości, ale także wartości marginesów, dopełnienia i obramowań. Przeglądarki pod tym względem dzielą się na dwie części: niektóre wspierają specyfikację w tej kwestii, inne natomiast ignorują ją i postępują po swojemu. Stwarza to trudności programistom, którzy chcą tworzyć uniwersalne strony internetowe. Radzimy jedynie w ograniczonym zakresie korzystać z właściwości szerokości i wysokości, gdyż domyślnie przeglądarka korzysta z argumentu auto, który wymusza automatyczne dopasowanie wymiarów elementu.
Domyślnie elementy blokowe korzystają z automatycznej szerokości. Oznacza to, że element zostanie rozciągnięty w poziomie dokładnie tyle, ile jest wolnego miejsca. Domyślna wysokość elementów blokowych ustawiana jest automatycznie, tj. Przeglądarka rozciąga obszar zawartości w pionie, aby wyświetlić całą zawartość. Aby ustawić niestandardowe wymiary obszaru zawartości elementu, możesz użyć właściwości szerokości i wysokości.
Właściwość CSS szerokość pozwala ustawić szerokość obszaru zawartości elementu, a właściwość height pozwala ustawić wysokość obszaru zawartości:
Należy pamiętać, że właściwości szerokości i wysokości określają jedynie rozmiar obszaru zawartości; aby obliczyć całkowitą szerokość elementu blokowego, należy dodać szerokość obszaru zawartości, lewego i prawego dopełnienia oraz szerokość lewego i prawego prawa granica. To samo dotyczy całkowitej wysokości elementu, tylko wszystkie wartości są obliczane w pionie:
Nazwa dokumentu
W tym akapicie ustawimy tylko szerokość i wysokość.
Akapit ten zawiera, oprócz szerokości i wysokości, wewnętrzne wypełnienie, obramowanie i zewnętrzne wypełnienie.
Próbować "Przykład wyraźnie pokazuje, że drugi element zajmuje więcej miejsca niż pierwszy. Jeśli obliczymy za pomocą naszego wzoru, wówczas wymiary pierwszego akapitu wynoszą 150x100 pikseli, a wymiary drugiego akapitu wynoszą:
Całkowita wysokość: 5 pikseli +
10 pikseli +
100 pikseli +
10 pikseli +
5 pikseli = 130 pikseli
szczyt
rama
górny
wcięcie
wysokość
niżej
wcięcie
niżej
rama
czyli 180 x 130 pikseli.
Przepełnienie elementu
Po określeniu szerokości i wysokości elementu należy zwrócić uwagę na jeden ważny punkt - zawartość znajdująca się wewnątrz elementu może przekroczyć określony rozmiar bloku. W takim przypadku część treści wyjdzie poza granice elementu.Aby uniknąć tego nieprzyjemnego momentu, możesz skorzystać z właściwości CSS overflow. Właściwość overflow informuje przeglądarkę, co zrobić, jeśli zawartość bloku przekracza jego rozmiar. Właściwość ta może przyjmować jedną z czterech wartości:
- widoczny - domyślna wartość używana przez przeglądarkę. Ustawienie tej wartości będzie miało taki sam skutek, jak brak ustawienia właściwości przepełnienia.
- scroll - dodaje do elementu pionowe i poziome paski przewijania.
- auto - dodaje paski przewijania, jeśli to konieczne.
- ukryty - ukrywa część treści wykraczającą poza granice elementu blokowego.
Nazwa dokumentu
Całkowity rozmiar dowolnego bloku jest sumą kilku wartości właściwości. Co widać na schemacie:
- Główny rozmiar bloku (zawiera główną zawartość bloku - obraz, wideo, tekst lub wszystko naraz) jest ustawiany za pomocą właściwości css szerokość I wysokość (wysokość bloku)
- Dalej wokół głównego bloku znajdują się pola ( wyściółka) za ich pomocą ustawiamy wcięcie głównej treści od krawędzi ramki
- Następna warstwa - granica Nietrudno zgadnąć, za co odpowiada ta właściwość
- Ostatnią warstwą tworzącą całkowity rozmiar bloku jest margines zewnętrzny używając tej właściwości CSS, możesz ustawić wcięcie pomiędzy blokami
Ustawianie rozmiarów bloków
W ten sposób dowiedzieliśmy się, że wymiary całkowite to nic innego jak suma wartości wszystkich wymienionych powyżej właściwości. I możemy łatwo manipulować wszystkimi tymi właściwościami.
Możemy określić wartości wysokości i szerokości za pomocą stałych z jednostkami takimi jak px itp. Możesz także określić, używając procentów i obliczeń.
Jeśli szerokość bloku nie zostanie określona, domyślnie blok zajmie całą szerokość bloku nadrzędnego, pomniejszoną o wartości dopełnienia i obramowania.
właściwość rozmiaru pudełka
Jeśli masz obszar 800 px i chciałbyś umieścić w nim 2 elementy, dzieląc ten obszar równo, to reguły CSS
Nie pozwolą ci tego zrobić z jednego prostego powodu, ponieważ... Całkowity rozmiar bloku obejmuje wszystkie wcięcia i obramowanie, dlatego nie będzie wystarczająco dużo miejsca na drugi blok.
Możemy rozwiązać ten problem, po prostu obliczając, ile miejsca potrzebujemy na obramowanie i dopełnienie, i odejmując je od właściwości szerokości. Ale jest inny sposób: w tym przypadku możesz skorzystać z nieruchomości rozmiar pudełka:border-box
Pozycja (rozmiar pudełka: obramowanie; /**/ szerokość: 50%; dopełnienie: 20 pikseli; obramowanie: 1 pikseli; margines: 0 pikseli; )
Jeśli zastosujemy regułę box-sizing:border-box do bloku css, nie będziemy musieli obliczać wewnętrznych dopełnień i obramowania, ponieważ w tym przypadku zostaną one uwzględnione w wartości szerokości i będziemy mogli bezpiecznie ułożyć wewnętrzne wypełnienie i obramowanie według potrzeb, bez obawy, że klocki nie będą pasować. Ale nieruchomość nie pasuje do tej reguły margines. Dlatego też, jeśli chcesz dodać zewnętrzne wypełnienie pomiędzy elementami, oblicz, ile będziesz musiał odjąć od właściwości szerokości;
Uwaga: Jeśli ta właściwość nie działa dla Ciebie w przeglądarce Chrome, dodaj dla niej tę regułę osobno
Rozmiar pudełka Webkit:border-box;
Hack Clearfix to popularny sposób prawidłowego wyświetlania pływających bloków, pozwalający uniknąć używania tabel podczas układu. Potrzeba tego pojawia się, gdy zaczynasz zauważać, że wysokość nadrzędnego bloku DIV nie odpowiada zawartości dzieci. Przykładowo zaplanowałeś taką organizację bloków na swojej stronie ( dla przejrzystości blok nadrzędny jest podświetlony na żółto, a bloki podrzędne na zielono i czerwono):
Dlaczego napisałeś tę stronę HTML:
Clear-FIX
DIV w lewo
DIV Jasne
i odpowiedni plik stylu CSS:
Div-main ( margines: 0 automatyczny; dopełnienie: 20 pikseli; tło: #eeee33; szerokość: 320 pikseli; ) .div-left ( dopełnienie: 20 pikseli; tło: #339933; pływak: lewy; szerokość: 100 pikseli; ) .div-right ( dopełnienie: 20 pikseli; tło: #cc0033; pływak: prawy; szerokość: 100 pikseli; )
Jednak w rzeczywistości otrzymasz taki obraz:
Rodzic DIV nie przytula dzieci. Oznacza to, że nie rozciąga się w zależności od wysokości zawartych w nim bloków. I nie ma tu żadnego błędu, po prostu używają pływających bloków w układzie (właściwość FLOAT). Elementy pływające są wyjmowane z bieżącego przepływu i tworzą między sobą własny kontekst w kontekście nadrzędnym. W tym przypadku dla przepływu zewnętrznego nie będą one miały wymiarów. Aby rodzic DIV wziął pod uwagę ich rozmiar i rozciągnięcie na całej zawartości, potrzebna jest mała sztuczka.
Dwa sposoby rozciągania rozmiaru nadrzędnego DIV zgodnie z zawartością jego bloków
Poprzednio używałem takiego dodatkowego bloku przed tagiem zamykającym nadrzędnego DIV:
Następnie wygląd strony odpowiadał temu, co zaplanowano:
Drugi sposób na zmuszenie rodzicielskiego elementu div do rozciągnięcia do wysokości dziecka
Możesz stworzyć „samoczyszczący” pojemnik, używając pseudoklasy after:
Clear-fix:before, .clear-fix:after ( treść: " "; display: table; ) .clear-fix:after ( clear: oba; ) /* Kule dla osła (Internet Explorer 6 i 7) */ .clear-fix ( *zoom: 1; )
I dodaj odpowiednią klasę do bloku nadrzędnego:
Wygląd strony również będzie odpowiadał zamierzonemu układowi:
Obie metody działają dobrze. I pozwalają rozwiązać problem pływających bloków, tak że nadrzędny DIV rozciąga się na wysokość zawartości swoich dzieci.
Cześć, drogi Czytelniku.
To jedenasta lekcja nauki CSS. W tej lekcji przyjrzymy się tylko dwóm prostym, ale ważnym właściwościom. Te właściwości kontrolują wysokość i szerokość bloku.
Zanim zaczniesz studiować tę lekcję, przejrzyj poprzednie lekcje:
Teoria i praktyka
Na ostatniej lekcji przyjrzeliśmy się, czym jest model blokowy, marginesy wewnętrzne i zewnętrzne. W tym przypadku przyjrzymy się tylko dwóm właściwościom: wysokości i szerokości bloku. Wysokość w CSS jest ustawiana przez właściwość wysokość
, a szerokość jest właściwością szerokość
. Przyjrzyjmy się kodowi na prawdziwym przykładzie (weźmy przykład z ostatniej lekcji):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<HTML >
<głowa >
<tytuł > dom</tytuł>
<meta http-equiv = „Typ zawartości” content = „text/html; charset=utf-8” >
<link rel = „arkusz stylów” type = „text/css” href = „style.css” >
</głowa>
<ciało >
<id div = "treść" >
<div klasa = "pierwszyPar" >
<p> Aliquam malesuada tellus justo, eget lacinia nunc rutrum a. Phasellus dictum tempor eleifend. Nunc ut magna non purus fermentum egestas ac eu nulla.</p>
<p> Fusce est tellus, Mattis quis nisl et, egestas posuere libero. Donec scelerisque tellus porttitor Massa dictum pulvinar.</p>
</div>
<klasa div = "drugiPar" >
<p> Kras</p>
<ul >
<ja > przyprawa amet</li>
<ja > aliquam volutpat</li>
<ja > element interdum</li>
</ul>
</div>
</div>
</ciało>
</html>
Oraz w CSS dla każdego bloku
ustaw szerokość na 200 pikseli (px):
Zobaczymy jak to będzie wyglądać w przeglądarce.
Ale mądrze
), od tagu nie dotyczy elementów blokowych.Zagnieżdżanie znaczników blokowych wewnątrz elementów inline jest bardziej powszechne w przypadku początkujących, którzy nie rozumieją jeszcze różnicy między nimi.
Poza tym przeglądarki nauczyły się wyłapywać takie błędy i mniej więcej poprawnie wyświetlać kod. Zalecamy jednak przestrzeganie specyfikacji w tym zakresie, aby wyświetlić stronę internetową bez błędów.
Szerokość elementu bloku
Domyślnie szerokość bloku jest obliczana automatycznie i zajmuje całą dostępną przestrzeń. W tym miejscu należy wyjaśnić, co należy przez to rozumieć. Na przykład, jeśli tag
Jeżeli w kodzie dokumentu jest taki, to zajmuje on całą wolną szerokość okna przeglądarki i szerokość bloku będzie równa 100%. Warto umieścić jeden tag
wewnątrz innego, gdy szerokość znacznika wewnętrznego zaczyna być obliczana w stosunku do jego elementu nadrzędnego, tj. pojemnik zewnętrzny.
Nazwa dokumentu
Nazwa dokumentu
Clear-FIX
Niektóre przeglądarki dość luźno interpretują pojęcie szerokości, chociaż specyfikacja CSS wyraźnie stwierdza, że szerokość jest sumą następujących parametrów: szerokość samego bloku (szerokość), marginesy (margin), pól (padding) i obramowania (border). . Przykład 2 pokazuje, jak utworzyć warstwę zawierającą wszystkie te komponenty.
Przykład 2: Szerokość warstwy
W wyniku tego przykładu otrzymamy warstwę o szerokości 342 pikseli. Na ryc. 1 pokazuje, z czego składa się szerokość warstwy.
Rysunek 1. Szerokość elementu blokowego
W przypadku kiedynie jest określony w kodzie, przeglądarka Internet Explorer przyjmuje wartość właściwości szerokość jako szerokość całego bloku.
Spójrzmy na inny przykład związany z szerokością. Domyślnie szerokość warstwy jest ustawiona na automatyczną, dzięki temu warstwa dopasowuje się do okna przeglądarki bez uwzględnienia wartości ustawionych pól. Jeśli zmienisz szerokość na 100%, podczas dodawania wartości dopełnienia, marginesu lub obramowania nieuchronnie pojawi się poziomy pasek przewijania.
Istnieje kilka podejść do uzyskania uniwersalnego wyniku. Przykład 3 pokazuje utworzenie trzech warstw, których szerokość jest określana procentowo.
Przykład 3. Szerokość warstwy w procentach
Wynik przykładu pokazano na ryc. 2.
Ryż. 2. Wyświetl szerokości warstw w przeglądarce
Szerokość pierwszej warstwy w tym przykładzie (warstwa 1) jest ustawiona na 100%, co powoduje wyświetlenie poziomego paska przewijania. Dla drugiej warstwy (warstwa 2) szerokość jest również ustawiona na 100%, ale marginesy są zdefiniowane dla akapitu wewnętrznego (znacznik
). Dzięki temu szerokość warstwy będzie taka sama we wszystkich przeglądarkach. Trzecia warstwa (warstwa 3) nie ma w ogóle zastosowanej właściwości szerokości, więc jest ona domyślnie zdefiniowana - auto. W tym przypadku warstwa zajmie całą szerokość okna przeglądarki bez poziomych pasów.
Sposób ustawienia szerokości zależy od zastosowanego układu i wyboru programisty, ale w każdym przypadku należy wziąć pod uwagę cechy elementów blokowych i stworzyć uniwersalny kod.
Wysokość
Sytuacja z wysokością elementów blokowych jest podobna do szerokości. Przeglądarka przyjmuje wartość właściwości height jako wysokość warstwy i dodaje do niej wartości marginesu, dopełnienia i obramowania. Jeśli wysokość warstwy nie jest ustawiona jawnie, jest ona obliczana automatycznie na podstawie objętości zawartości.
Załóżmy, że dla warstwy ustawiono wysokość w pikselach, a zawartość warstwy jest wyraźnie większa niż określona wysokość (Przykład 4).
Przykład 4: Wysokość warstwy
Wynik tego przykładu pokazano na ryc. 3.
Ryż. 3. Wysokość bloku w różnych przeglądarkach
Widać, że przeglądarka pozostawia wysokość bez zmian, przez co tekst nie mieści się w bloku i nakłada się na warstwę.
Kolor tła
Najłatwiejszym sposobem ustawienia koloru tła elementu jest użycie ogólnej właściwości tła. W tym przypadku obszar określony wartościami szerokości, wysokości i wypełnienia jest wypełniany tłem (ryc. 4).
Opcje blokowania w CSS
Obszar warstwy wypełniony kolorem tła
Zatem margines nie bierze udziału w tworzeniu kolorowego obszaru.
Granice
Ze względu na różnicę w podejściu przeglądarki do tworzenia elementów blokowych, istnieje również różnica w wyświetlaniu krawędzi. Przeglądarka Internet Explorer 7 rysuje ramkę wewnątrz bloku, a Firefox rysuje ramkę na zewnątrz. Jeśli jednak zastosujemy wypełnienie tła, zobaczymy zupełnie odwrotny obraz (ryc. 5). A wszystko dlatego, że Firefox (Opera) ustawia kolor tła wzdłuż zewnętrznej krawędzi obramowania, a Internet Explorer ustawia go wzdłuż wewnętrznej krawędzi. Począwszy od wersji 8.0, Internet Explorer zmienił styl wyświetlania ramki, jest ona rysowana wewnątrz bloku, podobnie jak w przeglądarce Firefox.
A. Internet Explorer 7
B. Firefox, Internet Explorer 8+
Ryż. 5. Wyświetlanie ramki w przeglądarkach
Przykład 5 pokazuje, jak utworzyć kod, aby uzyskać taką granicę.
Przykład 5: Ramka z kropkami
Różnice w sposobie rysowania obramowań przez przeglądarki są zauważalne jedynie na kolorowych tłach i liniach kropkowanych. W przypadku ramki pełnej wygląd warstwy w przeglądarkach będzie prawie taki sam.
Streszczenie
Elementy blokowe pełnią rolę głównego materiału budowlanego podczas układania stron internetowych. Elementy takie charakteryzują się tym, że zawsze zaczynają się od nowej linii i zajmują całą dostępną szerokość obszaru, na którym się znajdują.
Specyfikacja CSS określa, że o wysokości i szerokości elementu decydują nie tylko wartości wysokości i szerokości, ale także wartości marginesów, dopełnienia i obramowań. Przeglądarki pod tym względem dzielą się na dwie części: niektóre wspierają specyfikację w tej kwestii, inne natomiast ignorują ją i postępują po swojemu. Stwarza to trudności programistom, którzy chcą tworzyć uniwersalne strony internetowe. Radzimy jedynie w ograniczonym zakresie korzystać z właściwości szerokości i wysokości, gdyż domyślnie przeglądarka korzysta z argumentu auto, który wymusza automatyczne dopasowanie wymiarów elementu.
Domyślnie elementy blokowe korzystają z automatycznej szerokości. Oznacza to, że element zostanie rozciągnięty w poziomie dokładnie tyle, ile jest wolnego miejsca. Domyślna wysokość elementów blokowych ustawiana jest automatycznie, tj. Przeglądarka rozciąga obszar zawartości w pionie, aby wyświetlić całą zawartość. Aby ustawić niestandardowe wymiary obszaru zawartości elementu, możesz użyć właściwości szerokości i wysokości.
Właściwość CSS szerokość pozwala ustawić szerokość obszaru zawartości elementu, a właściwość height pozwala ustawić wysokość obszaru zawartości:
Należy pamiętać, że właściwości szerokości i wysokości określają jedynie rozmiar obszaru zawartości; aby obliczyć całkowitą szerokość elementu blokowego, należy dodać szerokość obszaru zawartości, lewego i prawego dopełnienia oraz szerokość lewego i prawego prawa granica. To samo dotyczy całkowitej wysokości elementu, tylko wszystkie wartości są obliczane w pionie:
W tym akapicie ustawimy tylko szerokość i wysokość.
Akapit ten zawiera, oprócz szerokości i wysokości, wewnętrzne wypełnienie, obramowanie i zewnętrzne wypełnienie.
Próbować "Przykład wyraźnie pokazuje, że drugi element zajmuje więcej miejsca niż pierwszy. Jeśli obliczymy za pomocą naszego wzoru, wówczas wymiary pierwszego akapitu wynoszą 150x100 pikseli, a wymiary drugiego akapitu wynoszą:
| Całkowita wysokość: | 5 pikseli | + | 10 pikseli | + | 100 pikseli | + | 10 pikseli | + | 5 pikseli | = 130 pikseli |
| szczyt rama | górny wcięcie | wysokość | niżej wcięcie | niżej rama |
czyli 180 x 130 pikseli.
Przepełnienie elementu
Po określeniu szerokości i wysokości elementu należy zwrócić uwagę na jeden ważny punkt - zawartość znajdująca się wewnątrz elementu może przekroczyć określony rozmiar bloku. W takim przypadku część treści wyjdzie poza granice elementu.Aby uniknąć tego nieprzyjemnego momentu, możesz skorzystać z właściwości CSS overflow. Właściwość overflow informuje przeglądarkę, co zrobić, jeśli zawartość bloku przekracza jego rozmiar. Właściwość ta może przyjmować jedną z czterech wartości:
- widoczny - domyślna wartość używana przez przeglądarkę. Ustawienie tej wartości będzie miało taki sam skutek, jak brak ustawienia właściwości przepełnienia.
- scroll - dodaje do elementu pionowe i poziome paski przewijania.
- auto - dodaje paski przewijania, jeśli to konieczne.
- ukryty - ukrywa część treści wykraczającą poza granice elementu blokowego.
Całkowity rozmiar dowolnego bloku jest sumą kilku wartości właściwości. Co widać na schemacie:
- Główny rozmiar bloku (zawiera główną zawartość bloku - obraz, wideo, tekst lub wszystko naraz) jest ustawiany za pomocą właściwości css szerokość I wysokość (wysokość bloku)
- Dalej wokół głównego bloku znajdują się pola ( wyściółka) za ich pomocą ustawiamy wcięcie głównej treści od krawędzi ramki
- Następna warstwa - granica Nietrudno zgadnąć, za co odpowiada ta właściwość
- Ostatnią warstwą tworzącą całkowity rozmiar bloku jest margines zewnętrzny używając tej właściwości CSS, możesz ustawić wcięcie pomiędzy blokami
Ustawianie rozmiarów bloków
W ten sposób dowiedzieliśmy się, że wymiary całkowite to nic innego jak suma wartości wszystkich wymienionych powyżej właściwości. I możemy łatwo manipulować wszystkimi tymi właściwościami.
Możemy określić wartości wysokości i szerokości za pomocą stałych z jednostkami takimi jak px itp. Możesz także określić, używając procentów i obliczeń.
Jeśli szerokość bloku nie zostanie określona, domyślnie blok zajmie całą szerokość bloku nadrzędnego, pomniejszoną o wartości dopełnienia i obramowania.
właściwość rozmiaru pudełka
Jeśli masz obszar 800 px i chciałbyś umieścić w nim 2 elementy, dzieląc ten obszar równo, to reguły CSS
Nie pozwolą ci tego zrobić z jednego prostego powodu, ponieważ... Całkowity rozmiar bloku obejmuje wszystkie wcięcia i obramowanie, dlatego nie będzie wystarczająco dużo miejsca na drugi blok.
Możemy rozwiązać ten problem, po prostu obliczając, ile miejsca potrzebujemy na obramowanie i dopełnienie, i odejmując je od właściwości szerokości. Ale jest inny sposób: w tym przypadku możesz skorzystać z nieruchomości rozmiar pudełka:border-box
Pozycja (rozmiar pudełka: obramowanie; /**/ szerokość: 50%; dopełnienie: 20 pikseli; obramowanie: 1 pikseli; margines: 0 pikseli; )
Jeśli zastosujemy regułę box-sizing:border-box do bloku css, nie będziemy musieli obliczać wewnętrznych dopełnień i obramowania, ponieważ w tym przypadku zostaną one uwzględnione w wartości szerokości i będziemy mogli bezpiecznie ułożyć wewnętrzne wypełnienie i obramowanie według potrzeb, bez obawy, że klocki nie będą pasować. Ale nieruchomość nie pasuje do tej reguły margines. Dlatego też, jeśli chcesz dodać zewnętrzne wypełnienie pomiędzy elementami, oblicz, ile będziesz musiał odjąć od właściwości szerokości;
Uwaga: Jeśli ta właściwość nie działa dla Ciebie w przeglądarce Chrome, dodaj dla niej tę regułę osobno
Rozmiar pudełka Webkit:border-box;
Hack Clearfix to popularny sposób prawidłowego wyświetlania pływających bloków, pozwalający uniknąć używania tabel podczas układu. Potrzeba tego pojawia się, gdy zaczynasz zauważać, że wysokość nadrzędnego bloku DIV nie odpowiada zawartości dzieci. Przykładowo zaplanowałeś taką organizację bloków na swojej stronie ( dla przejrzystości blok nadrzędny jest podświetlony na żółto, a bloki podrzędne na zielono i czerwono):
Dlaczego napisałeś tę stronę HTML:
DIV w lewo
DIV Jasne
i odpowiedni plik stylu CSS:
Div-main ( margines: 0 automatyczny; dopełnienie: 20 pikseli; tło: #eeee33; szerokość: 320 pikseli; ) .div-left ( dopełnienie: 20 pikseli; tło: #339933; pływak: lewy; szerokość: 100 pikseli; ) .div-right ( dopełnienie: 20 pikseli; tło: #cc0033; pływak: prawy; szerokość: 100 pikseli; )
Jednak w rzeczywistości otrzymasz taki obraz:
Rodzic DIV nie przytula dzieci. Oznacza to, że nie rozciąga się w zależności od wysokości zawartych w nim bloków. I nie ma tu żadnego błędu, po prostu używają pływających bloków w układzie (właściwość FLOAT). Elementy pływające są wyjmowane z bieżącego przepływu i tworzą między sobą własny kontekst w kontekście nadrzędnym. W tym przypadku dla przepływu zewnętrznego nie będą one miały wymiarów. Aby rodzic DIV wziął pod uwagę ich rozmiar i rozciągnięcie na całej zawartości, potrzebna jest mała sztuczka.
Dwa sposoby rozciągania rozmiaru nadrzędnego DIV zgodnie z zawartością jego bloków
Poprzednio używałem takiego dodatkowego bloku przed tagiem zamykającym nadrzędnego DIV:
Następnie wygląd strony odpowiadał temu, co zaplanowano:
Drugi sposób na zmuszenie rodzicielskiego elementu div do rozciągnięcia do wysokości dziecka
Możesz stworzyć „samoczyszczący” pojemnik, używając pseudoklasy after:
Clear-fix:before, .clear-fix:after ( treść: " "; display: table; ) .clear-fix:after ( clear: oba; ) /* Kule dla osła (Internet Explorer 6 i 7) */ .clear-fix ( *zoom: 1; )
I dodaj odpowiednią klasę do bloku nadrzędnego:
Wygląd strony również będzie odpowiadał zamierzonemu układowi:
Obie metody działają dobrze. I pozwalają rozwiązać problem pływających bloków, tak że nadrzędny DIV rozciąga się na wysokość zawartości swoich dzieci.
Cześć, drogi Czytelniku.
To jedenasta lekcja nauki CSS. W tej lekcji przyjrzymy się tylko dwóm prostym, ale ważnym właściwościom. Te właściwości kontrolują wysokość i szerokość bloku.
Zanim zaczniesz studiować tę lekcję, przejrzyj poprzednie lekcje:
Teoria i praktyka
Na ostatniej lekcji przyjrzeliśmy się, czym jest model blokowy, marginesy wewnętrzne i zewnętrzne. W tym przypadku przyjrzymy się tylko dwóm właściwościom: wysokości i szerokości bloku. Wysokość w CSS jest ustawiana przez właściwość wysokość , a szerokość jest właściwością szerokość . Przyjrzyjmy się kodowi na prawdziwym przykładzie (weźmy przykład z ostatniej lekcji):
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <HTML > <głowa > <tytuł > dom</tytuł> <meta http-equiv = „Typ zawartości” content = „text/html; charset=utf-8” > <link rel = „arkusz stylów” type = „text/css” href = „style.css” > </głowa> <ciało > <id div = "treść" > <div klasa = "pierwszyPar" > <p> Aliquam malesuada tellus justo, eget lacinia nunc rutrum a. Phasellus dictum tempor eleifend. Nunc ut magna non purus fermentum egestas ac eu nulla.</p> <p> Fusce est tellus, Mattis quis nisl et, egestas posuere libero. Donec scelerisque tellus porttitor Massa dictum pulvinar.</p> </div> <klasa div = "drugiPar" > <p> Kras</p> <ul > <ja > przyprawa amet</li> <ja > aliquam volutpat</li> <ja > element interdum</li> </ul> </div> </div> </ciało> </html> |
Oraz w CSS dla każdego bloku
ustaw szerokość na 200 pikseli (px):
Zobaczymy jak to będzie wyglądać w przeglądarce.