由于标题不允许出现!符号，所以再来一个清晰的标题
超越!important 超越最大max-width
超越 !important
超越 !important 指的是max-width会覆盖width,而且这种覆盖不是普通的覆盖，是超级覆盖。
大家应该都知道CSS世界中的!important的权重相当高，比直接在元素的style属性中设置CSS声明还要高，一般用在CSS覆盖JavaScript设置上。但就是这么厉害的！important,直接被max-width一个浪头就拍沉了😂。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>max-width</title>
<style>
img{
max-width: 256px;
}
</style>
</head>
<body>
<img src="1.jpg" style="width:480px !important">
</body>
</html>
图片最后呈现的宽度是256px,style、!important通通靠边站！因为max-width会覆盖width。
超越最大(max-width)
超越最大指的是min-width覆盖max-width，此规则发生在min-width大于max-width情况下，即min-width 和 max-width 冲突的时候。我们设置刚刚图片的最小宽度大于最大宽度试试
<style>
img{
min-width:300px;
max-width: 256px;
}
</style>
效果：
此时，两者必定是你死我活的状态。究竟谁死呢？遵循“超越最大”规则（注意不是“后来居上”规则），min-width活下来，max-width被忽略，于是img的宽度就是300px;
