2020.7.16 bug总结第二周 (转载篇)

最新推荐文章于 2022-03-07 20:53:27 发布

StrongerIrene

最新推荐文章于 2022-03-07 20:53:27 发布

阅读量315

点赞数

分类专栏： # 前端 2020

本文链接：https://blog.csdn.net/StrongerIrene/article/details/107377255

版权

前端 2020 专栏收录该内容

49 篇文章 1 订阅

订阅专栏

1、HTML图片标签空白解决方法

2、【js 动态添加更改】: 注意转义\ 和' '的使用

3、git中fatal: Authentication failed的问题】输错了密码，手快按了确定：

4、省略号，多余的补省略号

git回退

1、HTML图片<img>标签空白解决方法

图片垂直结构有空白

首先我们要知道这部分空白产生的原因。图片默认的vertical-align:baseline(基线)

也就是字母X的下边距，如下图

可以看到图片是与字母x的下边距对齐的，也就是baseline，css2的文档中有这么一句解释，翻译过来也就是一个inline-block元素，如果里面没有inline元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线。

1.最简单粗暴也是最有效的方法：img{display:block;}

2.img{vertical-align:middle;}

3.设置包裹层 line-height：0，或者是设置font-size:0,*/

复制代码

<style>
       *{
           margin:0;
           padding:0;
       }
      
       img{
           width:200px;
           /*第一种方法 因为可以设置width,height所以是inline-block*/
          display:block;
          /*第二种方法 个人赞同这一种，因为大部分图片和文字都是垂直居中的*/
           vertical-align:top/bottom/middle/text-top/text-bottom;
       }

 .parent{
           width:500px;
            vertical-align: middle;
           background:green;
           /*第三种方法 行高设置足够小*/
            line-height:0;
    /*第四种方法  将font-size设为0，实际上也是改变了line-height*/
            font-size:0;
       }

</style> </head> <body> <div class="parent"> <img src="./pic/1.jpg"></div> <span>abcdefghistuvwxyz啊不错的风格化ijklmn</span> </body> </html>

复制代码

图片水平结构有空白

<title>Document</title>

<style>

*{

margin:0;

padding:0;

}

.parent{

width:500px;

vertical-align: middle;

background:green;

}

img{

width:200px;

}

</style>

</head>

<body>

<div class="parent"><img src="./pic/1.jpg">

<img src="./pic/1.jpg"></div>

</body>

</html>

效果图如下：

<style>

*{

margin:0;

padding:0;

}

.parent{

width:500px;

overflow: auto;

vertical-align: middle;

background:green;

}

img{

width:200px; /*第二种解决方法*/

float:left;

display: block;

}

</style>

</head>

<body>第一种方法把img标签紧挨在一起对比上一页的代码就知道了

<div class="parent"><img src="./pic/1.jpg"><img src="./pic/1.jpg"></div>

</body>

</html>

来自 https://www.cnblogs.com/xingkongly/p/7530472.html

2、【js 动态添加更改】: 注意转义\ 和' '的使用

1.html

</div>

</div>

2.js

window.onload = function () {

var tab = [

{name: '小仙女', age: 16, type: 'nice'},

{name: '大長腿', age: 18, type: 'long'},

{name: '小可爱', age: 20, type: 'cute'},

{name: '小高冷', age: 22, type: 'cold'},

{name: '她大叔', age: 38, type: 'smile'},

];

var orderBody = '';

$.each(tab, function (index, val) {

orderBody += '<table style="width: 100%"><tbody>\

<tr class="ordertr">\

<td style="width: 25%;text-align: center;border: 1px solid #ccc">' + (index + 1) + '</td>\

<td style="width: 25%;text-align: center;border: 1px solid #ccc">' + val.name + '</th>\

<td style="width: 25%;text-align: center;border: 1px solid #ccc">' + val.age + '</td>\

<td style="width: 25%;text-align: center;border: 1px solid #ccc">' + val.type + '</td>\

</tr>\

</tbody></table>'

})

$('.table').append(orderBody);

}

</script>

————————————————

原文链接：https://blog.csdn.net/sky_sunshine_x/article/details/80770916

3、git中fatal: Authentication failed的问题】输错了密码，手快按了确定：

win7 下git的凭证存在windows系统

位置控制面板

管理windows凭据

删掉就可以了，是不是很坑是不是心很痛

--------原文：https://blog.csdn.net/qq_34665539/article/details/80408282

4、省略号，多余的补省略号

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。

实现方法：

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。

接下来重点说一说多行文本溢出显示省略号，如下。

实现方法：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

效果如图：(3行省略)

适用范围：
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

注：

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

实现方法：

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}

效果如图：

适用范围：
该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

注：

将height设置为line-height的整数倍，防止超出的文字露出。
给p::after添加渐变背景可避免文字只显示一半。
由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span>…<span/>）；兼容ie8需要将::after替换成:after

来源： http://www.daqianduan.com/6179.html

git回退

https://www.cnblogs.com/zhuxiaoxi/p/8532540.html

Git的几种状态

未修改
       原始内容
已修改    ↓   
       工 作 区
已暂存    ↓    git add
       暂 存 区
已提交    ↓    git commit
       本地仓库
已推送    ↓    git push
       远程仓库

注意：下面所有命令每一个代码段是相互独立的，为了解决一个问题，请不要使用多个代码段。所有命令均经过本人测试，由于测试环境是简单的Git仓库没有过多的数据，可能在复杂环境回出现错误。如发现问题请直接评论区指出。请仔细分析使用情况，丢失数据与本人无关。

已修改未暂存

已经修改了文件，还未进行git add。
即工作区的内容不想要了。

恢复方法

使用以下任意命令

git checkout .

git checkout -- <FILENAME>

git reset --hard

已暂存未提交

已经进行了git add，还未进行git commit
即暂存区的内容不想要了

恢复方法

使用以下任意命令

git reset
git checkout .

git reset --hard

git reset HEAD

git reset HEAD -- <FILENAME>

已提交未推送

已经进行了git commit，还未进行git push

恢复方法

使用远程仓库覆盖本地仓库

git reset --hard origin/master

已推送

已经进行了git push

恢复方法

回滚本地仓库，强制推送覆盖远程仓库

git reset --hard HEAD^
git push -f

其他情况

丢弃某个节点后的全部提交

即HEAD指针指向该节点

git reset --hard <COMMITID>

2020.7.16 bug总结 第二周 (转载篇)

1、HTML图片<img>标签空白解决方法

2、【js 动态添加更改】: 注意转义\ 和' '的使用

3、git中fatal: Authentication failed的问题】输错了密码 ，手快按了确定：

4、省略号，多余的补省略号

git回退

Git的几种状态

已修改 未暂存

恢复方法

已暂存 未提交

恢复方法

已提交 未推送

恢复方法

已推送

恢复方法

其他情况

丢弃某个节点后的全部提交

2020.7.16 bug总结第二周 (转载篇)

3、git中fatal: Authentication failed的问题】输错了密码，手快按了确定：

已修改未暂存

已暂存未提交

已提交未推送