扫描二维码,下载安卓APP
下载安卓APP箭头
客服QQ
箭头给我发消息

客服QQ:2698585038
论坛 >编程语言 >移动端 h5开发相关内容总结:CSS篇 (2)

移动端 h5开发相关内容总结:CSS篇 (2)

为了部落发布于 2017-12-26 10:23查看:11373回复:1

        6.CSS 截断字符串

        单行截断字符串,这里必须指定字符串的宽度

image.png

        7.calc 相关问题

        之前在做布局的时候使用calc 出现了很严重的线上 BUG。后来就深究了下这个属性的使用。
calc好用的地方就是,可以在任何单位之间进行换算。但是浏览器支持的不是很好。看一下 can i use 截图:

image.png

        而且在使用的时候要加上厂商前缀,达到兼容性。不过现在不推荐使用,毕竟,浏览器支持有限。
        示例代码:        

image.png

        研究过淘宝,天猫,京东的 h5端页面看到这个单位用的不多,主要还是兼容性的问题吧。

        8.box-sizing 的使用

        解决盒模型在不同浏览器中表现不一致的问题。但是仍然会有兼容性问题。看最下面的浏览器支持列表。

image.png

        它有三个属性值分别是:     

image.png

        浏览器支持:   

image.png

        9.水平垂直居中的问题

        这里实现一个相对定位和绝对定位配合实现水平垂直居中的样式。看效果:

  image.png

        html 代码如下: 

image.png

        css代码如下:     

image.png

        绝对定位在布局中可以很方边的解决很多问题,但是大多数时候都不去使用绝对定位,而是使用浮动等方法。而当需要 DOM 元素脱离当前文档流的时候才使用绝对定位。如: 弹层,悬浮层等。

        10. css 中 line-height 的问题

        line-height 一个很重要的用途就是让我们的文本可以在父级元素中垂直居中,但是在使用它的过程中也会遇到一些问题。

        先来看一个实例,如下图:

image.png

        代码也很简单,就是当我们在div 中定义的字体很大的情况下,我们看到字体和父级元素之间有一些空隙。那么这是为什么?
        我们查一下 line-height 的定义,如下:

image.png

        所以在以上的情况我们要想使,我们的字体能够撑满我们的容器,就需要给父级容器添加 line-height属性且值为 100%

        代码和效果如下:

image.png

        那么为什么会出现上面的问题呢?        

image.png

        所以,可以得出下面的一个公式:

image.png

        所以,当设置为line-height 的值为100%的时候,line-height的值就等于 font-size的尺寸,此时的空白间距为0

收藏(0)0
查看评分情况

全部评分

此主贴暂时没有点赞评分

总计:0

回复分享

版主推荐

    共有1条评论

    • 课课家运营团队
    • Mr ken
    • YUI
    • cappuccino
    • mr jack
    • IT宅男
    • Mright
    • 选择版块:

    • 标题:

    • 内容

    • 验证码:

    • 标题:

    • 内容

    • 选择版块:

    移动帖子x

    移动到: