那些常用却又常忘记的css样式是什么

1. input中的placeholder

首先我们定义一个input:

 <input type="text" placeholder="你点我啊!" />12

当我们使用输入框input中的placeholder时经常需要调里面字体的大小和其他样式,(由于兼容性问题,对应浏览器不同,所以要针对浏览器用不同的代码。)这时就需要用到如下代码:

input::-webkit-input-placeholder { /*谷歌*/ color: red; } input:-ms-input-placeholder { /* IE 10+ */ color: black; } input::-moz-placeholder { /*火狐 19+ */ color: pink; } input:-moz-placeholder { /*火狐 18-*/ color: yellow; }12345678910111213141516

(简单用谷歌来实现一下,效果如下图:)

那些常用却又常忘记的css样式

2.单行多行文本加省略号

在做一些纯css页面时 偶尔要用到文本加省略号,特别是多行文本居中,很容易忘记里面一些代码

/* 单行文本加省略号 */ .text { /* 注意定宽 */ width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 8px; } /*多行文本加省略号 */ .texts { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; }123456789101112131415161718

我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年我花了一个月整理了一份最适合2020年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。

3.做一个三角形

做一些下拉框或者列表的时候 做一个小三角就会用到了,不用设置宽高,利用边框宽度,只需要留下一个边框的颜色,其他边框设置成transparent即可

/* css做一个三角形 */ .trangle { width: 0; height: 0; border: 20px solid red; border-color: transparent transparent red transparent; }1234567

4.绝对定位后使其居中

注意要使用transform: translate(-50%, -50%); 来让它以中心点平移,当然你也可以使用margin来调节。
另外其他方法居中也有很多种,高等与行高来垂直居中等其他方法(由于常用就不列举了)

.center { width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: pink; text-align: center; }12345678910

5.去除重复边框

首先要在大表格(最外面表)中写下面的代码:

table { border-collapse: collapse; }123

然后再设置tr。th。td的边框就没问题了。

那些常用却又常忘记的css样式

原文链接:***/hxp2288665/article/details/108836684?utm_medium=distribute.pc_category.none-task-blog-hot-18.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-18.nonecase&request_id=

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:dandanxi6@qq.com

(0)
上一篇 2023年 7月 18日 下午2:28
下一篇 2023年 7月 18日 下午2:38

相关推荐

  • 如何将安卓通讯录导入苹果13手机

    换新手机是件让人开心的事情啊。如果连导入联系人也能轻松搞定的话,当然更完美了!将安卓通讯录导入苹果手机的方法很多,小编尝试过各种方法之后,觉得使用微信同步或者使用qq通讯录同步最简…

    2023年 6月 6日
  • 五种http常见状态码,五个http常用状态码及其含义

    状态码是客户端向服务器发送请求的时候,描述返回的请求结果的参数,借助 Http 状态码,可以让用户知道这次请求是正常处理,还是出现了错误。状态码由 3 位数字和原因短语组成,比如 …

    互联网 2023年 5月 30日
  • 网商贷和借呗有什么不一样,借呗和网商贷可以两个都开通吗

    [闽南网] 网商贷和蚂蚁借呗同属贷款业务,并且还同是网商银行的业务,它们的关系就像是两个姐妹一样,同属于一家人。这两种产品都和阿里巴巴有着莫大的关联,那么网商贷和借呗一样吗?网商贷…

    互联网 2023年 9月 26日
  • 如何注册pinterest账号

    无论是通过为你的Pinterest博客增加流量,还是建立你的个人品牌 以找到您的产品或服务的客户,Fiona强烈建议外贸小姨子们 都应该注册一个Pinterest的企业帐户。 而且…

    2023年 1月 17日
  • 12306买票一直显示待核验,12306购票待核验是什么意思

    [闽南网] 12306是购买火车票的重要窗口,也是很多人购买火车票的首选购票软件,在使用的过程中,有用户发现12306一直显示待核验,那么这个是怎么回事呢?遇到这样的情况应该怎么办…

    2023年 2月 27日
  • 支付宝可以换皮肤主题吗,支付宝皮肤如何转给别人

    话说现在支付宝的更新真的是深得年轻人心。 近期,支付宝发布了10.3.80新版本,在该版本中支付宝竟然上线了更换皮肤的功能~ 换皮肤,一下子就将八零九零后拉回到当年的QQ时代~ 不…

    2023年 6月 26日
  • 谷歌浏览器的自带翻译功能在哪,谷歌浏览器为啥不显示翻译功能

    你可能用不到,但你不能不知道! 我是猿来如此,点击上方“关注”,每天为你分享玩机、办公小技巧,解密你不知道的事。 不知道你们有没有发现,不知不觉中谷歌浏览器的翻译功能无法使用了,刚…

    2022年 12月 24日
  • 如何申请免费的云服务器

    申请免费云服务器 访问三丰云: 三丰云_免费云服务器_高防服务器_vps云主机服务商***/ 注册帐号:需要手机号、身份证实名认证(身份认证需要0.3元手续费,但充值时至少1元),…

    2023年 2月 14日
  • 格力收购长园,格力为什么要收购长园

    5月15日,长园集团发布公告,公司收到格力集团的要约收购报告书,格力集团拟斥资逾50亿收购长园集团20%股份。 作为新能源汽车材料制造商,长园集团与格力电器近年来押注的新能源汽车产…

    2023年 1月 19日
  • qq输入不了密码怎么回事

    对于任何一个账号来说,密码是至关重要的,没有正确的密码,我们就无法登录平台。6月28日,有消息称,QQ出现bug,不管原密码是什么,输入密码“123456789”就能登录。 QQ …

    2023年 7月 18日