CSS的min-width和max-width怎麼設定

今天給大家介紹的是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>

案例如下：

<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的margin有什麼作用

CSS3怎麼做出圓角

CSS怎麼設定table邊框樣式