CSSサイズ

CSSサイズ属性は、要素の高さと幅を制御するために使用されます。

CSSサイズ属性

このCSSは、width、height、maxなどの属性を提供しています。-widthとmax-heightなど、あなたのボックス(ボックス)のサイズを調整することができます。次のセクションでは、これらの属性を使用してより良いウェブレイアウトを作成する方法について説明します。

幅(Width)と高さ(Height)属性

widthとheight属性は、要素の内容エリアの幅と高さを定義します。この幅と高さには、フィルル、ボーダーやマージンは含まれません。参照してください、CSSフレームワーク 　 有効な幅と高さを計算する方法を理解するために。

widthとheight属性は、長さ値（px、pt、emなど）を取ることができます。一パーセンテージ、またはキーワードauto。負の長さ値は許可されません。

div　{
　　　　width:　300px;
　　　　height:　200px;
}

このスタイルルールは300ピクセルの固定幅と200ピクセルの高さが割り当てられます。<div>要素。

max-height 最大高さ属性

max-height属性は、ボックスの最大内容の高さを指定することができます。この最大高さには、フィルル、ボーダーやマージンは含まれません。

max-height属性をより大きな値に設定しても、適用された要素は指定された値より高くならない。例えば、heightを200pxに設定し、max-heightが設定された値100pxの場合、要素の実際の高さは100px。

div　{
　　　　height:　200px;
　　　　max-height:　100px;
}

max-height属性は通常、このmin-height属性を組み合わせて使用することで、要素の高さの範囲に関する情報を得ることができます。

min-height 最小高さ属性

min-height属性は、ブロックの最小内容の高さを指定することができます。この最小高さには、フィルル、ボーダーやマージンは含まれません。

min-heightが適用された要素は、指定された最小高さより小さくならないようにします。例えば、heightが200px、min-heightが設定された値300px、ならば要素の実際の高さは300px。

div　{
　　　　height:　200px;
　　　　min-height:　300px;
}

min-height属性は通常、このmax-height属性を組み合わせて使用して、要素の高さ範囲を制御します。

max-width 最大幅属性

max-width属性は、ブロックの最大内容幅を指定するために使用できます。この最大幅には、パディング、ボーダーやマージンは含まれません。

max-width属性は、width属性がもっと大きな値に設定された場合でも、aの要素が指定された値より広くならないようにします。例えば、widthが300px、max-widthが設定された値200px、ならば要素の実際の幅は200px。

div　{
　　　　width:　300px;
　　　　max-width:　200px;
}

max-width属性は通常、このmin-width属性を組み合わせて使用して、要素の幅範囲に関する情報を生成します。

min-width 最小幅属性

min-width属性は、ブロックの最小内容幅を指定するために使用できます。この最小幅には、パディング、ボーダーやマージンは含まれません。

min-widthが適用された要素は、指定された最小幅より狭くならないようにします。例えば、widthが300px、min-widthが設定された値400px、ならば要素の実際の幅は400px。

div　{
　　　　width:　300px;
　　　　min-width:　400px;
}

min-width属性は通常、このmax-width属性を組み合わせて使用して、要素の幅範囲に関する情報を生成します。