CSS の最小幅と最大幅を設定する方法

今日は、CSS の min-width と max-width を設定する方法を紹介します。最小幅 min-width スタイルと最大幅 max-width スタイルが何をするのか疑問に思っている人も多いでしょう。最小幅と最大幅はどこで使用されますか?適用する方法？そこで今日は一つずつ解説していきます。

DIV+CSS レイアウトの Web ページに HTML 画像イメージを挿入します

次に、DIVCSS5 では、誰もが min-width と max-width の基本的な構文構造をマスターし、ケースを通して使用法を学ぶことができます。

min-width max-width ディレクトリ

CSS 基本構文構造

min-width と max-width の後には特定の数値 + HTML ユニットが続きます

min-width:50px 最小幅は 50px です

max- width:50px 最大幅は 50px

CSS スタイル構造

p{min-width:50px}

p{max-width:50px}

1. css

min-height

2. -高さ

3、CSS 幅

4、CSS 高さ

実践的な応用手順

最小幅 (min-width) と最大幅 (max-width) は、画像の最小幅と最大幅の制限を設定するためによく使用されます。 。たとえば、画像がメインリストとして使用され、オブジェクト内の画像のサイズが可変である場合、サイズが小さくなりすぎて一貫性がなくなるのを避けるために、CSS の最小幅スタイルを使用できます。別の例として、ボックス内に記事と画像が混在している場合、画像の幅が決まらない場合があります。このとき、html img の画像の幅が p ボックスの幅を超えると、画像がバーストする可能性があります。 p ボックスを使用すると混乱が生じます。

詳細な説明:

1. 画像の高さと幅を設定するための CSS

2. 画像が大きすぎて DIV Web ページが壊れるという問題を解決する CSS

3. html

img タグ

min-width と max-Width の使用例 2 つの P ボックスを設定し、それぞれ最大幅と最小幅のスタイルを設定し、CSS 境界線を 1px、CSS カラーを赤い実線ボックス、CSS 高さを 1px に設定します。 100ピクセル。 1 番目と 2 番目のボックスの CSS 名はそれぞれ css-min-width と css-max-width です。最初のボックスの画像の元の画像サイズは幅 165 ピクセル、高さ 60 ピクセルです。 2 番目のボックスは幅 375 ピクセル、高さ 65 ピクセルです。

ケースCSSコード

.css-min-width,.css-max-width{ height:100px; border:1px solid #F00} 
.css-min-width img{ min-width:200px} 
.css-max-width{margin-top:10px} 
/* css注释：margin-top设置css-max-width对象上间距为10px */ 
.css-max-width img{ max-width:200px; }

CSS+DIVケースHTMLソースコードスニペット

<p>原图片大小：<br /> 
<br /> 
<img src="http://www.php.cn" /><br /><br /> 
宽为165px 高度60px<br /> 
<br /> 
<img src="http://www.php.cn" /><br /><br />

幅は375px、高さは65pxです

ケースは次のとおりです:

<p class="css-min-width"> 
    <img src="http://www.PHP.com/img201301/PHP-logo-2013.gif" /> 
</p> 
<p class="css-max-width"> 
    <img src="http://www.PHP.com/img201301/topad1.gif" />

最小値はどうですか?今日の CSS の -width と max-width の設定はこれですべてです。必要な友達は保存してください。このサイトの他の更新にも引き続き注目してください。

推奨読書:

CSS マージンの役割とは何ですか?

以上がCSS の最小幅と最大幅を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。