width和max-width/min-width属性均属于CSS中常用属性，其中 在width和max-width/min-width属性使用过程中，属性值均可为100%，在MDN中对这种情况进行了如下阐述 如上所示，二者相关内容定义类似，但在实际应用中略有不同，例如在如下示例中， 设置img的父盒子即div的width为浏览器宽度的25%，img的width为100%（此处代表img宽度与父盒子宽度相同，高度等比缩放），在该例中，可以看出随着浏览器界面的放大，img的尺寸等比放大，且为父盒子宽度的100%，放大过程不受img原尺寸的影响 设置img的父盒子即div的width为浏览器宽度的25%，img最大宽度为100%（此处代表img最大宽度为原图的宽度，而不会受到浏览器宽度的不断增加而扩展），在该例中，可以看出，当父盒子div的宽度不足img宽度时，随着浏览器界面的放大，img的宽度为父盒子div的宽度的100%，但当父盒子div的宽度大于img宽度时，img尺寸不随浏览器界面的放大而放大，即最大为原图尺寸。min-width同理 为进一步探究max-width与min-width的覆盖关系,进行如下实验，通过结果可以看出，img的最大尺寸明显在img宽度的11%以上，这说明在同时设置min-width和max-width时，min-width属性会覆盖max-width属性 本系列博客会陆续更新，主要内容为所前端学习过程中的心得体会，如感兴趣，大家多关注鼓励
本博客意在剖析width与max-width/min-width属性
<percentage>
max-width as a percentage of the containing block’s width.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 25%; } div img { width: 100%; } </style> </head> <body> <div> <img src="IMAGES/images/apple.png" alt=""> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 50%; } div img { max-width: 100%; } </style> </head> <body> <div> <img src="IMAGES/images/apple.png" alt=""> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 100%; } div img { min-width: 10%; max-width: 11%; } </style> </head> <body> <div> <img src="IMAGES/images/apple.png" alt=""> </div> </body> </html>
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
