HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Samouczek CSS

Strona główna CSS Wprowadzenie do CSS Składnia CSS Selektory CSS Instrukcje CSS Komentarze CSS Kolory CSS
Zabarwienie RGB KLĄTWA HSL
Tła CSS
Kolor tła Zdjęcie w tle powtarzanie tła Załącznik w tle Skrót tła
Granice CSS
Granice Szerokość granicy Kolor ramki Boki obramowania Skrót graniczny Rounded Borders
Marginesy CSS
Margins Margin Collapse
Dopełnienie CSS Wysokość/szerokość CSS Model skrzynki CSS Zarys CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
Tekst CSS
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
Czcionki CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
Ikony CSS Linki CSS Listy CSS Tabele CSS
Table Borders Table Size Table Alignment Table Style Table Responsive
Wyświetlanie CSS Maks. szerokość CSS Pozycja CSS CSS Z-indeks Przepełnienie CSS zmiennoprzecinkowy CSS
Float Clear Float Examples
Wbudowany blok CSS Wyrównanie CSS Kombinatory CSS CSS Pseudo-klasa Pseudoelement CSS Krycie CSS Pasek nawigacyjny CSS
Navbar Vertical Navbar Horizontal Navbar
Listy rozwijane CSS Galeria obrazów CSS Sprite obrazu CSS Selektory atrybutów CSS Formularze CSS Liczniki CSS Układ strony internetowej CSS Jednostki CSS Specyfika CSS CSS !ważne Funkcje matematyczne CSS

Zaawansowane CSS

Zaokrąglone rogi CSS Obrazy obramowania CSS Tła CSS Kolory CSS Słowa kluczowe w kolorze CSS Gradienty CSS
Linear Gradients Radial Gradients Conic Gradients
Cienie CSS
Shadow Effects Box Shadow
Efekty tekstowe CSS Czcionki internetowe CSS Przekształcenia CSS 2D Przekształcenia CSS 3D Przejścia CSS Animacje CSS Etykietki CSS Obrazy w stylu CSS Odbicie obrazu CSS Dopasowanie obiektu CSS Pozycja obiektu CSS Maskowanie CSS Przyciski CSS Paginacja CSS Wiele kolumn CSS Interfejs użytkownika CSS Zmienne CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Rozmiar pola CSS Zapytania o media CSS Przykłady CSS MQ Flexbox CSS
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS Responsywne

Wprowadzenie do RWD Okienko RWD Widok siatki RWD Zapytania dotyczące mediów RWD Obrazy RWD Filmy RWD Ramy RWD Szablony RWD

Siatka CSS

Wprowadzenie do siatki Pojemnik na siatkę Element siatki

CSS SASS

Samouczek SASS

Przykłady CSS

Szablony CSS Przykłady CSS quiz css Ćwiczenia CSS Certyfikat CSS

Odniesienia CSS

Dokumentacja CSS Selektory CSS Funkcje CSS Dźwięk referencyjny CSS Bezpieczne czcionki internetowe CSS Animowalny CSS Jednostki CSS Konwerter CSS PX-EM Kolory CSS Wartości kolorów CSS Domyślne wartości CSS Obsługa przeglądarki CSS

Wysokość i szerokość CSS

❮ Poprzedni Następny ❯

CSS heighti widthwłaściwości służą do ustawiania wysokości i szerokości elementu.

Właściwość CSS max-widthsłuży do ustawienia maksymalnej szerokości elementu.

Ten element ma wysokość 50 pikseli i szerokość 100%.

CSS Ustawienie wysokości i szerokości

Właściwości heighti widthsłużą do ustawiania wysokości i szerokości elementu.

Właściwości wysokości i szerokości nie obejmują dopełnienia, obramowań ani marginesów. Ustawia wysokość/szerokość obszaru wewnątrz dopełnienia, obramowania i marginesu elementu.

CSS wysokość i szerokość Wartości

Właściwości heighti widthmogą mieć następujące wartości:

  • auto- To jest domyślne. Przeglądarka oblicza wysokość i szerokość
  • length- Określa wysokość/szerokość w px, cm itp.
  • %- Określa wysokość/szerokość w procentach bloku zawierającego
  • initial- Ustawia wysokość/szerokość na wartość domyślną
  • inherit- Wysokość/szerokość zostanie odziedziczona z wartości nadrzędnej

Przykłady wysokości i szerokości CSS

Ten element ma wysokość 200 pikseli i szerokość 50%

Przykład

Ustaw wysokość i szerokość elementu <div>:

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

Ten element ma wysokość 100 pikseli i szerokość 500 pikseli.

Przykład

Ustaw wysokość i szerokość innego elementu <div>:

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

Uwaga: Pamiętaj, że właściwości heighti widthnie obejmują dopełnienia, obramowań ani marginesów! Ustawiają wysokość/szerokość obszaru wewnątrz dopełnienia, obramowania i marginesu elementu!

Ustawienie maksymalnej szerokości

Właściwość max-widthsłuży do ustawienia maksymalnej szerokości elementu.

Można max-widthokreślić w wartościach długości , takich jak px, cm itp., lub w procentach (%) bloku zawierającego, lub ustawić na brak (jest to wartość domyślna. Oznacza, że ​​nie ma maksymalnej szerokości).

Problem z <div>powyższym występuje, gdy okno przeglądarki jest mniejsze niż szerokość elementu (500px). Przeglądarka następnie dodaje do strony poziomy pasek przewijania.

Użycie max-widthzamiast tego w tej sytuacji poprawi obsługę małych okien przez przeglądarkę.

Wskazówka: przeciągnij okno przeglądarki do szerokości mniejszej niż 500 pikseli, aby zobaczyć różnicę między dwoma elementami div!

Ten element ma wysokość 100 pikseli i maksymalną szerokość 500 pikseli.

Uwaga: Jeśli z jakiegoś powodu używasz zarówno widthwłaściwości, jak i max-widthwłaściwości tego samego elementu, a wartość widthwłaściwości jest większa niż max-widthwłaściwość; właściwość max-widthzostanie użyta (i widthzostanie zignorowana).

Przykład

Ten element <div> ma wysokość 100 pikseli i maksymalną szerokość 500 pikseli: 

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

Spróbuj sam - przykłady


Ten przykład pokazuje, jak ustawić wysokość i szerokość różnych elementów.


Ten przykład pokazuje, jak ustawić wysokość i szerokość obrazu przy użyciu wartości procentowej.


Ten przykład pokazuje, jak ustawić minimalną i maksymalną szerokość elementu za pomocą wartości piksela.


Ten przykład pokazuje, jak ustawić minimalną wysokość i maksymalną wysokość elementu za pomocą wartości w pikselach.

Sprawdź się za pomocą ćwiczeń

Ćwiczenie:

Ustaw wysokość elementu <h1> na „100px”.

<style>
h1 {
  : 100px;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

Wszystkie właściwości wymiarów CSS

Property Description
height Sets the height of an element
max-height Sets the maximum height of an element
max-width Sets the maximum width of an element
min-height Sets the minimum height of an element
min-width Sets the minimum width of an element
width Sets the width of an element

❮ Poprzedni Następny ❯