移動端初級相關解決方案

（一）盒子大小

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