html基础技巧：点击、placeholder、文本、字体、清楚浮动

时间：2022-03-17 16:06:19

点击处理：

消除a标签点击后的边框，颜色（background:#fff）
　1：a:focus{outline:none;}
button去除边框
　1：border：none
　2：border：0px（不建议）
　3：button::after {
　　content: none;
　}

伪类清楚浮动：

.float:after {
　　content: " ";
　　display: table;
}
.float:after {
　　clear: both;
}

placeholder样式修改

input::-webkit-input-placeholder {

       color: #aab2bd;

       font-size: 12px;

}

文本处理：

单行文本溢出省略号结尾。需要做不换行处理+(white-space: nowrap;给定宽度)

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

超过两行用省略号代替 -webkit-line-clamp控制(火狐不支持)（ -moz-appearance）

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

字体处理：
字体大小：font-size：16px;<!--默认16px-->
字体间距：letter-spacing:2px;
字体：font-family："NSimSun"
字体粗细：font-weight：bloder;
normal:默认值;bold:粗体字符;bolder:更粗的字符;
数字表示：100~900的整百数；400 等同于 normal，而 700 等同于 bold。

虚线

border-top:1px black dashed;"
border-bottom:1px dotted black
border-bottom:1px solid  black

rgba的兼容

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19ffffff,endColorstr=#19ffffff);

第二句话的意思就是当上一行的透明度不起作用的时候执行。这句话的意思本来是用来做渐变的。但是这个地方不需要渐变。所以两个颜色都设置成了相同的颜色。

这个颜色“#19ffffff”是由两部分组成的。

第一部是#号后面的19 。是rgba透明度0.1的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。

第二部分是19后面的六位 。这个是六进制的颜色值。要跟rgb函数中的取值相同。比如rgb(255,255,255)对应#ffffff；就是白色。

div在不设置宽度的情况下，会自动适屏，但想让div宽度随内容变化， 加上display: inline-block;就可以了

此随笔会不定期得更新，整合一些技巧，供自己和大家学习使用

相关文章