zoukankan      html  css  js  c++  java
  • 移动端初级相关解决方案

    (一)盒子大小

    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
    宽高尺寸: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;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!

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

     
  • 相关阅读:
    WPF之感触
    C# WinForm 给DataTable中指定位置添加列
    MyEclipse 8.6 download 官方下载地址
    将博客搬至CSDN
    Building Microservices with Spring Cloud
    Building Microservices with Spring Cloud
    Building Microservices with Spring Cloud
    Building Microservices with Spring Cloud
    Building Microservices with Spring Cloud
    Building Microservices with Spring Cloud
  • 原文地址:https://www.cnblogs.com/MaricoCheung/p/13666079.html
Copyright © 2011-2022 走看看