【工具方法】20+CSS高频实用片段

6448次阅读 454人点赞 作者: WuBin 发布时间: 2021-10-08 14:28:26
扫码到手机查看

第一部分

github: https://github.com/qianlongo/hot-styles

解决图片5px间距

你是否经常遇到图片底部莫名其妙多出来5px的间距,不急,这里有4种方式让它消失。

方案1:给父元素设置font-size: 0

<div class="img-container">
  <img src="http://statics.qdxin.cn/uploadfile/2021/0926/20210926032801196.jpg">
</div>
html,body{
  margin: 0;
  padding: 0;
}

.img-container{
  background-color: lightblue;
  font-size: 0;
}

img{
  width: 100%;
}

方案2:给img设置display: block

html,body{
  margin: 0;
  padding: 0;
}

.img-container{
  background-color: lightblue;
}

img{
  width: 100%;
  /*关键css*/
  display: block;
}

方案3:给img设置vertical-align: bottom

html,body{
  margin: 0;
  padding: 0;
}

.img-container{
  background-color: lightblue;
}

img{
  width: 100%;
  /*关键css*/
  vertical-align: bottom;
}

方案4:给父元素设置line-height: 5px;

html,body{
  margin: 0;
  padding: 0;
}

.img-container{
  background-color: lightblue;
  /*关键css*/
  line-height: 5px;
}

img{
  width: 100%;
}

效果:http://code.wubin.work/code/css/20-hot-styles/22.图片5px问题.html

元素高度跟随窗口

有时候希望某个元素的高度和窗口是一致的,如果用百分比设置,那html、body等元素也要跟着一顿设置height: 100%有没有更简单的方法呢?

<div class="app">
  <div class="child"></div>
</div>
*{
  margin: 0;
  padding: 0;
}

.child{
  width: 100%;
  /*关键css*/
  height: 100vh;
  background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);
}

效果:http://code.wubin.work/code/css/20-hot-styles/23.跟随窗口高度.html

修改input placeholder样式

第一个是经过改写的placeholder,第二个是原生的。

<input type="text" class="placehoder-custom" placeholder="请输入用户名搜索">
<input type="text" placeholder="请输入用户名搜索">
input{
  width: 300px;
  height: 30px;
  border: none;
  outline: none;
  display: block;
  margin: 15px;
  border: solid 1px #dee0e9;
  padding: 0 15px;
  border-radius: 15px;
}

.placehoder-custom::-webkit-input-placeholder{
  color: #babbc1;
  font-size: 12px;
}

效果:http://code.wubin.work/code/css/20-hot-styles/10-修改placehoder样式.html

巧用not选择器

有些情况下所有的元素都需要某些样式,唯独最后一个不需要,这时候使用not选择器将会特别方便。

<ul>
    <li>
      <span>单元格</span>
      <span>内容</span>
    </li>
    <li>
      <span>单元格</span>
      <span>内容</span>
    </li>
    <li>
      <span>单元格</span>
      <span>内容</span>
    </li>
    <li>
      <span>单元格</span>
      <span>内容</span>
    </li>
</ul>
li:not(:last-child){
  border-bottom: 1px solid #ebedf0;
}

效果:http://code.wubin.work/code/css/20-hot-styles/17.巧用not选择器.html

使用flex布局实现智能固定底部

内容不够时,规则说明要处于底部,内容足够多时,规则说明随着内容往下沉,大家一定也遇到过类似的需求,使用flex巧妙实现布局。

<div class="container">
  <div class="main">我是内容区域</div>
  <div class="footer">规则说明</div>
</div>
 .container{
  height: 100vh;
  /* 关键css处 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main{
  /* 关键css处 */
  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;
}

效果:http://code.wubin.work/code/css/20-hot-styles/18.一直处于底部的规则说明.html

使用caret-color改变光标颜色

在做表单相关需求的时候,有时候需要修改一闪一闪光标的颜色。caret-color属性完美支持这个需求。

<input type="text" class="caret-color" />
.caret-color {
  /* 关键css */
  caret-color: #ffd476;
}

效果:http://code.wubin.work/code/css/20-hot-styles/19.改变光标颜色.html

第二部分

移除type="number"尾部的箭头

默认情况下input type="number"时尾部会出现小箭头,但是很多时候我们想去掉它,应该怎么办呢?

<input type="number" />
<input type="number" class="no-arrow" />
/* 关键css */
.no-arrow::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

效果:http://code.wubin.work/code/css/20-hot-styles/20.移出input为number时的小箭头.html

outline:none移除input状态线

输入框选中时,默认会带蓝色状态线,使用outline:none一键移除

<input type="number" />
<input type="number" class="no-outline" />
.no-outline{
  outline: none;
}

效果:http://code.wubin.work/code/css/20-hot-styles/21.移出状态线.html

解决IOS滚动条卡顿

在IOS机器上,经常遇到元素滚动时卡顿的情况,只需要一行css即可让其支持弹性滚动。

body,html{   
  -webkit-overflow-scrolling: touch;
}

效果:http://code.wubin.work/code/css/20-hot-styles/14-解决ios卡顿.html

