美文网首页
前端 · 奇怪小知识合集

前端 · 奇怪小知识合集

作者: Llane00 | 来源:发表于2017-02-22 10:53 被阅读0次

    无限期持续更新中。。。

    1. span 之间的神秘缝隙

    来看例子:

    实际的效果是:

    发现 span 在换行后,会出现缝隙。
    事实上这是行内元素和inline-block元素的缝隙问题。
    解决办法 1:你就不要换行了,毕竟span是行内元素。
    解决办法 2:设置父元素的font-size为0,再设置目标span的font-size。

    2. 忽高忽低的img图标

    直接用img标签附加小图标时经常会发现小图标位置不是太高就是太低。
    不管怎么调height,line-height,margin,padding都没用。
    解决办法:
    在img标签中加入vertical-align属性,
    vertical-align有多种值总有一种符合你的要求,慢慢调试去吧。

    3. github上传成功但不显示活跃颜色

    如果当前git设置的用户名及邮箱和github上不同,那么上传文件到github的时候就会不显示用户活跃颜色。
    因为github认为不是本人在上传。

    解决办法:
    首先可以用 $ git config --list
    查看一下 当前设置的用户名和邮箱
    设置:
    $ git config --global user.name "xxxx"
    $ git config --global user.email "xxxx@xxx"
    ps:如果在list里没有出现user.name 和 user.email,就意味着当前git 没有设置用户名和邮箱。

    4. 如何用三个均等div平铺一个大div

    上代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .big::after{ /* 父元素清除浮动 */
                content: "";
                display: block;
                clear: both;
            }   
            .small{ 
                /* padding和border可任意加 */
                /* 因为设置为border-box了,padding和border一起算在了width里 */
                width: 33.33%;
                float: left;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <div class="big">
            <div class="small"></div>
            <div class="small"></div>
            <div class="small"></div>
        </div>
    </body>
    </html>
    

    5. 标题多出字为省略号

    .title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    

    6. width系列知识

    width() //宽度
    innerWidth() //宽度+padding
    outerWidth() //宽度+padding+border
    outerWidth(true) //宽度+padding+border+margin

    本博客版权归 Llane00 ,转载需说明来源

    相关文章

      网友评论

          本文标题:前端 · 奇怪小知识合集

          本文链接:https://www.haomeiwen.com/subject/dgwpwttx.html