<form id="ddzdh"><form id="ddzdh"><nobr id="ddzdh"></nobr></form></form>

        <address id="ddzdh"><nobr id="ddzdh"></nobr></address>

              歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
              您的位置:DIVCSS5首頁 > DIV+CSS基礎 >

              CSS min-width最小寬度與CSS max-width最大寬度教程篇

              最小寬度min-width與最大寬度max-width樣式有什么作用?最小寬度最大寬度用于什么地方呢?如何應用?

              DIV+CSS布局中網頁中插入html img圖片

              接下來DIVCSS5讓大家學會掌握min-width與max-width基礎語法結構以及通過案例學習用法。

              min-width max-width目錄
              1. 基礎語法結構
              2. 實際應用地方
              3. 用法案例
              4. 總結

              一、CSS基礎語法結構   -   TOP

              min-width與max-width后面均跟具體數字+html單位

              min-width:50px 最小寬度為50px
              max-width:50px 最大寬度為50px

              CSS樣式結構
              div{min-width:50px}
              div{max-width:50px}

              擴展閱讀
              1、css min-height
              2、css max-height
              3、css width
              4、css height

              二、實際應用說明   -   TOP

              最小寬度(min-width)與最大寬度(max-width)用于設置圖片最小最大寬度限制比較多。比如一個圖片為主列表,對象里圖片大小不定時候,為了不想讓他太小不統一這個時候我們可以使用css最小寬度樣式。再如,一個盒子里有文章有圖片混排的時候,有時圖片寬度不能確定,這個時候如果html img圖片寬度超出了div盒子寬度,可能圖片就會撐破div盒子造成圖片混亂。

              擴展閱讀:
              1、css設置圖片高度寬度
              2、CSS解決圖片過大撐破DIV網頁
              3、css img
              4、html img標簽

              三、min-width與max-width用法案例   -   TOP

              我們設置2個div盒子,分別設置最大與最小寬度樣式、同時設置css邊框為1px css顏色為紅色的實線盒子、css高度為100px。第一和第二個盒子CSS命名分別為divcss5-min-width、.divcss5-max-width;第一個盒子內圖片原圖片大小為寬為165px 高度60px;第二個盒子內圖片原圖片大小為寬度為375px 高度65px。

              1、案例css代碼

              1. .divcss5-min-width,.divcss5-max-width{ height:100px; border:1px solid #F00} 
              2. .divcss5-min-width img{ min-width:200px} 
              3. .divcss5-max-width{margin-top:10px} 
              4. /* css注釋margin-top設置divcss5-max-width對象上間距為10px */ 
              5. .divcss5-max-width img{ max-width:200px; } 

              2、CSS+DIV案例html源代碼片段

              1. <p>原圖片大?。?/span><br /> 
              2. <br /> 
              3. <img src="http://www.yfzzdoors.com/img201301/divcss5-logo-2013.gif" /><br /><br /> 
              4.  
              5. 寬為165px 高度60px<br /> 
              6. <br /> 
              7. <img src="http://www.yfzzdoors.com/img201301/topad1.gif" /><br /><br /> 
              8.  
              9. 寬度為375px 高度65px 
              10. </p> 
              11. 案例如下: 
              12. <div class="divcss5-min-width"> 
              13.     <img src="http://www.yfzzdoors.com/img201301/divcss5-logo-2013.gif" /> 
              14. </div> 
              15. <div class="divcss5-max-width"> 
              16.     <img src="http://www.yfzzdoors.com/img201301/topad1.gif" /> 
              17. </div> 

              3、案例在瀏覽器效果截圖

              css div最小寬度最大寬度min-width max-width用法案例截圖
              css div Min-width與max-width案例效果截圖

              4、max-width最大寬度與min-width最小寬度案例小結
              我們設置兩個盒子一個“divcss5-min-width”設置對象里img圖片最小寬度為200px,而實際圖片只有165px,所以圖片被拉伸到200px;一個“divcss5-max-width”設置對象里img圖片最大寬度為200px限制,而實際對象里圖片寬度是375px,這個時候我們設置了此圖片最大寬度為200px,所以圖片被CSS max-height縮小到200px

              四、max-width與min-width總結   -   TOP

              Css max-width與css min-width可以同時在一個CSS選擇器使用設置一個對象最大最小寬度樣式。一般對圖片對象設置此兩項樣式比較多,但在IE6中不支持此兩個屬性,IE7及以上瀏覽器均支持,這個時候我們需要IE6支持兼容CSS min-width、ie6兼容max-width方法(http://www.yfzzdoors.com/jiqiao/j298.shtml)。

              如需轉載,請注明文章出處和來源網址:http://www.yfzzdoors.com/rumen/r423.shtml

              如對文章有任何疑問請提交到DIV CSS論壇,或有任何網頁制作CSS問題立即到CSS論壇發貼求解 或 直接DIVCSS5網頁頂部搜索遇到DIVCSS疑問。
              CSS教程文章修訂日期:2018-08-14 17:37 原創:DIVCSS5
              本文www.yfzzdoors.com DIVCSS5版權所有。

              人妻AV乱片AV,A∨天堂网在线观看免费,希崎杰西卡亚洲精品中文字幕

                  <form id="ddzdh"><form id="ddzdh"><nobr id="ddzdh"></nobr></form></form>

                    <address id="ddzdh"><nobr id="ddzdh"></nobr></address>