画三角形

<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>

.triangle {
  display: inline-block;
  margin-right: 10px;
  /* 基础样式 */
  border: solid 10px transparent;
}
  /*下*/
.triangle.bottom {
  border-top-color: #0097a7;
}
  /*上*/
.triangle.top {
  border-bottom-color: #b2ebf2;
}
/*左*/
.triangle.left {
  border-right-color: #00bcd4;
}
/*右*/
.triangle.right {
  border-left-color: #009688;
}

效果:http://code.wubin.work/code/css/20-hot-styles/12-画小三角形.html

画小箭头

<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>

  .arrow {
    display: inline-block;
    margin-right: 10px;
    /* 基础样式 */
    width: 0;
    height: 0;
    /* 基础样式 */
    border: 16px solid;
    border-color: transparent #CDDC39 transparent transparent;
    position: relative;
  }

  .arrow::after {
    content: "";
    position: absolute;
    /* 通过位移覆盖背景 */
    right: -20px;
    top: -16px;
    border: 16px solid;
    border-color: transparent #fff transparent transparent;
  }
  /*下*/
  .arrow.bottom {
    transform: rotate(270deg);
  }
  /*上*/
  .arrow.top {
    transform: rotate(90deg);
  }
  /*左*/
  .arrow.left {
    transform: rotate(180deg);
  }
  /*右*/
  .arrow.right {
    transform: rotate(0deg);
  }

效果:http://code.wubin.work/code/css/20-hot-styles/13-画小箭头.html

图片尺寸自适应

vw vs padding

<div class="box">
  <div class="img-container">
    <img src="http://statics.qdxin.cn/uploadfile/2021/0926/20210926032801196.jpg">
  </div>
</div>

<div class="box">
  <div class="img-container">
    <img src="http://statics.qdxin.cn/uploadfile/2021/0926/20210926032801196.jpg">
  </div>
</div>

<div class="box-vw">
  <div class="img-container">
    <img src="http://statics.qdxin.cn/uploadfile/2021/0926/20210926032801196.jpg">
  </div>
</div>
.box, .box-vw{
  background-color: #f5f6f9;
  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;
  /* 图片的高宽比 */
  padding-bottom: 66.620879%;
}

img{
width: 100%;
}

效果:http://code.wubin.work/code/css/20-hot-styles/15-图片固定比例.html

隐藏滚动条

注意这里指的是容器可以滚动,但是滚动条仿佛透明一样被隐藏。

<div class="box">
  <div>
    爱情会离开,朋友会离开,快乐会离开,但是考试不会,因为你不会就不会
  </div>
</div>

<div class="box box-hide-scrollbar">
  <div>只是因为在人群中多看了你一眼,你就--问我游泳健身了解一下?</div>
</div>

.box {
  width: 375px;
  overflow: scroll;
}

/* 关键代码 */
.box-hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.box > div {
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f5f6f9;
  border-radius: 6px;
  font-size: 12px;
  width: 750px;
}

效果:http://code.wubin.work/code/css/20-hot-styles/7-隐藏滚动条.html

自定义文本选中的样式

<div class="box">
  <p class="box-default">
    昨天遇见小学同学,没有想到他混的这么差--只放了一块钱到我的碗里
  </p>
  <p class="box--custom">
    今年情人节,不出意外的话,一个人过,出意外的话--去医院过
  </p>
</div>
.box-custom::selection {
  color: #ffffff;
  background-color: #ff4c9f;
}

效果:http://code.wubin.work/code/css/20-hot-styles/4-自定义文本选中的样式.html

禁止选择文本

 <div class="box">
  <p>好不容易习惯了自己的长相--去理了个发,又换了一种丑法</p>
  <p>国庆节放假,想跟女朋友去旅游,请大家帮忙推荐下--哪里有女朋友</p>
</div>
.box p:last-child{
  user-select: none;
}

效果:http://code.wubin.work/code/css/20-hot-styles/6-禁止选择文本.html

水平垂直居中

<div class="parent">
  <p class="child">每次临时抱佛脚的时候--佛祖他总是给我一脚</p>
</div>
.parent{
  padding: 0 10px;
  background-color: #f5f6f9;
  height: 100px;
  border-radius: 6px;
  font-size: 14px;
  // 以下是水平垂直居中关键代码
  display: flex;
  align-items: center;
  justify-content: center;
}

效果:http://code.wubin.work/code/css/20-hot-styles/3-水平垂直居中.html

单行文本溢出显示省略号

<p class="one-line-ellipsis">不要轻易向命运低头,因为一低头就会看到赘肉 如果你愿意一层一层剥开我的心</p>
.one-line-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* 非必须,只是为了制造一行放不下的效果 */
  max-width: 375px; 
}

效果:http://code.wubin.work/code/css/20-hot-styles/1-单行文本溢出.html

第三部分

多行文本溢出显示省略号

<p class="more-line-ellipsis">
上帝对人都是公平的给了你丑外表--也会配给你低智商 如果你愿意一层一层剥开我的心,你会发现--我缺心眼啊!
</p>
.more-line-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 设置n行,也包括1 */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

