Czasami projektowanie stron internetowych, które dobrze wyglądają na różnych urządzeniach. HTML zapewnia kilka właściwości do ustawienia rozmiaru i pozycji elementu, aby rozwiązać pewne responsywne problemy. Najczęstsze właściwości to „szerokość" I "wysokość". Właściwości te służą do określenia rozmiaru elementu. Ponadto możemy wykorzystać właściwości maksymalnej, maksymalnej szerokości, minimum i szerokości min, aby rozwiązać problemy związane z reaktywnością.

Ten post obejmie:

• Jak dostosować maksymalną wysokość elementu za pomocą CSS?
• Jak dostosować minimalną wysokość elementu za pomocą CSS?
• Jak dostosować minimalną szerokość elementu za pomocą CSS?
• Jak dostosować maksymalną szerokość elementu za pomocą CSS?

Warunek: Utwórz plik HTML

Najpierw utwórz plik HTML, wykonując wyżej wymienione kroki:

• Dodać "„Element z nazwą klasy„główny".
• Wewnątrz dodaj dwa „„Elementy o nazwie klasy”Układ-img" I "Condytor układu”Odpowiednio.
• Element „” z klasą „Layout-Img” zawiera „„Element związany z„src”Atrybut, który określa adres URL obrazu i„szerokość”Atrybut definiowania szerokości elementu.
• „” Element z „Condytor układu”Zawiera„

  " I "

  „Elementy nagłówka i akapitu.

Oto kod HTML:

Uczyć się z nami

Właściwość „szerokości” jest wykorzystywana do ustawiania szerokości elementu.
Właściwość „wysokości” jest wykorzystywana do ustawiania wysokości elementu.

W nadchodzącej sekcji nauczymy się określić wysokość i szerokość elementów HTML za pomocą CSS.

Stylowa klasa „główna”

Najpierw uzyskaj dostęp do głównego „”Pojemnik za pomocą atrybutu klasowego„.główny". Następnie zastosuj następujące właściwości CSS:

.główny
szerokość: 300px;
Wysokość: 360px;
Margines: Auto;
Rozmiar czcionki: 20px;
granica: 1px Solid RGB (237, 234, 234);
Radiusz graniczny: 20px;
kolor tła: RGB (235, 235, 235);

Oto właściwości stylizacji CSS, które są stosowane na głównej div:

• "szerokość”Określa szerokość elementu.
• "wysokość”Ustawia wysokość elementu.
• "margines”Dodaje przestrzenie po każdej stronie elementu.
• "rozmiar czcionki”Dostosowuje rozmiar czcionki.
• "granica„Nieruchomość jest stosowana do ustawienia granicy wokół elementu. Posiada wartości szerokości granicy, stylu i koloru.
• "Radiusz graniczny„Właściwość sprawia, że ​​krawędzie elementu jest okrągłe.
• "kolor tła”Stosuje kolor tła elementu.

Wyjście

Stylowa klasa „Containta”

.układ-układ
Wyściółka: 0 10px;
kolor tła: RGB (233, 179, 112);

„” Klasy „Condytor układu”Jest stylizowany„wyściółka„Właściwość, która dodaje przestrzeń wokół treści elementu.

Wyjście

Jak dostosować maksymalną wysokość elementu w CSS?

„„maksymalna wysokość”Właściwość określa maksymalną wysokość elementu. Treść będzie się przepełniać, jeśli przekroczy maksymalną wysokość.

W CSS określ maksymalną wysokość elementu „” o „Condytor układu”Klasa, określając„maksymalna wysokość" nieruchomość:

Max-Height: 100px;

Wyjście

Jak dostosować minimalną wysokość elementu w CSS?

„„Min-Height”Właściwość dostosowuje minimalną wysokość elementu. Zostanie zastosowany, jeśli zawartość elementu jest mniejsza niż minimalna wysokość. Nie ma to wpływu, jeśli treść przekroczy minę.

Dodaj "Min-Height„Własność do klasy”Condytor układu”Aby określić minimalną wysokość elementu:

Min-Height: 100px;

Wyjście

Jak dostosować minimalną szerokość elementu w CSS?

CSS „Min szerokość„Właściwość określa minimalną szerokość elementu. „„Min szerokość”Jest stosowany do elementu, jeśli zawartość jest mniejsza niż minimalna szerokość elementu. Nie pokaże żadnego efektu, jeśli zawartość przekroczy minimalną szerokość.

Dodaj "Min szerokość„Własność klasy„ Con-content ”, aby zobaczyć, jak to wpływa:

MIN-PIDTH: 310px;

Wyjście

Jak dostosować maksymalną szerokość elementu w CSS?

CSS „maksymalna szerokość„Własność jest wykorzystywana do określenia maksymalnej szerokości elementu. Możemy powiedzieć, że ma stałą szerokość elementu. Jeśli treść przekroczy szerokość elementu, jego zawartość będzie się przepełniać. W rezultacie wysokość zmieni się automatycznie.

Dodaj "maksymalna szerokość„Własność o wartości”230px„Aby zobaczyć jego efekt:

maksymalna szerokość: 230px;

Wyjście

Nauczyliśmy się, jak określić właściwości szerokości i wysokości elementów za pomocą CSS.

Wniosek

Aby ustawić wysokość i szerokość elementu HTML, CSS ”wysokość" I "szerokość„Wykorzystane są właściwości. Te CSS "Min szerokość”,„maksymalna szerokość”,„Min-Height", I "maksymalna wysokość„Właściwości są wykorzystywane do ograniczenia szerokości i wysokości elementu w stosunku do elementu nadrzędnego. W tym artykule pokazano metody ograniczania rozmiaru elementu za pomocą właściwości CSS.