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

前端 · 奇怪小知识合集

作者: 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 ,转载需说明来源

相关文章

  • 前端 · 奇怪小知识合集

    无限期持续更新中。。。 1. span 之间的神秘缝隙 来看例子: 实际的效果是: 发现 span 在换行后,会出...

  • 小程序 - 收藏集 - 掘金

    微信小程序特殊效果合集第一期 - 前端 - 掘金针对微信小程序可以实现的一些简单的效果开始制作合集,以便同学们能够...

  • 奇怪的小知识

    憋回去的屁,最终很可能会? A:被口鼻排出体外 B:消失在身体内部 答案解析:生活中憋住的屁并不会消失,而是会先被...

  • iOS小知识合集

    ios 7 之后,setTranslucent=yes 默认的 则状态栏及导航栏底部为透明的,界面上的组件应该...

  • FED之必备技能 - 收藏集 - 掘金

    『收藏』VUE 优秀 UI 组件库合集 - 前端 - 掘金github 开源的 Vue 优秀 UI 组件库合集✔....

  • 前端小知识

    chrome关闭缓存:F12 在network下选中 disable Cache 标签默认type=submit,...

  • 前端小知识

    app: 1.原生app 优势:能调用后台应用 劣势:效率低 开发成本高 2.混合a...

  • 前端小知识

    1.嵌套路由 导航:to="{ path: '/test/submittest' }" 要在前面加上父的地址2.对...

  • 前端小知识

    1、padding:1px2px3px;则等效于什么? 上右下 左复制右 2、内边距的百分数值是这么计算的 根据...

  • 前端小知识

    1、React.PureComponent 与 React.Component 的区别 React.PureCom...

网友评论

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

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