广州蓝景分享—实用的CSS技巧，助你成为更好的开发者

news2024/9/9 6:10:31

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/pen/QWOqLQO

除了最后一个元素之外的所有元素都需要一些样式，使用 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;
}

以上内容就是今天与大家分享的CSS知识，觉得有帮助的话，可以点下赞，关注我们。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/68730.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

HashMap部分源码解析

HashMap部分源码解析

作者&#xff1a;~小明学编程 文章专栏&#xff1a;Java数据结构 格言&#xff1a;目之所及皆为回忆&#xff0c;心之所想皆为过往 目录 前言 常量字段 构造方法 put方法 确定初始容量 为何我们的数组的大小要是2的n次幂 hash为何要异或其高位 扩容机制 前言 我们在前…
阅读更多...
极客时间Kafka - 04 Kafka生产者和消费者拦截器

极客时间Kafka - 04 Kafka生产者和消费者拦截器

文章目录1. 什么是拦截器&#xff1f;2. Kafka 拦截器3. 典型使用场景4. 案例分享1. 什么是拦截器&#xff1f; 如果你用过 Spring Interceptor 或是 Apache Flume&#xff0c;那么应该不会对拦截器这个概念感到陌生&#xff0c;其基本思想就是允许应用程序在不修改逻辑的情况…
阅读更多...
无人机边缘计算中的计算卸载——Stackelberg博弈方法论文复现附matlab代码

无人机边缘计算中的计算卸载——Stackelberg博弈方法论文复现附matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;修心和技术同步精进&#xff0c;matlab项目合作可私信。 &#x1f34e;个人主页&#xff1a;Matlab科研工作室 &#x1f34a;个人信条&#xff1a;格物致知。 更多Matlab仿真内容点击&#x1f447; 智能优化算法 …
阅读更多...
不会还有人不会热修复吧？

不会还有人不会热修复吧？

Class流派原理 基本原理:加载类的时候是找element&#xff0c;每个element对于一个dex。我要把我修复的那个类单独放到dex插入dexlist前面&#xff0c;在你做类加载从前往后找优先从你的dex加载加载的就是你修复后的class.这就是 实现代码 通过context拿到pathClassLoader&am…
阅读更多...
Qt跨平台截图工具

Qt跨平台截图工具

Qt跨平台截图工具 文章目录Qt跨平台截图工具1、概述2、实现效果3、软件构成4、关键代码5、源代码更多精彩内容&#x1f449;个人内容分类汇总 &#x1f448;&#x1f449;Qt自定义模块、工具&#x1f448; 1、概述 Qt版本&#xff1a;V5.12.5兼容系统&#xff1a; Windows&…
阅读更多...
2022，记录与华为的这场会议

2022，记录与华为的这场会议

一、数据治理团体标准发布会 11月26日&#xff0c;中国计算机用户协会信息科技审计分会联合华为与擎创科技共同举办了“金融行业运维数据治理团体标准应用研讨暨2022年度调研报告线上发布会”。来自国家开发银行、中国建设银行、中国邮政储蓄银行、招商银行、兴业银行、中信银行…
阅读更多...
【LeetCode_字符串_逻辑分析】9. 回文数

【LeetCode_字符串_逻辑分析】9. 回文数

目录考察点第一次&#xff1a;2022年12月7日10:16:33解题思路代码展示题目描述给你一个整数 x &#xff0c;如果 x 是一个回文整数&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。回文数是指正序&#xff08;从左向右&#xff09;和倒序&#xff08;从右向左…
阅读更多...
340页11万字智慧政务大数据资源平台大数据底座数据治理建设方案

340页11万字智慧政务大数据资源平台大数据底座数据治理建设方案

目 录 第一章 项目概况 1.1 项目名称 1.2 项目单位 1.3 项目建设依据 1.4 项目建设内容和目标 1.4.1 建设内容 1.4.2 建设目标 1.5 项目投资估算及建设周期 1.5.1 项目投资估算 1.5.2 服务周期 第二章 现状 2.1 项目单位概况 2.1.1 单位职责、内设及下属机构、人员…
阅读更多...
【配准图像】

【配准图像】

MU-Net: A MULTISCALE UNSUPERVISED NETWORK FOR REMOTE SENSING IMAGE REGISTRATION &#xff08;MU-Net&#xff1a;一种多尺度无监督遥感图像配准网络&#xff09; 多传感器或多模态图像对的配准是许多遥感应用的基础性任务。为了实现高精度、低成本的遥感图像配准&#x…
阅读更多...
彻底搞懂JS原型与原型链

彻底搞懂JS原型与原型链

说到JavaScript的原型和原型链&#xff0c;相关文章已有不少&#xff0c;但是大都晦涩难懂。本文将换一个角度出发&#xff0c;先理解原型和原型链是什么&#xff0c;有什么作用&#xff0c;再去分析那些令人头疼的关系。 一、引用类型皆为对象 原型和原型链都是来源于对象而…
阅读更多...
浅谈Linux内核编程规范与代码风格

