内容简介：對 Element 設定ＷebStorm 2019.1.3Safari 12.1.1
對 Element 設定 width ，這問題不大，但 RWD 出現後， width 就面臨的重大挑戰，因此出現了 max-width ，但這兩者有什麼差異呢 ?
Version
ＷebStorm 2019.1.3
Safari 12.1.1
CSS 3
Chrome
若 width 與 max-width 小於 container，則視覺上兩者沒有差異。
若 width 與 max-width 大於 container 時，就可明顯看出兩者差異。
HTML
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Lab</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>width: 500px</h2>
<div class="general width">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet architecto asperiores aut cum distinctio fugiat fugit harum hic incidunt magni maiores minus nemo, officiis quae quaerat quis reprehenderit temporibus?
</div>
<h2>max-width: 500px</h2>
<div class="general max-width">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet architecto asperiores aut cum distinctio fugiat fugit harum hic incidunt magni maiores minus nemo, officiis quae quaerat quis reprehenderit temporibus?
</div>
</body>
</html>
兩個 <div> 內文完全一樣。
CSS
style.css
.general {
margin: auto;
border: 3px solid #f00;
}
.width {
width: 500px;
}
.max-width {
max-width: 500px;
}
第 1 行
.general {
margin: auto;
border: 3px solid #f00;
}
兩個 <div> 的 margin 都使用 auto ，表示若 element 寬度小於 container，則 element 將 水平置中 ，兩側將平分 container 剩餘寬度。
第 6 行
.width {
width: 500px;
}
.max-width {
max-width: 500px;
}
width 與 max-width 都設定 500px ：
- 若 element 寬度小於 container，則兩者沒有差異
- 若 element 寬度大於 container，
width會有使內容 overflow，但max-width則會使內容自動換行
Conclusion
- 一般來說，在 RWD 世界
max-width比width好用，會隨著 container 寬度自動換行，而不是 overflow 產生 scrollbar 或隱藏內容
Reference
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
设计模式之禅（第2版）
秦小波 / 机械工业出版社 / 2014-2-25 / 89.00元
本书是设计模式领域公认的3本经典著作之一，“极具趣味，容易理解，但讲解又极为严谨和透彻”是本书的写作风格和方法的最大特点。第1版2010年出版，畅销至今，广受好评，是该领域的里程碑著作。深刻解读6大设计原则和28种设计模式的准确定义、应用方法和最佳实践，全方位比较各种同类模式之间的异同，详细讲解将不同的模式组合使用的方法。第2版在第1版的基础上有两方面的改进，一方面结合读者的意见和建议对原有内容中......一起来看看 《设计模式之禅（第2版）》 这本书的介绍吧!
