（一）盒子大小
1. 自身
通過box-sizing：設定邊距和邊框
不設寬高：利用盒子內外邊距、文字高度和大小撐開
【注】<a>要設block才能撐開
2. 相鄰
子取消間距，給父font-size：0
（二）文字隱藏
1. 溢位省略號
【1】單行
給自身加width：px；white-space：nowrap；overflow：hidden；text-overflow：ellipsis
【2】多行
控制行數：新增盒子display：webkit-box、上下排列webkit-box-orient：vertical、控制文本行數webkit-line-clamp
寬高尺寸：width:px；height；line-height；font-size；font-weight
設定隱藏：overflow:hidden；text-overflow: ellipsis；英文字符截斷word-break：break-all
2. 把文字頂走，用圖片替換（方便搜索引擎檢索）
寫法一：text-indent：-9999；overflow：hidden
寫法二：height：0；margin-top/padding-top：父高；overflow：hidden
（三）浮動引起的高度塌陷
在div與a、ul與li常見給父overflow：hidden；zoom：1
（四）促銷價
寫法一：直接用<del>標簽，但顯示效果不佳
寫法二：盒子span轉inline-block，設字體尺寸和<hr>，設定hr樣式為中心點origin;縮放scale;border:0;width:200%;height:1px
（五）flex布局空間分配
取代padding-left和right實作左右相鄰空間均勻分配并在父盒子居中用justify-content：space-around
（六）圖片
【1】實作等比例縮放解決：img設width：100%
【2】flex布局下的子盒子設了flex：1出現圖片撐大，
解決：給子加width：0
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/106818.html
標籤：其他