Właściwości CSS Dimension
Właściwości Wymiar CSS pozwala kontrolować wysokość i szerokość elementu.
Element ten ma szerokość od 100%.
Ustawienie wysokości i szerokości
Na height i width właściwości są używane, aby ustawić wysokość i szerokość elementu.
height i width można ustawić na auto (jest to ustawienie domyślne. Oznacza to, że przeglądarka oblicza wysokość i szerokość), albo być określona w wartości długości, jak px, cm , etc., lub w procentach (%) bloku zawierającego ,
Uwaga: height i width właściwości nie obejmują wyściółkę, granic, ani marży; tak ustawić wysokość / szerokość obszaru wewnątrz padding, border, a margines elementu!
Poniższy przykład pokazuje <div> element o wysokości 100 pikseli i szerokości 500 pikseli:
Ustawienie max-width
max-width właściwość służy do ustawienia maksymalnej szerokości elementu.
max-width może być określona w wartości długości, jak px, cm itp, lub w procentach (%) bloku zawierającego lub ustawiona na none (jest to ustawienie domyślne. Oznacza, że nie ma maksymalną szerokość).
Problem z <div> powyżej występuje, gdy okno przeglądarki jest mniejsza od szerokości elementu (500px). Przeglądarka następnie dodaje poziomy pasek przewijania do strony.
Korzystanie max-width zamiast tego, w tej sytuacji, usprawni obsługę przeglądarki, z małymi oknami.
Wskazówka: przeciągnij okno przeglądarki, aby mniejszy niż 500px szerokości, aby zobaczyć różnicę między dwoma div!
Uwaga: wartość max-width nadpisania właściwości width .
Poniższy przykład pokazuje <div> element o wysokości 100 pikseli i maksymalnej szerokości 500 pikseli:
Spróbuj sam - przykłady
Ustawia wysokość i szerokość elementów
Ten przykład pokazuje, jak ustawić wysokość i szerokość poszczególnych elementów.
Ustawia wysokość i szerokość obrazu przy użyciu procent
Ten przykład pokazuje, jak ustawić wysokość i szerokość obrazu przez zastosowanie wartości procentowej.
Ustaw min-width i max-width elementu
Ten przykład pokazuje jak ustawić minimalną szerokość i maksymalną szerokość elementu przy użyciu wartości piksela.
Zestaw min-height i max-height elementu
Ten przykład pokazuje, jak ustawić wysokość minimalną i maksymalną wysokość elementu przy użyciu wartości piksela.
Sprawdź się z ćwiczeń!
Wszystkie właściwości CSS Dimension
| Nieruchomość | Opis |
|---|---|
| height | Ustawia wysokość elementu |
| max-height | Ustawia maksymalną wysokość elementu |
| max-width | Ustawia maksymalną szerokość elementu |
| min-height | Ustawia minimalną wysokość elementu |
| min-width | Ustawia minimalną szerokość elementu |
| width | Ustawia szerokość elementu |