Jak utworzyć układ o stałej szerokości za pomocą CSS

Jak utworzyć układ o stałej szerokości za pomocą CSS
„„Naprawiono układ”Jest również określany jako układ statyczny i jest mierzony w„piksele". Ten rodzaj układu powoduje, że szerokość elementu ustalona. Ponadto ustalony układ jest programowany w sposób, który bez względu na rozmiar ekranu lub rozdzielczość, szerokość elementu się nie zmieni. Jest to korzystne dla użytkowników, którzy chcą przedstawić spójne zdjęcia korporacyjne wszystkim odwiedzającym.

Ten blog pokaże procedurę tworzenia układu o stałej szerokości z CSS.

Jak utworzyć układ o stałej szerokości za pomocą CSS?

W celu utworzenia układu o stałej szerokości, po pierwsze, wewnątrz elementu ciała HTML, dodaj element DIV o nazwie klasy „stałą szerokość". Następnie dodaj

I

elementy, aby dodać trochę treści.

Html


Witamy w Linuxhint


Linuxhint to najlepsza witryna samouczka online. Jeśli chcesz nauczyć się programowania bash, jesteś we właściwym miejscu.


Struktura znaczników została zakończona i można ją zobaczyć na obrazie poniżej:

Teraz zastosujmy właściwości stylizacji CSS do powyższych elementów HTML.

Styl wszystkie elementy

*
margines: 0px;
Wyściółka: 0px;

Jak wiemy, układy o stałej szerokości używają dokładnej szerokości pikseli, więc właściwość szerokości zostanie ustawiona w „piksele". Określa, że ​​szerokość elementu pozostanie taka sama jak w każdym rozmiarze ekranu.

Styl Div o stałej szerokości

.stałą szerokość
kolor tła: RGB (238, 238, 238);
Margines: Auto;
maksymalna szerokość: 400px;
Wysokość: 100 VH;

„„.stałą szerokość”Odnosi się do klasy DIV Class o stałej szerokości. Następujące właściwości są stosowane do DIV o stałej szerokości:

  • "kolor tła”Określa kolor tła elementu.
  • "margines”Określa przestrzeń wokół elementu.
  • "maksymalna szerokość”Ustawia maksymalną szerokość elementu.
  • "wysokość„Właściwość ustawia wysokość elementu.

Wyjście wspomnianego kodu jest wyświetlane poniżej:

Można zaobserwować, że szerokość Div stałej szerokości jest ustalona. Nie zmienia się w zależności od rozmiarów ekranu.

Tak powstaje układ o stałej szerokości w CSS.

Wniosek

Układy o stałej szerokości ustawiają szerokość stałego elementu. Pozostają takie same w każdym rozmiarze ekranu. Jeśli szerokość okna przeglądarki jest mniejsza niż szerokość układu, pojawi się poziomy pasek przewijania, a szerokość elementu nie zmieni się. Aby ustalić ustalony układ, szerokość elementu musi być określona w „piksele". Za pomocą praktycznego przykładu ten blog pokazał, jak stworzyć układ o stałej szerokości w CSS.