那些常用却又常忘记的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

相关推荐

  • 路由器连接光猫的桥接模式怎么弄

    许多家庭网络中的上网设备既有光猫又有路由器,那么光猫和路由器在家庭网络中各起什么作用呢?一般如何搭配使用可以满足资源利用最大化呢?怎么样搭配才能让网络利用效率最高呢? 下面来解答以…

    2023年 7月 2日
  • 房间里没有wifi怎么检测摄像头

    明敏 丰色 发自 凹非寺 现在,只用WiFi就能“看”到你在房间里干啥了…… (你…干…嘛……啊啊啊啊) 多人追踪也是so easy: 过程中完全不需要拍下图像、不需要摄像头。 输…

    2023年 7月 6日
  • 世界最牛动画设计专业(动画设计日本学校)

    今天是世界动画日 你是否还记得小时候看过的经典动画呢 随着动画产业的发展 好作品也层出不穷 动画设计专业是怎样的 一起来了解一下吧 简介 动画设计专业,是培养动画设计人才的专业。动…

    2023年 1月 4日
  • 如何关闭境外来电保护

    不知道大家有没有接到过类似这样 00开头的电话? 那这些电话都是什么鬼? 明确告诉大家,这些都是从境外打过来的 诈骗电话! 那如何进行识别拦截? 境外来电一般是00开头 手机一般会…

    2023年 9月 4日
  • 怎么@所有人(怎么所有人都垂头丧气)

    在QQ群中,@所有人是一种非常实用的功能,它可以让你的消息被所有群成员看到。在大多数情况下,这是一个非常简单有效的方法。 硬件型号:手机华为MATE50pro&&电…

    2023年 10月 20日
  • 如何免费扫描照片文字转换为word

    扫描图片转word怎么转?扫描图片转Word是一项非常重要的任务,它能够将图像转换为可编辑的文本格式,使其更易于编辑、复制和共享。在现代社会中,电子文档的使用已经变得越来越普遍,因…

    2023年 8月 25日
  • 各大银行开户行网点查询方式,农商银行开户行查询电话是多少

    经常在办理各种与银行或是资金往来有关的业务时会被要求填写所使用银行卡的开户行信息,这虽说是一个在平时不会引起大家重视的信息,但是真遇到需要的时候还真是有那么点麻烦。下面小编整理了一…

    2023年 3月 12日
  • 怎么通过wxid加微信好友(如何用微信原始wxid加好友)

    为什么附近的人能够能够轻而易举的加上微信?摇一摇被加上的可能性其实是很小的,那么在一个人群聚集区怎么会被加上好友?或者说我们普通人怎么避免被微信“骚扰”?有一个最简单的办法就是把微…

    2023年 7月 18日
  • 浙江省公交车可以用支付宝吗

    出门没带零钱和公交卡?没关系,带上手机就可以坐公交!8月26日,记者获悉,由嘉兴市公交公司与支付宝合作推出的公交“移动支付”应用开始在5条城市公交线路试运行,市民可在支付宝中领取嘉…

    2023年 3月 26日
  • 如何去除图片上的水印最有效(怎么将带有水印的图片去除水印)

    我们在网上收集图片素材时,有时会遇到保存下来的图片带有平台水印的情况,会对我们的二次创作产生阻碍。所以这个时候我们需要将水印去除,那么你们知道怎么去图片里面的水印吗?今天给大家分享…

    2023年 3月 18日