前端 · 奇怪小知识合集

2017-02-22 本文已影响0人 Llane00

无限期持续更新中。。。

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