分享一些冷门但却很实用的css样式

在平常的代码工作中,有很多冷门不常用的css样式标签。有些偏门、冷门的标签一般都记不住,想起来的时候就又会去现找,很影响工作效率,现在,把这些标签都统一整理一下用的少但是超级实用的css样式。

 

::-Webkit-Input-Placeholder

input 的 H5 placeholder 属性,很好用,可以直接定义输入文本框里面的内容,唯一的缺点就是不能更改默认显示字体的颜色,不过我们可以直接利用::input-placeholder这个属性来设置字体颜色。

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

使用 clearfix 清楚浮动,解决父类高度崩塌

.clearfix {
    zoom: 1;
}
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " "; /* 内容为空 */
     clear: both;
     height: 0;
 }

p::selection选中文本后的背景色

p::selection {
	background: rgb(188, 188, 188);
	color: #ffffff;
}

calc() function, 计算属性值

div {
    width: calc(100% - 100px);
}

outline属性值

不知道大家有没有一个困扰,就是在写input的时候,点击的时候总会有一个很丑的蓝色描边,但是找代码还找不到。这个其实很简单,用outline这个标签就可以很简单的解决掉这个烦人的问题。

div {
    outline: none; //移动浏览器默认的状态线
    // outline: 5px dotted red; 也可以设置样式
}

Webkit-Playsinline

支持vedio视频在手机页面内部播放,不用全屏

<video id="myvideo" src="test.mp4" webkit-playsinline="true"></video>

Css实现文本的各种换行状态

//不换行
white-space:nowrap;
//自动换行
word-wrap: break-word;
word-break: normal;
//强制换行
word-break:break-all;

-webkit-line-clamp

可以把 块容器 中的内容限制为指定的行数。并且在超过行数后,在最后一行显示"..."  这是正常的展示

display: -webkit-box; /*值必须为-webkit-box或者-webkit-inline-box*/ 
-webkit-box-orient: vertical; /*值必须为vertical*/ 
-webkit-line-clamp: 2; /*值为数字,表示一共显示几行*/ 
overflow: hidden;

caret-color

用来定义插入光标(caret)的颜色,这里说的插入光标,就是那个在网页的可编辑器区域内,用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。

caret-color: red;

暂时就记录这么多.................

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码云笔记

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值