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="/static/imghwm/default1.png"  data-src="http://www.php.cn"  class="lazy"   / alt="CSS的min-width和max-width怎麼設定" ><br /><br /> 
宽为165px 高度60px<br /> 
<br /> 
<img  src="/static/imghwm/default1.png"  data-src="http://www.php.cn"  class="lazy"   / alt="CSS的min-width和max-width怎麼設定" ><br /><br />

寬度為375px 高度65px 

#

 

案例如下： 

<p class="css-min-width"> 
    <img  src="/static/imghwm/default1.png"  data-src="http://www.PHP.com/img201301/PHP-logo-2013.gif"  class="lazy"   / alt="CSS的min-width和max-width怎麼設定" > 
</p> 
<p class="css-max-width"> 
    <img  src="/static/imghwm/default1.png"  data-src="http://www.PHP.com/img201301/topad1.gif"  class="lazy"   / alt="CSS的min-width和max-width怎麼設定" >

今天CSS的min-width和max-width怎麼設定就說這麼多，需要的朋友可以保存一下，也請大家持續關注本站的其他更新。

推薦閱讀：

CSS的margin有什麼作用

CSS3怎麼做出圓角

#CSS怎麼設定table邊框樣式

以上是CSS的min-width和max-width怎麼設定的詳細內容。更多資訊請關注PHP中文網其他相關文章！