(一)盒子大小
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
移动端初级相关解决方案
2017年跨境出海社媒助力—暨首届社媒官方峰会、 zappos.com、 一天玩转Priceminister平台、 最后一公里派送累计巨额成本:印尼货物在雅加达清关、 阿里巴巴国际站针对疫情推出全新平台运营规则、 亚马逊是国外消费者了解商品的第一选择、 用户超2.65亿,印度成为YouTube全球规模Top市场、 亚马逊旺季更要防止账号被冻结!、 wish高效运营核心要素、 站内运营要点全解析-Amazon平台运营中级版、 淘粉8、 【新手教程】亚马逊的搜索排名规则你知道吗?、 迅速提升新产品排名的5个小技巧、 第19号超强台风逼近日本,铁路和航班将大规模停运!、 "新新之火,必将燎原"跨境电商亚马逊平台干货分享沙龙、 Cyfe、
No comments:
Post a Comment