CSS 測定プロパティ: 高さ、幅、最大高さ/最大幅

CSS 測定プロパティ: 高さ、幅、最大高さ/最大幅、特定のコード例が必要です

Web デザインと開発における要素のサイズの制御はとても重要です。 CSS 測定プロパティを使用すると、要素の高さと幅、および要素のサイズの最大制限を正確に定義できます。この記事では、CSS で一般的に使用される測定プロパティである高さ、幅、最大高さ、最大幅を紹介し、具体的なコード例を示します。

1. 高さ (高さ) 属性は、要素の高さを定義するために使用されます。ピクセル (px)、パーセンテージ (%)、ビューポート単位 (vh)、またはその他のサポートされている単位を使用して指定できます。

サンプル コード:

.box {
  height: 200px; /* 使用像素设置高度 */
}

.container {
  height: 50%; /* 使用百分比设置高度 */
}

.header {
  height: 10vh; /* 使用视口单位设置高度 */
}

2. width (幅) 属性は、要素の幅を定義するために使用されます。高さのプロパティと同様に、ピクセル、パーセンテージ、ビューポート単位、またはその他のサポートされている単位を使用して指定できます。

サンプル コード:

.box {
  width: 300px; /* 使用像素设置宽度 */
}

.container {
  width: 70%; /* 使用百分比设置宽度 */
}

.sidebar {
  width: 20vw; /* 使用视口单位设置宽度 */
}

3. max-height (最大高さ) 属性は、要素の最大高さを制限するために使用されます。要素の内容が最大高さを超えると、スクロール バーが自動的に表示されます。

サンプル コード:

.box {
  max-height: 500px; /* 设置最大高度为500像素 */
}

.container {
  max-height: 80%; /* 设置最大高度为父元素高度的80% */
}

4. max-width (最大幅) 属性は、要素の最大幅を制限するために使用されます。 max-height 属性と同様に、コンテンツが最大幅を超えるとスクロール バーが自動的に表示されます。

サンプル コード:

.box {
  max-width: 800px; /* 设置最大宽度为800像素 */
}

.container {
  max-width: 90%; /* 设置最大宽度为父元素宽度的90% */
}

上記のコード例は、CSS 測定プロパティを使用して要素の高さと幅、および最大高さと最大幅を制御する方法を示しています。 。これらのプロパティは、さまざまなデバイス サイズに基づいて要素のサイズを自動的に変更するために、特にレスポンシブ デザインで非常に役立ちます。

概要:

• height 属性は、要素の高さを定義するために使用されます。
• width 属性は、要素の幅を定義するために使用されます。
• max-height 属性は、要素の最大高さを制限するために使用されます。
• max-width 属性は、要素の最大幅を制限するために使用されます。

これらの測定プロパティを適切に使用することで、Web ページ内の要素をより適切に制御およびレイアウトし、より優れたユーザー エクスペリエンスを実現できます。この記事のコード例が、読者がこれらのプロパティをよりよく理解し、適用するのに役立つことを願っています。

以上がCSS 測定プロパティ: 高さ、幅、最大高さ/最大幅の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。