内容简介：對 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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
"笨办法"学Python
肖 (Zed A.Shaw) / 王巍巍 / 人民邮电出版社 / 2014-11-1 / CNY 49.00
本书是一本Python入门书籍，适合对计算机了解不多，没有学过编程，但对编程感兴趣的读者学习使用。这本书以习题的方式引导读者一步一步学习编程，从简单的打印一直讲到完整项目的实现，让初学者从基础的编程技术入手，最终体验到软件开发的基本过程。 本书结构非常简单，共包括52个习题，其中26个覆盖了输入/输出、变量和函数三个主题，另外26个覆盖了一些比较高级的话题，如条件判断、循环、类和对象、代码测......一起来看看 《"笨办法"学Python》 这本书的介绍吧!
