CSS height and width

Denna elements bredd är 100 procent.

CSS ställer in höjd och bredd

height och width egenskapen används för att ställa in elementets höjd och bredd.

height och width egenskaper inkluderar inte inre marginaler, kanter eller marginaler. De ställer in är höjd och bredd inom elementets inre marginaler, kanter och marginaler.

CSS höjd och bredd värden

height och width egenskapen kan ställas in till följande värden:

  • auto - Standard. Webbläsaren beräknar höjd och bredd.
  • length - Definiera höjd och bredd med längd (t.ex. px, cm osv.).
  • % - Definiera höjd och bredd som en procent av innehållsblocket.
  • initial - Ställ in höjd och bredd till standardvärdet.
  • inherit - Inheritera höjd och bredd från föräldervärdet.

CSS höjd och bredd exempel

Denna elementets höjd är 200 pixlar, bredd är 50％

Exempel

Ställ in höjd och bredd för <div>-elementet:

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

Prova själv

Denna elementets höjd är 100 pixlar, bredd är 500 pixlar.

Exempel

Ställ in höjd och bredd för ett annat <div>-element:

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

Prova själv

Observera:Kom ihåg attheight och width egenskapen inkluderar inte inre marginaler, kanter eller marginaler! De ställer in är höjd och bredd inom elementets inre marginaler, kanter och marginaler!

Ställ in max-width

max-width egenskapen används för att ställa in elementets maximala bredd.

kan specificeras med längdvärden (t.ex. px, cm osv.) eller med innehållsblockets procent (％) för att specificera max-width (maximal bredd), eller kan den ställas in till none (standardvärde. innebär att det inte finns någon maximal bredd).

När webbläsarfönstret är mindre än elementets bredd (500px) inträffar den tidigare <div> problem. Då lägger webbläsaren till en horisontell rullsträcka till sidan.

I detta fall använd max-width kan förbättra webbläsarens hantering av små fönster.

Tips:Dra och sudda webbläsarfönstret till en bredd mindre än 500px för att se skillnaden mellan två div!

Denna elementets höjd är 100 pixlar, maximal bredd är 500 pixlar.

Denna elementets höjd är 100 pixlar, maximal bredd är 500 pixlar.

Kommentar:max-width Värdet för egenskapen kommer att överskriva width（Bredd）.

Exempel

Denna <div>-elementets höjd är 100 pixlar, maximal bredd är 500 pixlar:

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

Prova själv

Mer exempel

Ställ in elementets höjd och bredd
Detta exempel visar hur man ställer in höjd och bredd för olika element.
Använd procent för att ställa in bilden的高度和宽度
Detta exempel visar hur man använder procentvärden för att ställa in bilden的高度和宽度.
Ställ in elementets minsta och maximala bredd
Detta exempel visar hur man använder pixelvärden för att ställa in elementets minsta och maximala bredd.
Ställa in elementets minsta och maximala höjd
Detta exempel visar hur du använder pixelvärden för att ställa in elementets minsta och maximala höjd.

Ställa in CSS storleksattribut

Egenskap Beskrivning
height Ställa in elementets höjd.
max-height Ställa in elementets maximala höjd.
max-width Ställa in elementets maximala bredd.
min-height Ställa in elementets minsta höjd.
min-width Ställa in elementets minsta bredd.
width Ställa in elementets bredd.