效果:http://code.wubin.work/code/css/20-hot-styles/2-多行文本.html

清除浮动

<div class="box clearfix">
  <div class="float-left"></div>
  <div class="float-left float-left2"></div>
  <div class="float-left float-left3"></div>
</div>
body {
  padding: 15px;
  color: #324b64;
}
/* 关键代码 */
.clearfix{
  zoom: 1;
}
.clearfix::after{
  display: block;
  content: '';
  clear: both;
}

.box {
  padding: 10px;
  background-color: #f5f6f9;
  border-radius: 6px;
  font-size: 12px;
}

.box >div{
  width: 29%;
  height: 100px;
}

.float-left{
  background-color: #faa755;
  float: left;
  margin-right: 10px;
}

.float-left2{
  background-color: #7fb80e;
}

.float-left3{
  background-color: #b2d235;
}

效果:http://code.wubin.work/code/css/20-hot-styles/5-清除浮动.html

使用filter:grayscale(1)使网页呈现哀悼模式

伟大的革命先烈们为我们祖国的诞生做出了巨大的牺牲,在相应节日里,我们的站点会呈现灰色哀悼模式,以此来纪念先烈们。
body{
  filter: grayscale(1);
}

简单的点点点loading动画

<div class="box"></div>
.box {
  height: 30px;
  background-color: #f5f6f9;
  border-radius: 6px;
}

.box:after {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  content: "\2026";
  /* 关键代码 */
  -webkit-animation: ellipsis 2s infinite;

  position: absolute;
  left: 50%;
  transform: translate(-50%);
}
/* 关键代码 */
@-webkit-keyframes ellipsis {
  from {
    width: 2px;
  }
  to {
    width: 15px;
  }
}

效果:http://code.wubin.work/code/css/20-hot-styles/8-简单版点点点loading.html

点赞 支持一下 觉得不错?客官您就稍微鼓励一下吧!
关键词:CSS实用片段
推荐阅读
  • uniapp实现被浏览器唤起的功能

    当用户打开h5链接时候,点击打开app若用户在已经安装过app的情况下直接打开app,若未安装过跳到应用市场下载安装这个功能在实现上主要分为两种场景,从普通浏览器唤醒以及从微信唤醒。

    9631次阅读 627人点赞 发布时间: 2022-12-14 16:34:53 立即查看
  • Vue

    盘点Vue2和Vue3的10种组件通信方式

    Vue中组件通信方式有很多,其中Vue2和Vue3实现起来也会有很多差异;本文将通过选项式API组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式。

    4323次阅读 319人点赞 发布时间: 2022-08-19 09:40:16 立即查看
  • JS

    几个高级前端常用的API

    推荐4个前端开发中常用的高端API,分别是MutationObserver、IntersectionObserver、getComputedstyle、getBoundingClientRect、requ...

    14477次阅读 949人点赞 发布时间: 2021-11-11 09:39:54 立即查看
  • PHP

    【正则】一些常用的正则表达式总结

    在日常开发中,正则表达式是非常有用的,正则表达式在每个语言中都是可以使用的,他就跟JSON一样,是通用的。了解一些常用的正则表达式,能大大提高你的工作效率。

    13539次阅读 491人点赞 发布时间: 2021-10-09 15:58:58 立即查看
  • 【中文】免费可商用字体下载与考证

    65款免费、可商用、无任何限制中文字体打包下载,这些字体都是经过长期验证,经得住市场考验的,让您规避被无良厂商起诉的风险。

    12043次阅读 966人点赞 发布时间: 2021-07-05 15:28:45 立即查看
  • Vue

    Vue3开发一个v-loading的自定义指令

    在vue3中实现一个自定义的指令,有助于我们简化开发,简化复用,通过一个指令的调用即可实现一些可高度复用的交互。

    16427次阅读 1310人点赞 发布时间: 2021-07-02 15:58:35 立即查看
  • JS

    关于手机上滚动穿透问题的解决

    当页面出现浮层的时候,滑动浮层的内容,正常情况下预期应该是浮层下边的内容不会滚动;然而事实并非如此。在PC上使用css即可解决,但是在手机端,情况就变的比较复杂,就需要禁止触摸事件才可以。

    15201次阅读 1236人点赞 发布时间: 2021-05-31 09:25:50 立即查看
  • Vue

    Vue+html2canvas截图空白的问题

    在使用vue做信网单页专题时,有海报生成的功能,这里推荐2个插件:一个是html2canvas,构造好DOM然后转canvas进行截图;另外使用vue-canvas-poster(这个截止到2021年3月...

    29907次阅读 2351人点赞 发布时间: 2021-03-02 09:04:51 立即查看
  • Vue

    vue-router4过度动画无效解决方案

    在初次使用vue3+vue-router4时候,先后遇到了过度动画transition进入和退出分别无效的情况,搜遍百度没没找到合适解决方法,包括vue-route4有一些API都进行了变化,以前的一些操...

    26002次阅读 1999人点赞 发布时间: 2021-02-23 13:37:20 立即查看
交流 收藏 目录