max-width css最大宽度
18 . Jan . 2019
max-width css最大宽度
css 最大宽度 css max-width
最大宽度为变量宽度，意思对对象设置最大宽度后，其对象宽度将不超过此最大宽度值。从字也能理解最大就是不超过之作用。max-width也属于width宽度一种细分。与之对应为最小宽度 min-width!
一、最大宽度语法
max-width语法：
max-width : 200px
设置对象最大宽度200px
max-width:60%
设置对象相等于父级宽度最大宽度为父级宽度60%。假如父级宽度为200px，那么此对象设置max-width最大宽度为60%，那么实际最大宽度就是200×60%=120px
特别注意：一般设置变量的宽度，固定宽度（width）就不能同时设置。
最大宽度 css max-width值说明：值可以为具体数值比如（100px、500px）；可以为百分比值比如（70%、90%），但值不能为负数（只能为正值）。
二、max-width最大宽度DIV CSS实例
1、div css关于最大宽度实例描述
这里设置一个300px宽、边框1px红色的盒子，再设置一个百分比div盒子。这里设置css边框也是为了便于观察对象宽度情况。
2、最大宽度应用实例css代码
.warp{ max-width:300px; border:1px solid #F00}
.bfb{ max-width:30%; border:1px solid #00F}3、实例对应html内容代码
直接放内容，看看我这个DIV宽度， 然后缩小浏览器宽度小于300px试试， 看看宽度是否会变小
为最大宽度设置30%，同样观察宽度情况， 并在缩小浏览器宽度看看变化情况
4、完整CSS+HTML代码
直接放内容，看看我这个DIV宽度，然后缩小浏览器宽度小于300px试试，看看宽度是否会变小
为最大宽度设置30%，同样观察宽度情况，并在缩小浏览器宽度看看变化情况
缩小缩窄浏览器：
5、分析说明
从实例看最大宽度max-width设置后，当浏览器宽度大于300px时，最大宽度值为300px生效，对象（红色框盒子）宽度最大显示300px，而蓝色对象为百分比30%，所以浏览器宽看起来百分比30%比较宽。但当浏览器缩小到小于300px时，设置固定最大宽度300px的红色DIV将随浏览器缩小而紧贴浏览器缩小，百分比则始终按照最大宽度30%显示所以百分比蓝色DIV看起来就小了。
作者：@悦阁网络科技
悦阁网络科技有限公司专业为中小企业提供精致的佛山网站建设、佛山网站设计、佛山网站制作及相关网络营销等服务，是广佛地区最好的网络科技公司之一，在广佛做网站开发就找悦阁网络科技！
您对建网站有需求？请回到首页“悦阁网络”官网 查找您想建哪种类型的网站，然后联系我们客服QQ，我们将竭诚为您服务！