浅谈Linux内核编程规范与代码风格

1 缩进 Tab的宽度是八个字符&#xff0c;因此缩进的宽度也是八个字符。有些异教徒想让缩进变成四个字符&#xff0c;甚至是两个字符的宽度&#xff0c;这些人和那些把 PI 定义为 3 的人是一个路子的。 注意&#xff1a;缩进的全部意义在于清晰地定义语句块的开始与结束&#…
阅读更多...
《MongoDB》Mongo Shell中的基本操作-删除操作一览

《MongoDB》Mongo Shell中的基本操作-删除操作一览

前端博主&#xff0c;热衷各种前端向的骚操作&#xff0c;经常想到哪就写到哪&#xff0c;如果有感兴趣的技术和前端效果可以留言&#xff5e;博主看到后会去代替大家踩坑的&#xff5e; 主页: oliver尹的主页 格言: 跌倒了爬起来就好&#xff5e; 来个关注吧&#xff0c;点个赞…
阅读更多...
分布式事务，单JVM进程与多数据库，分布式事务技术选型，0-1过程，代码全。

分布式事务，单JVM进程与多数据库，分布式事务技术选型，0-1过程，代码全。

由于很多小白程序员在单一JVM进程配合多数据库的架构环境中，总是考虑一主多从的mysql集群环境。还不知道mysql集群数据库按照表纵向分割以后，也是可以走数据库使用事务的。那么这里使用到的就是分布式事务，XA协议。现在大部分主流的数据库都支持XA协议。这里不用太多废话，直…
阅读更多...
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例（超详细必看 附源码）

【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例（超详细必看 附源码）

觉得有帮助请点赞关注收藏~~~ 一、JavaScript基础 Javascript是网页编程语言&#xff0c;决定网页元素的动作。HTML页面中通过<script></script>指定Javascript内容&#xff0c;通过//或者 /* */执行代码的备注功能&#xff0c;并且区分大小写。 1&#xff1a;变…
阅读更多...
《视觉SLAM十四讲》示例程序编译报错处理（上）

《视觉SLAM十四讲》示例程序编译报错处理（上）

高翔博士《视觉SLAM十四讲》这本书中的代码很不错&#xff0c;适合初学者。可惜有一些可能因为版本的问题会报错&#xff0c;本文总结一下我遇到的问题。 在slambook2/3rdparty文件夹git submodule update&#xff0c;这个版本是和书中的版本一致的。但我已经重新安装了新版Ei…
阅读更多...
Webpack中的高级特性

Webpack中的高级特性

自从webpack4以后&#xff0c;官方帮我们集成了很多特性&#xff0c;比如在生产模式下代码压缩自动开启等&#xff0c;这篇文章我们一起来探讨一下webpack给我们提供的高级特性助力开发。 探索webpack的高级特性 特性&#xff1a;treeShaking 顾名思义treeShaking&#xff0…
阅读更多...
C++ Reference: Standard C++ Library reference: Containers: deque: deque: swap

C++ Reference: Standard C++ Library reference: Containers: deque: deque: swap

C官网参考里链接&#xff1a;https://cplusplus.com/reference/deque/deque/swap-free/ 函数模板 <deque> std::swap (deque) template <class T, class Alloc> void swap (deque<T,Alloc>& x, deque<T,Alloc>& y); 交换两个双端队列容器的…
阅读更多...
【ESP32调试-快速入门】

【ESP32调试-快速入门】

文章目录ESP32调试一. 环境搭建二. 运行OpenOCD1. 烧入blink2. 找到芯片型号对应的脚本文件&#xff0c;并运行脚本命令三. 运行GDBESP32调试 一. 环境搭建 ESP_IDF环境搭建 二. 运行OpenOCD 1. 烧入blink 如&#xff1a;安装环境中的examples中的blink 路劲&#xff1a;安装…
阅读更多...
华为机试 - 探索地块建立

华为机试 - 探索地块建立

目录 题目描述 输入描述 输出描述 用例 题目解析 算法源码 题目描述 给一块n*m的地块&#xff0c;相当于n*m的二维数组&#xff0c;每个元素的值表示这个小地块的发电量&#xff1b; 求在这块地上建立正方形的边长为c的发电站&#xff0c;发电量满足目标电量k的地块数量…
阅读更多...
汽车保养app开发，扩充汽车服务市场发展商机

汽车保养app开发，扩充汽车服务市场发展商机

从汽车市场规模来看&#xff0c;从2017年开始始终保持增长的发展趋势&#xff0c;在2021年市场规模达到140877.18亿元。互联网时代发展下&#xff0c;汽车后市场大力推广电子商务&#xff0c;将互联网技术与汽车保养服务相结合是汽车服务行业强大的必由之路。二者的结合可以让消…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023