广州蓝景分享—实用的CSS技巧，助你成为更好的前端开发者
qiyuwang 2024-10-06 12:16 7 浏览 0 评论
Hello~~各位小伙伴，相信在前端开发项目中，CSS实现如修改输入占位符样式，多行文本溢出，隐藏滚动条，修改光标颜色，水平和垂直居中等等，这些都是我们非常熟悉的开发场景！前端开发者几乎每天都会和它们打交道，所以，今天广州蓝景收集一些CSS技巧，希望对大家有帮助。
1.解决图片5px间距问题
你是否经常遇到图片底部多出5px间距的问题？不着急，这里有4种方法可以帮助你解决此问题。
解决方案 1：将 font-size: 0 设置为父元素
演示地址：https://codepen.io/qianlong/pen/VwrzoyE
具体实现代码如下：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>image 5px spacing</title>
</head>
<body>
<div class="img-container">
<img src="https://cdn-images-1.medium.com/max/1600/0*MU3iBxNwssZWt6Tj" alt="">
</div>
</body>
</html>CSS
html,body{
margin: 0;
padding: 0;
}
.img-container{
background-color: lightblue;
/* Key Style */
font-size: 0;
}
img{
width: 100%;
}解决方案 2：将 display: block 设置为 img
演示地址：https://codepen.io/qianlong/pen/eYeGONM
具体实现代码如下：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>image 5px spacing</title>
</head>
<body>
<div class="img-container">
<img src="https://cdn-images-1.medium.com/max/1600/0*MU3iBxNwssZWt6Tj" alt="">
</div>
</body>
</html>CSS
html,body{
margin: 0;
padding: 0;
}
.img-container{
background-color: lightblue;
}
img{
width: 100%;
/* Key Style */
display: block;
}解决方案 3：将 vertical-align: bottom 设置为 img
演示地址：https://codepen.io/qianlong/pen/jOaGNWw
具体实现代码如下：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>image 5px spacing</title>
</head>
<body>
<div class="img-container">
<img src="https://cdn-images-1.medium.com/max/1600/0*MU3iBxNwssZWt6Tj" alt="">
</div>
</body>
</html>CSS
html,body{
margin: 0;
padding: 0;
}
.img-container{
background-color: lightblue;
}
img{
width: 100%;
/* Key Style */
vertical-align: bottom;
}方案四：给父元素设置line-height: 5px
演示地址：https://codepen.io/qianlong/pen/PoOJYzN
具体实现代码如下：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>image 5px spacing</title>
</head>
<body>
<div class="img-container">
<img src="https://cdn-images-1.medium.com/max/1600/0*MU3iBxNwssZWt6Tj" alt="">
</div>
</body>
</html>CSS
html,body{
margin: 0;
padding: 0;
}
.img-container{
background-color: lightblue;
/* Key Style */
line-height: 5px;
}
img{
width: 100%;
}2.元素高度与窗口相同
演示地址：https://codepen.io/qianlong/pen/xxPXKXe
如何让元素和窗口一样高？示例代码如下：
<div class="app">
<div class="child">
</div>
</div>* {
margin: 0;
padding: 0;
}
.child {
width: 100%;
/* Key Style */
height: 100vh;
background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);
}3.修改输入占位符样式
演示地址：https://codepen.io/qianlong/pen/JjOrPOq
第一个修改了，第二个没有修改。这里代码就不附上去了
4.使用“:not”选择器
演示地址：https://codepen.io/qianlong/pe元素之外的所有元素都需要一些样式，使用 not 选择器会非常容易。
如下图：最后一个元素没有底边框。
5.使用flex布局智能固定一个元素在底部
演示地址：https://codepen.io/qianlong/pen/ZEaXzxM
当内容不够时，按钮应该在页面底部。当有足够的内容时，按钮应该跟随内容。当你遇到类似问题时，使用flex实现智能布局！
代码如下：
<div class="container">
<div class="main">I'm fatfish, 6 years of programming experience, like front-end, writing
and making friends,looking forward to becoming good friends with you.</div>
<div class="footer">rule</div>
</div>* {
margin: 0;
padding: 0;
}
.container {
height: 100vh;
/* Key Style */
display: flex;
flex-direction: column;
justify-content: space-between;
}
.main {
/* Key Style */
flex: 1;
background-image: linear-gradient(
45deg,
#ff9a9e 0%,
#fad0c4 99%,
#fad0c4 100%
);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.footer {
padding: 15px 0;
text-align: center;
color: #ff9a9e;
font-size: 14px;
}6.使用“caret-color”修改光标颜色
演示地址：https://codepen.io/qianlong/pen/YzErKvy
有时需要修改光标的颜色。现在是插入符号颜色显示时间。
<input type="text" class="caret-color" />* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
}
.caret-color {
width: 300px;
padding: 10px;
margin-top: 20px;
border-radius: 10px;
border: solid 1px #ffd476;
box-sizing: border-box;
background-color: transparent;
outline: none;
color: #ffd476;
font-size: 14px;
/* Key Style */
caret-color: #ffd476;
}
.caret-color::-webkit-input-placeholder {
color: #4f4c5f;
font-size: 14px;
}7.去掉type=”number”末尾的箭头
演示地址：https://codepen.io/qianlong/pen/OJOxLrg
默认情况下，input type = “number”的末尾会出现一个小箭头，但有时我们需要将其去掉。我们应该做什么？
如下图：第二个去掉了，第一个没有。
8.“outline:none”去掉输入状态行
演示地址：https://codepen.io/qianlong/pen/YzErzKG
当输入框被选中时，默认会有一个蓝色的状态行，可以使用 outline: none 去掉。
9.解决iOS滚动条卡住的问题
在苹果手机上，经常会出现滚动时元素卡住的情况。这个时候只有一行CSS会支持弹性滚动。
body,html{
-webkit-overflow-scrolling: touch;
}10.画三角形
演示地址：https://codepen.io/qianlong/pen/rNYGNRe
<div class="box">
<div class="box-inner">
<div class="triangle bottom"></div>
<div class="triangle right"></div>
<div class="triangle top"></div>
<div class="triangle left"></div>
</div>
</div>* {
margin: 0;
padding: 0;
}
body {
padding: 15px;
}
.box {
padding: 15px;
background-color: #f5f6f9;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
}
.triangle {
display: inline-block;
margin-right: 10px;
/* Base Style */
border: solid 10px transparent;
}
/*bottom*/
.triangle.bottom {
border-top-color: #0097a7;
}
/*top*/
.triangle.top {
border-bottom-color: #b2ebf2;
}
/*left*/
.triangle.left {
border-right-color: #00bcd4;
}
/*right*/
.triangle.right {
border-left-color: #009688;
}11.画小箭头
演示地址：https://codepen.io/qianlong/pen/ZEaXEEP
12.图像适合窗口大小
演示地址：https://codepen.io/qianlong/pen/PoOJoPO
代码如下：
<div class="box">
<div class="img-container">
<img src="https://cdn-images-1.medium.com/max/1600/0*tuDPftoIhupd-qx-.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-container">
<img src="https://cdn-images-1.medium.com/max/1600/0*tuDPftoIhupd-qx-.jpg" alt="">
</div>
</div>
<div class="box-vw">
<div class="img-container">
<img src="https://cdn-images-1.medium.com/max/1600/0*tuDPftoIhupd-qx-.jpg" alt="">
</div>
</div>* {
margin: 0;
padding: 0;
}
body {
padding: 15px;
}
.box,
.box-vw {
background-color: #010102;
border-radius: 10px;
overflow: hidden;
margin-bottom: 15px;
}
.box:nth-of-type(2) {
width: 260px;
}
/* vw */
.box-vw .img-container {
width: 100vw;
height: 66.620879vw;
padding-bottom: inherit;
}
/* padding */
.img-container {
width: 100%;
height: 0;
/* Aspect ratio of picture*/
padding-bottom: 66.620879%;
}
img {
width: 100%;
}13.隐藏滚动条
演示地址：https://codepen.io/qianlong/pen/yLPzLeZ
第一个滚动条可见，第二个隐藏。
这意味着容器可以滚动，但是滚动条是隐藏的，就好像它是透明的一样。
14.自定义选中的文字样式
演示地址：https://codepen.io/qianlong/pen/jOaGOVQ
15.不允许选择文本
演示地址：https://codepen.io/qianlong/pen/rNYGNyB
第一个内容可以选，第二个不可以选中了。
<div class="box">
<p> I'm fatfish, 6 years of programming experience, like front-end, writing
and making friends, looking forward to becoming good friends with you.</p>
<p> I'm fatfish, 6 years of programming experience, like front-end, writing
and making friends, looking forward to becoming good friends with you.</p>
</div>* {
margin: 0;
padding: 0;
}
body {
padding: 15px;
color: #324b64;
}
.box p {
margin-bottom: 15px;
padding: 10px;
background-color: #f5f6f9;
border-radius: 6px;
font-size: 12px;
}
/* Key Style */
.box p:last-child {
user-select: none;
}16.水平和垂直居中元素
演示地址：https://codepen.io/qianlong/pen/VwrMwWb
<div class="parent">
<p class="child">I'm fatfish, 6 years of programming experience, like front-end, writing
and making friends, looking forward to becoming good friends with you.</p>
</div>* {
margin: 0;
padding: 0;
}
body {
padding: 15px;
color: #324b64;
}
.parent {
padding: 0 10px;
background-color: #f5f6f9;
height: 100px;
border-radius: 6px;
font-size: 12px;
/* Key Style */
display: flex;
align-items: center;
justify-content: center;
}17.使用“filter:grayscale(1)”使页面处于灰色模式
body{
filter: grayscale(1);
}一行代码将使页面处于灰色模式，这功能也很实用的，国内最近一周的各大平台，基本都是这个灰色模式，至于原因嘛，大家都知道了，这里就不说了。
这些都是灰色模式，后期如果我们想要恢复到原来的正常模式，我们只需要在CSS里将filter: grayscale(1);这行代码注释掉即可。
以上内容就是今天与大家分享的CSS知识，觉得有帮助的话，可以点下赞，关注我们。
相关推荐
- 别再乱找了!这才是 Alist 本地安装挂载的正确打开方式
-
一、探秘Alist的神奇世界在这个数据爆炸的时代，我们的生活里充斥着各种各样的网盘服务，百度网盘、阿里云盘、腾讯微云等等，它们成了我们存储资料的得力助手。但随着网盘数量的增多，管理这些分散在不同平...
- 如何将数据从旧iPhone传输到新iPhone 16?这五个方法你必须知道!
-
前不久，苹果发布了备受期待的iPhone16系列，新机型搭载了更强大的芯片、更流畅的操作体验，还有备受热议的全新摄像系统。无论你是冲着A18仿生芯片，还是更丰富的动态岛功能，相信很多果粉早已跃跃欲试...
- 大数据传输的定义与大数据传输解决方案的选择
-
当我们需要处理大量的数据时，我们就要把数据从一个地方移动到另一个地方。这个过程就叫做大数据传输。它通常需要用到高速的网络连接、分散的存储系统和数据传输协议，以保证数据的快速、可靠和安全的移动。常用的大...
- 【工具】在线传输文件工具（在线文件互传）
-
前言在线传输文件工具主要是用于在不同的设备之间，如手机、电脑、平板等快速便捷地传送文件。告别使用USB传统传输文件的方式。...
- 如何使用 CAN-FD 在 LPC5500 上传输数据
-
目录1引言2CAN-FD3示例演示1引言...
- 轻松同步:将照片从三星手机传输到iPad的简便方法
-
概括想要在新iPad上查看三星照片吗？但是，如果您不知道如何将照片从三星手机传输到iPad，则无法在iPad上查看图片。为此，本文分享了7个有用的方法，以便您可以使用它们在不同操作系统之...
- 常见又地道的网络缩写:美剧中常说的SFW到底是个啥?
-
在这堂课中，让我们来学习更多在数字网络世界中常用的有趣网络用语。7shifts/unsplashhttp,https“http”和“https”是万维网（www）传输文件用的协议。“http”是hy...
- 每天学会一个计算机网络协议之FTP
-
开始行文之前提出一个问题，相信大家在看完本文后一定可以回答当我们在网站上填写注册信息的时候，需要我们上传照片，上传的过程发生了什么？下面引入我们的主角，FTP文件传输协议FTPFileTransf...
- 即用即走，这3款文件分享工具真香
-
打工人的日常，免不了「文件分享存储服务」的需求。我们一般会选择不同的网盘，但是大家也知道，网盘不是限速就是叫你充值。今天跟大家简单推荐3款文件分享工具，既可以免登录匿名使用，而且操作简单稳定性也不错。...
- 安卓手机里的文件和照片与Mac互传的办法
-
因为HandShake一段时间未更新，似乎目前不可操作。我一时间未找到更好的「传输」办法，经实践操作，向大家介绍一下「安卓手机」，包括「一加」、「索尼」，都可用此方法，来进行文件传输到Mac的...
- 软网推荐:同一个平台选择不同的传输方法
-
平时上网的时候，我们经常要分享一些文件给其他朋友，一般通过云服务平台来实现。今天笔者给大家介绍的Worksphere传输服务，它提供了两种不同的分享方式，方便我们根据实际需要进行选择。一个链接分享所有...
- 跨平台不限速的免费文件传输网站（跨平台不限速的免费文件传输网站是什么）
-
大家好，欢迎来到天天惠分享，不知道各位平时都是用什么方法来进行文件跨平台传输的呢？是百度网盘?微信还是QQ?亦或是有线传输。虽然这些方法都可以达到传输的目的，但都有各自的缺陷，使用起来一言难尽。比如百...
- 全网最全最详细的全平台文件传输方法，解决你文件传输问题(一)
-
前言想必现在大多数人文件传输的方法还是使用qq微信，但是qq微信的文件传输有时候真是，...
- 文件传输工具有哪些?这3款堪称办公必备!
-
在不同设备间，想把文件从一台设备传输到另一台，尤其是大体积文件，更是免不了用到文件传输工具，可以说文件传输工具已成为提升效率的关键载体。面对海量文档、设计素材、会议纪要的流转需求，传统邮件附件、U盘拷...
- 小白也能用的跨网文件交换系统!10款简单易上手的文件摆渡工具
-
跨网文件交换系统对于需要频繁在不同网络环境中进行文件共享的用户来说至关重要。以下是10款简单易上手的文件摆渡工具，适合小白用户使用，帮助他们高效地分享和传输文件。10款简单易上手的跨网文件交换工具1....
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- navicat无法连接mysql服务器 (65)
- 下横线怎么打 (71)
- flash插件怎么安装 (60)
- lol体验服怎么进 (66)
- ae插件怎么安装 (62)
- yum卸载 (75)
- .key文件 (63)
- cad一打开就致命错误是怎么回事 (61)
- rpm文件怎么安装 (66)
- linux取消挂载 (81)
- ie代理配置错误 (61)
- ajax error (67)
- centos7 重启网络 (67)
- centos6下载 (58)
- mysql 外网访问权限 (69)
- centos查看内核版本 (61)
- ps错误16 (66)
- nodejs读取json文件 (64)
- centos7 1810 (59)
- 加载com加载项时运行错误 (67)
- php打乱数组顺序 (68)
- cad安装失败怎么解决 (58)
- 因文件头错误而不能打开怎么解决 (68)
- js判断字符串为空 (62)
- centos查看端口 (64)