欢迎访问移动开发之家(rcyd.net),关注移动开发教程。移动开发之家  移动开发问答|  每日更新
页面位置 : > > 内容正文

移动端初级相关解决方案,解决:给子加widt

来源: 开发者 投稿于  被查看 34887 次 评论:156

移动端初级相关解决方案,解决:给子加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!

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

相关频道:

用户评论