如何理解CSS屬性中高的min-width

這篇文章主要講解了“如何理解CSS屬性中高的min-width”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何理解CSS屬性中高的min-width”吧！

我們提供的服務(wù)有：成都網(wǎng)站制作、網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、雙湖ssl等。為數(shù)千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學管理、有技術(shù)的雙湖網(wǎng)站制作公司

一、基本含義
min-width 屬性為給定元素設(shè)置最小寬度。它可以阻止 width 屬性的應用值小于 min-width 的值。min-width 的值會同時覆蓋 max-width 和 width。

二、可取值
常用百分比、固定px|em|ex等，其他屬性值如max-content,min-content兼容性很不好。

div{min-width:100em;}

div{min-width:800px;}

……

三、兼容性
IE7+，常用現(xiàn)代瀏覽器,關(guān)于IE6的兼容處理，建議使用js控制,IE6將逐漸退出前端舞臺。

四、應用
常用在百分比寬度布局中，縮放瀏覽器窗口，以免窗口很小時影響頁面的布局 美觀。

相關(guān)屬性：max-width,min-height,max-height

我們在做布局設(shè)計時，經(jīng)常有這樣的布局，兩邊或者一邊是導航類工具欄 ，中間是內(nèi)容區(qū)域。
 
但我們希望中間的內(nèi)區(qū)域能夠自動適應，隨著不同的分辨率和瀏覽器的大小自動適應高度和寬度，以獲得較好的顯示效果。
 
我們假設(shè)中間的內(nèi)容區(qū)域是個div，如果我們不明確設(shè)置它樣式的width屬性，它是可以自動適應的，按說這滿足了要求。
 
但是當瀏覽器的寬度過小時，小到已經(jīng)不能整齊的顯示我們的內(nèi)容，頁面的顯示就會混亂不堪。
 
這時我們可以為該內(nèi)容div設(shè)置一個min-width,比如在css中：

代碼如下:

#content{  
    min-width:600px;  
}

 這個屬性的功能就像它的名字一樣簡單：最小寬度。該div還是自動適應寬度，但它多了個條件，當它自適應的寬度小于設(shè)置的最小寬度時，就會把該div的寬度設(shè)置為最小寬度，不再自動適應。
 
這個屬性在firefox和ie7中是可以使用的，但在ie6中不支持，我們可以用下面這段代碼代替：

代碼如下:

#content{  
 _width: expression(((document.compatMode && document.compatMode=='CSS1Compat')? document.documentElement.clientWidth : document.body.clientWidth) < 700? '600px' : 'auto');  
}  

 前面的這段：

代碼如下:

((document.compatMode && document.compatMode=='CSS1Compat')? document.documentElement.clientWidth : document.body.clientWidth) < 700  

 只是個判定條件，判定頁面body的寬度，這里的是，如果頁面body的寬度小于700（這個要根據(jù)具體的頁面來指定），就把content的寬度指定為600，否則就讓它自適應寬度。
其實min-height也同理！

感謝各位的閱讀，以上就是“如何理解CSS屬性中高的min-width”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對如何理解CSS屬性中高的min-width這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

網(wǎng)站名稱：如何理解CSS屬性中高的min-width
網(wǎng)頁地址：http://www.jiaotiyi.com/article/joddoe.html