本博客意在剖析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中對這種情況進行了如下闡述
<percentage>- Defines the
max-widthas a percentage of the containing block's width. - Defines the width as a percentage of the containing block's width.
- Defines the
如上所示，二者相關內容定義類似，但在實際應用中略有不同，例如在如下示例中，
設置img的父盒子即div的width爲瀏覽器寬度的25%，img的width爲100%（此處代表img寬度與父盒子寬度相同，高度等比縮放），在該例中，可以看出隨着瀏覽器界面的放大，img的尺寸等比放大，且爲父盒子寬度的100%，放大過程不受img原尺寸的影響
<!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>
設置img的父盒子即div的width爲瀏覽器寬度的25%，img最大寬度爲100%（此處代表img最大寬度爲原圖的寬度，而不會受到瀏覽器寬度的不斷增加而擴展），在該例中，可以看出，當父盒子div的寬度不足img寬度時，隨着瀏覽器界面的放大，img的寬度爲父盒子div的寬度的100%，但當父盒子div的寬度大於img寬度時，img尺寸不隨瀏覽器界面的放大而放大，即最大爲原圖尺寸。min-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: 50%;
}
div img {
max-width: 100%;
}
</style>
</head>
<body>
<div>
<img src="IMAGES/images/apple.png" alt="">
</div>
</body>
</html>
爲進一步探究max-width與min-width的覆蓋關係,進行如下實驗，通過結果可以看出，img的最大尺寸明顯在img寬度的11%以上，這說明在同時設置min-width和max-width時，min-width屬性會覆蓋max-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: 100%;
}
div img {
min-width: 10%;
max-width: 11%;
}
</style>
</head>
<body>
<div>
<img src="IMAGES/images/apple.png" alt="">
</div>
</body>
</html>
本系列博客會陸續更新，主要內容爲所前端學習過程中的心得體會，如感興趣，大家多關注鼓勵