css的width，min-width和max-width

　　 前段時間閑來沒事研究了一下css的width屬性以及min-width和max-width屬性，其實平時用的話，並沒有發現在這個上面有什么文章可以做，無非元素首先是自適應的，當屏幕寬度到達min-width定義最小寬度的時候會出滾動條，沒有到的時候沒有滾動條而已。

　　但是事情真的只有如此簡單嗎？好了，廢話不多說，直入正題。先看一段簡單的代碼。

div{
    width: 500px;
    min-width: 700px;
    height: 20px;
    background-color: red;  
}

        如果是這樣的話，會出現什么樣的情況呢？結果div的實際寬度為700px;        

        后來得知css引擎會在min-width和width中做出比較選擇，如果當min-width大於width的時候會將width的值默認更換成min-width的值，而當min-width的小於width的值時也就是眾所周知的當屏幕寬度達到min-width的時候就出現滾動條，並且元素的width就是css中定義的width屬性值。那么出此考慮，又有一個新的問題出現了，目前流行的屏幕自適應就是通過百分比寬度完成的，那么當width或者min-width為百分比寬度的時候又是一個什么樣的情況？

div{
    width: 10%;
    min-width: 300px;
    height: 20px;
    background-color: red;  
}

        這樣的結果大家肯定能夠預知到，確實，如果10%的實際寬度(通過屏幕分辨率或者父元素的寬度計算而知)比min-width小的話，則盒子模型的寬度被設置成min-width的值，也就是300px。問題似乎顯得明朗了，但是其實暗藏玄機，要知道div的寬度可是按百分比算的呀，如果屏幕的寬度在縮小，那么div也是在跟着縮小的，那么是不是意味着如果瀏覽器初始渲染的的時候div的百分比寬度對應的實際寬度小於min-width定義的寬度的話，那么盒子模型的寬度將永遠“被等於”min-width的值。這個假設最終被證明是對的。

        那么瀏覽器初始渲染時width百分比對應的實際寬度如果比width大呢？其實這就是平常自適應元素應用中最常見的方法。

 div{
    width: 50%;
    min-width: 300px;
    height: 20px;
    background-color: red;  
}

        是的，這就是min-width最應該做的事情，div在實際寬度大於min-width的時候還是自適應的在變，當實際寬度小於等於300px的時候，盒子模型寬度不再變化，剩下的事情就是瀏覽器寬度到達300排序的時候出滾還是不出滾的問題啦。這些例子似乎都印證了min-width表示元素最小寬度的作用。也似乎是很容易預知到的事情，那么問題又來啦，當width是固定的寬度，但min-width是百分比寬度的時候捏？這個問題似乎很無聊，平時也沒人這么用，但是瀏覽器在渲染的時候是怎么處理的？這個問題使得我突然很好奇，所以我又試了一下瀏覽器初始渲染時當width的值大於min-width百分比對應的實際值的情況。

div{
    width: 800px;
    min-width: 20%;
    height: 20px;
    background-color: red;  
} 

        這個結果一下子就讓我蒙住了，min-width並沒有我想象的那樣(當min-width的實際寬度小於width的時候，在屏幕達到min-width的實際寬度的時候出滾動條，而是800px的時候就出滾動條了)。我瞬間斷定。。。min-width不支持百分比的表示方法。但是手賤的又試了一下min-width的百分比寬度對應的實際寬度大於width的情況，瞬間凌亂了。代碼如下：

div{
    width: 500px;
    min-width: 80%;
    height: 20px;
    background-color: red;  
}

        結果是，當min-width對應的實際寬度大於500px的時候，寬度為min-width的值，而當min-width的實際寬度小於等於500px的時候，寬度就變成了width的值隨着瀏覽器的size的變化，也出現了滾動條，可見min-width是支持百分比表示的。

        通過上面種種情況的分析，css的width和min-width設計師嚴謹的，可以肯定的是min-width對應的實際寬度比width對應的實際寬度大的情況下，元素的寬度值為min-width值，當min-width對應的實際寬度小於width對應的實際寬度時，瀏覽器初始渲染的時候，元素的盒子模型寬度對應的是width屬性定義的實際寬度值，當瀏覽器size改變的時候。當屏幕寬度小於min-width的實際寬度的時候就會出現滾動條。

        而對於max-width，其實原理和min-width的用法類似，無論width的值為多大，元素的最大寬度都對應的是max-width的值。簡單的一個表達式可以概括width，min-width，max-w的關系

        盒子模型寬度 = width > min-width ? width : min-width

                               = width >max-width ? max-width : width

        文中代碼皆為不常規用法，在實際的項目開發中，width，min-width，max-width的用法其實很單一，目的也很明確，而此文只是表示對他們小小的好奇心和對css的敬畏，如有不周之處，希望大家指正