移动端初级相关解决方案，解决：给子加widt

移动端初级相关解决方案，解决：给子加widt

（一）盒子大小

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

作者：MaricoCheung
出处：http://www.cnblogs.com/MaricoCheung/
——有心人做有心事哦，晚安EmilyChen！

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。