内容简介：對 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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
高可用MySQL
)Charles Bell Mats Kindahl Lars Thalmann / 宁青、唐李洋 诸云萍 / 电子工业出版社 / 2011-10 / 98.00元
《高可用mysql:构建健壮的数据中心》是“mysql high availability”的中文翻译版，主要讲解真实环境下如何使用mysql 的复制、集群和监控特性，揭示mysql 可靠性和高可用性的方方面面。本书由mysql 开发团队亲自执笔，定位于解决mysql 数据库的常见应用瓶颈，在保持mysql 的持续可用性的前提下，挖潜各种提高性能的解决方案。本书分为三个部分。第一部分讲述mysql......一起来看看 《高可用MySQL》 这本书的介绍吧!
