今天要跟大家介紹的是CSS的min-width和max-width怎麼設置，很多朋友都疑惑最小寬度min-width與最大寬度max-width樣式有什麼作用？最小寬度最大寬度用於什麼地方呢？如何應用？那麼今天我們給大家一一解讀。
在DIV+CSS佈局中網頁中插入html img圖片
接下來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、css max-height
3、css width
4、css height
實際應用說明
最小寬度(min-width)與最大寬度(max -width)用來設定圖片最小最大寬度限制比較多。例如一個圖片為主列表，物件裡圖片大小不定時候，為了不想讓他太小不統一這個時候我們可以使用css最小寬度樣式。再如，一個盒子裡有文章有圖片混排的時候，有時圖片寬度不能確定，這個時候如果html img圖片寬度超出了p盒子寬度，可能圖片就會撐破p盒子造成圖片混亂。
延伸閱讀：
1、css設定圖片高度寬度
2、CSS解決圖片過大撐破DIV網頁
3、css img
4、html img標籤
min-width與max-width用法案例
我們設定2個p盒子，分別設定最大與最小寬度樣式、同時設定css邊框為1px css顏色為紅色的實線盒子、css高度為100px。第一和第二個盒子CSS命名分別為css-min-width、css-max-width；第一個盒子內圖片原圖片大小為寬為165px 高度60px；第二個盒子內圖片原圖片大小為寬度為375px 高度65px。
案例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的min-width和max-width怎麼設定就說這麼多，需要的朋友可以保存一下，也請大家持續關注本站的其他更新。
推薦閱讀：
以上是CSS的min-width和max-width怎麼設定的詳細內容。更多資訊請關注PHP中文網其他相關文章！
