box-sizing屬性默認為content-box，所以height和weight默認修改的是內容盒，其實我們可以修改成別的盒子

改變背景覆蓋范圍

默認情況下，背景覆蓋邊框盒

可以通過backgroun-clip修改

溢出處理

overflow屬性，控制


overflow屬性默認為visible
改成hidden可以隱藏溢出部分

改成scroll生成滾動條


當然那是簡寫，也可以寫成overflow-y：scroll使得只有縱向滾動條，x也行，
還可以把后面修改為auto，在需要滾動條的時候加入滾動條，否則不加入

斷詞規則

word-break，會影響文字在什么位置被截斷換行

normal：普通，cjk字符（中日韓），文字位置截斷，非cjk字符，在單詞位置截斷

break-all：截斷所有，所有字符都在文字截斷，中文不受影響，單詞可以截斷比如
???????????????????????????????????????????????????????????????????????????????????g
ood

keep-all：保持所有，所有文字都在單詞之間截斷，以空格作為單詞的象征，比如

空白處理

要想實現一下省略號功能

white-space: nowrap;
強制不換行，比如width比較小，我們用這個可以強行填滿還有多出來的

再來一個overflow: hidden;
text-overflow: ellipsis;溢出部分以省略號代替

如果能顯示完是不會有省略號的

總結

以上是生活随笔為你收集整理的盒模型的应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。