1. 開始
在不限定寬度的情況下，font-size是會影響的寬度的。以下的試驗是在 macos 的 chrome 中進行的。
預設情況下的寬度是 132px，font-size的值為12px。
當我們以12px為界，先減小font-size的值，這時候會發現無論是的寬度，還是輸入裡面的字元大小，都是是不變的。
這個現象驗證了 chrome 為了安全性，對字型大小是有保護的。
接著我們回到邊界來逐步增大font-size，來觀察下寬度的變化（格式：字型大小 -寬度）：
從羅列的數值中發現，每增大 2px，寬度都會增加 20px。
我在其中輸入迴圈輸入 1～9 數字，發現寬度和字型的聯絡是：在偶數的字型大小下，保證可以顯示 18 個數字。
最後我嘗試輸入 100% 的字型大小，發現其等於 16px 的字型大小下的寬度。
當然字型大小除了影響寬度，對高度也是有影響的，這裡就不贅述了。
2. 關於相容性
後來我嘗試了 safari，發現寬度受字型大小的影響是一直的，但 safari 對字型的大小沒做限制，當字型大小會 0 的時候，的內容寬度也就為 0 了。
其他的區別還有：
3. 小結
每個瀏覽器的渲染規則都是不一樣的，所以對樣式的設定還是要詳細些，儘量減少依靠渲染引擎的推算。
比如對於，不僅需要設定好字型大小，還要設定好字型（對高寬也有影響）。最好還要設定寬度（width或者flex布局等），不然在乙個定寬對結構下可能就會出現問題了。
font size屬性的繼承
font size屬性不被直接繼承 只有計算值被繼承，而不是整個宣告被繼承。當使用乙個絕對字型大小值 如14px 時表現不明顯，但是使用相對字型大小值 如80 或0.8em 時就表現非常明顯。相對值只有被傳遞到子元素之前，才會被計算。如果我們在元素上設定乙個相對的font size，它僅被傳遞到子元...
jQuer實時監控input對table進行篩選
記得以前寫過乙個預定 比這個更難，一大串前端js 忘了 好記性不如爛筆頭 記錄下，既幫助別人，也幫助自己 實現思路 通過.on監聽input標籤的內容變化，通過this獲取到val，通過.hide隱藏未匹配標籤 大致這樣 input type text class form control id i...
font size用VW來寫的方法
我們做網頁寫css 的時候，通常會在最前面寫乙個通用選擇符。有時候為了字型的計算，我們會將文章採用10px字型。寫起來就像這樣 css 在製作響應式主題時，我們會根據所需螢幕的進行變化，並且採用vw view width 來實現。比如我們準備開發乙個寬度為640的網頁，而基礎字型我們設定為10px。...