深入剖析width与max |
您所在的位置：网站首页 › min与max期望 › 深入剖析width与max |
深入剖析width与max
|
本博客意在剖析width与max-width/min-width属性
width和max-width/min-width属性均属于CSS中常用属性，其中 width属性设置元素的宽度。默认情况下，它会设置内容区域的宽度，但是如果box-sizing设置为border-box，它会设置边框区域的宽度max-width/min-width属性设置元素的最大/最小宽度。它可以防止使用的width属性值变得比max-width指定的值大/小，值得注意的是，min-width属性会覆盖max-width属性，针对这一点，后续会有验证在width和max-width/min-width属性使用过程中，属性值均可为100%，在MDN中对这种情况进行了如下阐述 Defines the max-width as a percentage of the containing block's width.Defines the width as a percentage of the containing block's width.如上所示，二者相关内容定义类似，但在实际应用中略有不同，例如在如下示例中， 设置img的父盒子即div的width为浏览器宽度的25%，img的width为100%（此处代表img宽度与父盒子宽度相同，高度等比缩放），在该例中，可以看出随着浏览器界面的放大，img的尺寸等比放大，且为父盒子宽度的100%，放大过程不受img原尺寸的影响 Document div { width: 25%; } div img { width: 100%; }
设置img的父盒子即div的width为浏览器宽度的25%，img最大宽度为100%（此处代表img最大宽度为原图的宽度，而不会受到浏览器宽度的不断增加而扩展），在该例中，可以看出，当父盒子div的宽度不足img宽度时，随着浏览器界面的放大，img的宽度为父盒子div的宽度的100%，但当父盒子div的宽度大于img宽度时，img尺寸不随浏览器界面的放大而放大，即最大为原图尺寸。min-width同理 Document div { width: 50%; } div img { max-width: 100%; }
为进一步探究max-width与min-width的覆盖关系,进行如下实验，通过结果可以看出，img的最大尺寸明显在img宽度的11%以上，这说明在同时设置min-width和max-width时，min-width属性会覆盖max-width属性 Document div { width: 100%; } div img { min-width: 10%; max-width: 11%; }
本系列博客会陆续更新，主要内容为所前端学习过程中的心得体会，如感兴趣，大家多关注鼓励 |
【本文地址】
今日新闻 |
推荐新闻 |