前段时间闲来没事研究了一下css的width属性以及min-width和max-width属性，其实平时用的话，并没有发现在这个上面有什么文章可以做，无非元素首先是自适应的，当屏幕宽度到达min-width定义最小宽度的时候会出滚动条，没有到的时候没有滚动条而已。
但是事情真的只有如此简单吗？好了，废话不多说，直入正题。先看一段简单的代码。
1 div{ 2 width: 500px; 3 min-width: 700px; 4 height: 20px; 5 background-color: red; 6 }
如果是这样的话，会出现什么样的情况呢？结果div的实际宽度为700px;
后来得知css引擎会在min-width和width中做出比较选择，如果当min-width大于width的时候会将width的值默认更换成min-width的值，而当min-width的小于width的值时也就是众所周知的当屏幕宽度达到min-width的时候就出现滚动条，并且元素的width就是css中定义的width属性值。那么出此考虑，又有一个新的问题出现了，目前流行的屏幕自适应就是通过百分比宽度完成的，那么当width或者min-width为百分比宽度的时候又是一个什么样的情况？
1 div{ 2 width: 10%; 3 min-width: 300px; 4 height: 20px; 5 background-color: red; 6 }
这样的结果大家肯定能够预知到，确实，如果10%的实际宽度(通过屏幕分辨率或者父元素的宽度计算而知)比min-width小的话，则盒子模型的宽度被设置成min-width的值，也就是300px。问题似乎显得明朗了，但是其实暗藏玄机，要知道div的宽度可是按百分比算的呀，如果屏幕的宽度在缩小，那么div也是在跟着缩小的，那么是不是意味着如果浏览器初始渲染的的时候div的百分比宽度对应的实际宽度小于min-width定义的宽度的话，那么盒子模型的宽度将永远“被等于”min-width的值。这个假设最终被证明是对的。
那么浏览器初始渲染时width百分比对应的实际宽度如果比width大呢？其实这就是平常自适应元素应用中最常见的方法。
1 div{ 2 width: 50%; 3 min-width: 300px; 4 height: 20px; 5 background-color: red; 6 }
是的，这就是min-width最应该做的事情，div在实际宽度大于min-width的时候还是自适应的在变，当实际宽度小于等于300px的时候，盒子模型宽度不再变化，剩下的事情就是浏览器宽度到达300排序的时候出滚还是不出滚的问题啦。这些例子似乎都印证了min-width表示元素最小宽度的作用。也似乎是很容易预知到的事情，那么问题又来啦，当width是固定的宽度，但min-width是百分比宽度的时候捏？这个问题似乎很无聊，平时也没人这么用，但是浏览器在渲染的时候是怎么处理的？这个问题使得我突然很好奇，所以我又试了一下浏览器初始渲染时当width的值大于min-width百分比对应的实际值的情况。
1 div{ 2 width: 800px; 3 min-width: 20%; 4 height: 20px; 5 background-color: red; 6 }
这个结果一下子就让我蒙住了，min-width并没有我想象的那样(当min-width的实际宽度小于width的时候，在屏幕达到min-width的实际宽度的时候出滚动条，而是800px的时候就出滚动条了)。我瞬间断定。。。min-width不支持百分比的表示方法。但是手贱的又试了一下min-width的百分比宽度对应的实际宽度大于width的情况，瞬间凌乱了。代码如下：
1 div{ 2 width: 500px; 3 min-width: 80%; 4 height: 20px; 5 background-color: red; 6 }
结果是，当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的敬畏，如有不周之处，希望大家指正