Mierzenie wymiarów

3.1 Właściwość width

Wymiary bloków w CSS odgrywają ważną rolę w tworzeniu layoutów stron internetowych. Określają, jak elementy będą się wyświetlać i współpracować z otaczającymi je elementami. Teraz przyjrzymy się właściwościom width, height, max-width i max-height, które pozwalają ustalać wymiary bloków.

Właściwość width ustala szerokość elementu. Może być ustawiona w różnych jednostkach miary, takich jak piksele (px), procenty (%), em, rem i inne.

Wartości

• Automatyczna wartość: auto — szerokość elementu jest określana automatycznie na podstawie jego zawartości i otoczenia
• Absolutne jednostki: px, pt, cm, mm, in i inne
• Relatywne jednostki: %, em, rem, vw, vh i inne

Przykład użycia:

    
      .box {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 10px;
      }

      .box-fixed {
        width: 200px;
      }

      .box-percentage {
        width: 50%;
      }
    
  

    
      <div class="box box-fixed">Stała szerokość (200px)</div>
      <div class="box box-percentage">Szerokość w procentach (50%)</div>
    
  

Wyjaśnienie kodu:

• .box-fixed: element o stałej szerokości 200 pikseli
• .box-percentage: element o szerokości 50% od elementu nadrzędnego

3.2 Właściwość height

Właściwość height ustala wysokość elementu. Może być również ustawiona w różnych jednostkach miary.

Wartości:

• Automatyczna wartość: auto — wysokość elementu jest określana automatycznie na podstawie jego zawartości i otoczenia
• Absolutne jednostki: px, pt, cm, mm, in i inne
• Relatywne jednostki: %, em, rem, vh, vw i inne

Przykład użycia:

    
      .container {
        height: 300px;
      }

      .box {
        color: white;
        padding: 10px;
      }

      .box-fixed-height {
        height: 150px;
        background-color: #2ecc71;
      }

      .box-percentage-height {
        height: 50%;
        background-color: #7a5c71;
      }
    
  

    
      <div class="container">
        <div class="box box-fixed-height">Stała wysokość (150px)</div>
        <div class="box box-percentage-height">Wysokość w procentach (50%)</div>
      </div>
    
  

Wyjaśnienie kodu:

• .box-fixed-height: element o stałej wysokości 150 pikseli
• .box-percentage-height: element o wysokości 50% od elementu nadrzędnego

3.3 Właściwość max-width

Właściwość max-width ustala maksymalną szerokość elementu. To ograniczenie, które zapobiega rozszerzaniu się elementu poza określoną wartość.

Wartości:

• Brak ograniczeń: none — element może się rozszerzać do dowolnej szerokości
• Absolutne jednostki: px, pt, cm, mm, in i inne
• Relatywne jednostki: %, em, rem, vh, vw i inne

Przykład użycia:

    
      .box {
        background-color: #e74c3c;
        color: white;
        padding: 10px;
        margin: 10px;
      }

      .box-max-width {
        width: 100%;
        max-width: 300px;
      }
    
  

    
      <div class="box">Szerokość 100% (domyślnie)</div>
      <div class="box box-max-width">Maksymalna szerokość 300px</div>
    
  

Wyjaśnienie kodu:

• .box-max-width: element o maksymalnej szerokości 300 pikseli. Zawartość nie pozwoli na rozszerzenie elementu poza 300 pikseli

3.4 Właściwość max-height

Właściwość max-height ustala maksymalną wysokość elementu. To ograniczenie, które zapobiega zwiększaniu elementu poza określoną wartość.

Wartości:

• Brak ograniczeń: none — element może się rozszerzać do dowolnej szerokości
• Absolutne jednostki: px, pt, cm, mm, in i inne
• Relatywne jednostki: %, em, rem, vh, vw i inne

Przykład użycia:

    
      .box {
        background-color: #9b59b6;
        color: white;
        padding: 10px;
        max-height: 35px;
        overflow: auto;
      }
    
  

    
      <div class="box">
        <p>Dodatkowy tekst dla demonstrujący przewijanie.<br>Dodatkowy tekst dla demonstrujący przewijanie.<br>Dodatkowy tekst dla demonstrujący przewijanie.</p>
      </div>
    
  

Wyjaśnienie kodu:

• .box-max-height: element o maksymalnej wysokości 100 pikseli. Jeśli zawartość elementu przekracza tę wartość, będzie przewijana dzięki właściwości overflow: auto;