CSS のサイズ プロパティは、要素の幅と高さのプロパティを指します。これは非常に単純ですが、習得する必要があるスキルです。 CSS には、要素の幅と高さを設定するための width、height、max-width、min-width、max-height、min-height などのいくつかの属性が用意されています。これらの要素の使い方は非常に簡単です。
1.身長
(1) 要素の高さを設定：height属性
高さ: プロパティは要素の高さを指定します。
① 適用範囲と適用対象：デフォルトコンテンツエリア
適用対象：すべての要素
置換されていないインライン要素、テーブル列、列グループ
適用範囲: デフォルトでは、この属性はコンテンツ領域の高さを決定します。
②適用範囲の変更：
box-sizing が border-box に設定されている場合、このプロパティは境界領域の高さを決定します。
③該当なし
インライン非置換要素: この属性は無視されます。
インライン要素: 高さを設定できません。
④ 属性値オーバーライド
min-height プロパティと max-height プロパティは高さをオーバーライドします。
(2) 高度な文法
高さ: 自動|長さ|%|継承;
実験的な属性値が含まれています。
/*キーワード値キーワード値*/height:auto;/*長さ値<長さ>値*/高さ:120px;高さ:10em;/*パーセント値<パーセント>値*/高さ:75%;/*グローバルキーワード値グローバル値*/高さ:継承;高さ:初期;高さ:設定解除;
2.幅
(1) 要素の幅を設定：width属性
①対象地域
コンテンツ領域: デフォルトでは、コンテンツ領域の幅を設定します。
含まれないもの: コンテンツ領域の外側にパディング、境界線、およびマージンを追加できます。
該当する領域を変更します。ただし、box-sizing が border-box に設定されている場合は、境界領域の幅が設定されます。
②該当要素
以下の要素を除くすべての要素
該当しない要素: 置換されていないインライン要素、テーブル行、および行グループ
インラインの非置換要素はこの属性を無視します。
③表紙
min-width プロパティと max-width プロパティは幅をオーバーライドする場合があります。
(2) widthの構文
幅: 自動 | 長さ |
実験的な属性値が含まれています。
/*長さの値<length>値*/width:300px;width:25em;/*パーセント値<percentage>値*/width:75%;/*キーワード値 Keywordvalues*/width:25emborder-box;width:75 %コンテンツボックス;width:max-content;width:min-content;width:available;width:fit-content;width:auto;/*グローバル値Globalvalues*/width:inherit;width:initial;width:unset;
3. 最大幅と最大高さ
max-width 属性と max-height 属性は、要素のコンテンツ領域の最大幅と最大高さをそれぞれ設定するために使用されます。 max-width プロパティと max-height プロパティが定義されている場合、実際の幅と高さのプロパティの実際の値は、実際のプロパティに関係なく、max-width プロパティと max-height プロパティの値以下になります。幅または高さのプロパティの値。 max-width プロパティと max-height プロパティのオプションの値は次のとおりです。
max-width 属性を例に挙げます: (max-height 属性の特性も同様です)
(1) max-width 属性の値が width 属性より小さい場合、width 属性の値は max-width 属性と同じ値に再定義されます。
(2) max-width 属性の値が width より大きい場合、max-width 属性は無視されます。
(3) max-width 属性の値が min-width 未満の場合、max-width 属性は無視されます。
4.最小幅と最小高さ
min-width 属性と min-height 属性は、幅または高さ属性の実際の値に関係なく、要素のコンテンツ領域の最小幅と最小高さを設定するために使用されます。 width 属性と height 属性実際の値は、min-width プロパティと min-height プロパティの値以上になります。 min-width プロパティと min-height プロパティのオプションの値は次のとおりです。
min-width 属性を例に挙げます: (min-height 属性にも同様の特性があります)
(1) min-width 属性の値が width より小さい場合、min-width 属性は無視されます。
(2) min-width 属性の値が width より大きい場合、min-width 属性の値は min-width 属性と同じ値に再定義されます。
(3) min-width 属性の値が max-width より大きい場合、max-width 属性は無視されます。