今天要跟大家介紹的是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中文網其他相關文章!