Height at Width ng CSS

Ang lapad ng elemento na ito ay 100 porsiyento.

CSS itakda ang taas at lapad

height at width Ang katangian ay ginagamit upang itakda ang taas at lapad ng elemento.

Ang katangian ng height at width ay hindi kasama ang padding, border o margin. Sinasadya nila ang lapad/taas ng kalat ng padding, border at margin ng elemento!

Halaga ng CSS taas at lapad

height at width Ang katangian ay maaaring itakda sa mga sumusunod na halaga:

  • auto - Default. Ang browser ang magkalkula ng taas at lapad.
  • length - Itakda ang taas at lapad sa halaga ng haba (halimbawa, px, cm atbp).
  • % - Itakda ang taas at lapad sa porsyento ng bloke na naglalaman.
  • initial - Itakda ang taas at lapad sa default na halaga.
  • inherit - Makuha ang taas at lapad mula sa magulang.

Halimbawa ng CSS taas at lapad

Ang taas ng elemento na ito ay 200 pixel, ang lapad ay 50%.

Halimbawa

Itakda ang taas at lapad ng <div> elemento:

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

Subukan nang personal

Ang taas ng elemento na ito ay 100 pixel, ang lapad ay 500 pixel.

Halimbawa

Itakda ang taas at lapad ng isa pang <div> elemento:

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

Subukan nang personal

Pansin:Tandaan mo po:height at width Ang katangian ay hindi kasama ang padding, border o margin! Sinasadya nila ang lapad/taas ng kalat ng padding, border at margin ng elemento!

Itakda ang max-width

max-width Ang katangian ay ginagamit upang itakda ang pinakamalaking lapad ng elemento.

Maaaring gamitin ang halaga ng haba (halimbawa, px, cm atbp) o ang porsyento ng bloke na naglalaman (％) upang itakda ang max-width (pinakamalaking lapad), o maaring itakda itong none (walang pinakamalaking lapad sa default).

Kapag ang window ng browser ay mas maliit kaysa sa lapad ng elemento (500px), mangyayari ang nasabing <div> problem. Pagkatapos, magdagdag ang browser ng horizontal scrollbar sa pahina.

Sa kasong ito, gamitin ang max-width Maaaring mapabuti ang paghawak ng browser sa maliit na window.

Mga Tagubilin:Ihila ang window ng browser sa kasalukuyang lapad na mas maliit sa 500px upang makita ang pagkakaiba sa pagitan ng dalawang div!

Ang taas ng elemento na ito ay 100 pixel, ang pinakamalaking lapad ay 500 pixel.

Ang taas ng elemento na ito ay 100 pixel, ang pinakamalaking lapad ay 500 pixel.

Paliwanag:max-width Ang halaga ng mga katangian ay papalitan width（lapad）。

Halimbawa

Ang taas ng <div> na ito ay 100 pixel, ang pinakamalaking lapad ay 500 pixel:

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

Subukan nang personal

Maraming halimbawa

Itakda ang taas at lapad ng elemento
Ito ay nagpapakita kung paano itakda ang taas at lapad ng iba't ibang elemento.
Gamitin ang porsyento upang itakda ang taas at lapad ng imahe
Ito ay nagpapakita kung paano gamitin ang porsyento na halaga upang itakda ang taas at lapad ng imahe.
Itakda ang pinakamaliit at pinakamalaking lapad ng elemento
Ito ay nagpapakita kung paano gamitin ang halaga ng pixel upang itakda ang pinakamaliit at pinakamalaking lapad ng elemento.
Set the minimum height and maximum height of the element
This example demonstrates how to set the minimum height and maximum height of an element using pixel values.

Set CSS Dimension Attribute

Attribute Description
height Set the height of the element.
max-height Set the maximum height of the element.
max-width Set the maximum width of the element.
min-height Set the minimum height of the element.
min-width Set the minimum width of the element.
width Set the width of the element.