乐趣区

关于前端:20-css高频实用片段提高幸福感的小技能你可以拥有噢

jiezi

前言

批改 input placeholder 款式 、 多行文本溢出 、 暗藏滚动条 、 批改光标色彩 、 程度垂直居中… 如许相熟的性能呀！前端童鞋简直每天都会和他们打交道，一起来总结咱们的 css 幸福小片段吧！下次不必百度、不必谷歌，这里就是你的港湾。

点击查看源码地址”继续更新中“

1. 解决图片 5px 间距

你是否常常遇到图片底部莫名其妙多进去 5px 的间距，不急，这里有 4 种形式让它隐没

计划 1：给父元素设置font-size: 0

成果

html

<div class="img-container">
  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F05%2F20200205093101_yfocq.png&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636215521&t=203563292576c66ba434651680281e8a" alt="">
</div>

css


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

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

img{width: 100%;}

计划 2：给 img 设置display: block

成果同上

html

<div class="img-container">
  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F05%2F20200205093101_yfocq.png&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636215521&t=203563292576c66ba434651680281e8a" alt="">
</div>

css


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

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

img{
  width: 100%;
  /* 要害 css*/
  display: block;
}

计划 3：给 img 设置vertical-align: bottom

成果同上

html

<div class="img-container">
  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F05%2F20200205093101_yfocq.png&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636215521&t=203563292576c66ba434651680281e8a" alt="">
</div>

css


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

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

img{
  width: 100%;
  /* 要害 css*/
  vertical-align: bottom;
}

计划 4：给父元素设置line-height: 5px;

成果同上

html

<div class="img-container">
  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F05%2F20200205093101_yfocq.png&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636215521&t=203563292576c66ba434651680281e8a" alt="">
</div>

css


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

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

img{width: 100%;}

2. 元素高度追随窗口

有时候心愿某个元素的高度和窗口是统一的，如果用百分比设置，那 html、body 等元素也要跟着一顿设置 height: 100% 有没有更简略的办法呢？

成果

html

<div class="app">
  <div class="child"></div>
</div>

css

*{
  margin: 0;
  padding: 0;
}

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

3. 批改 input placeholder 款式

第一个是通过改写的 placeholder，第二个是原生的

成果

html

<input type="text" class="placehoder-custom" placeholder="请输出用户名搜寻">
<input type="text" placeholder="请输出用户名搜寻">

css


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

4. 巧用 not 选择器

有些状况下 所有 的元素都须要某些款式，唯独 最初一个 不须要，这时候应用 not 选择器将会特地不便

如下图：最初一个元素没有下边框

成果

html

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

要害 css


li:not(:last-child){border-bottom: 1px solid #ebedf0;}

5. 应用 flex 布局实现智能固定底部

内容不够时，规定阐明 要处于底部，内容足够多时，规定阐明 随着内容往下沉，大家肯定也遇到过相似的需要，应用 flex 奇妙实现布局。

html

<div class="container">
  <div class="main"> 我是内容区域 </div>
  <div class="footer"> 规定阐明 </div>
</div>

css

 .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;
}

6. 应用 caret-color 扭转光标色彩

在做表单相干需要的时候，有时候须要批改一闪一闪光标的色彩。caret-color属性完满反对这个需要。

html

<input type="text" class="caret-color" />

css

.caret-color {
  /* 要害 css */
  caret-color: #ffd476;
}

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

默认状况下 input type="number" 时尾部会呈现小箭头，然而很多时候咱们想去掉它，应该怎么办呢？

如图：第一个输入框没有去掉小箭头的成果，第二个去掉了。

成果

html

<input type="number" />
<input type="number" class="no-arrow" />

css


/* 要害 css */
.no-arrow::-webkit-outer-spin-button,
.no-arrow::-webkit-inner-spin-button {-webkit-appearance: none;}

8. outline:none移除 input 状态线

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

成果

如图：第一个输入框移除了，第二个没有移除

html

<input type="number" />
<input type="number" class="no-arrow" />

css


.no-outline{outline: none;}

9. 解决 IOS 滚动条卡顿

在 IOS 机器上，常常遇到元素滚动时卡顿的状况，只须要一行 css 即可让其反对弹性滚动

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

10. 画三角形

成果

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>

css


.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;}

11. 画小箭头

成果

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>

css


  .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);
  }

12. 图片尺寸自适应

vw vs padding

成果

html

<div class="box">
  <div class="img-container">
    <img src="https://i0.hippopx.com/photos/179/171/625/sparkler-holding-hands-firework-preview.jpg" alt="">
  </div>
</div>

<div class="box">
  <div class="img-container">
    <img src="https://i0.hippopx.com/photos/179/171/625/sparkler-holding-hands-firework-preview.jpg" alt="">
  </div>
</div>

<div class="box-vw">
  <div class="img-container">
    <img src="https://i0.hippopx.com/photos/179/171/625/sparkler-holding-hands-firework-preview.jpg" alt="">
  </div>
</div>

css

.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%;}

13. 暗藏滚动条

第一个能够看到滚动条，第二个已暗藏了

成果

留神 这里指的是容器能够滚动，然而滚动条好像通明一样被暗藏
html

<div class="box">
  <div>
    恋情会来到，敌人会来到，高兴会来到，然而考试不会, 因为你不会就不会
  </div>
</div>

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

css


.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;
}

14. 自定义文本选中的款式

第一个是默认选中状态，第二个是自定义选中状态

成果

html

<div class="box">
  <p class="box-default">
    昨天遇见小学同学，没有想到他混的这么差 -- 只放了一块钱到我的碗里
  </p>
  <p class="box--custom">
    往年情人节，不出意外的话，一个人过，出意外的话 -- 去医院过
  </p>
</div>

css

.box-custom::selection {
  color: #ffffff;
  background-color: #ff4c9f;
}

15. 禁止抉择文本

第一个能够选中，第二个无奈选中

成果

html

 <div class="box">
  <p> 好不容易习惯了本人的长相 -- 去理了个发，又换了一种丑法 </p>
  <p> 国庆节放假，想跟女朋友去游览，请大家帮忙举荐下 -- 哪里有女朋友 </p>
</div>

css


.box p:last-child{user-select: none;}

16. 程度垂直居中

成果


html

<div class="parent">
  <p class="child"> 每次长期抱佛脚的时候 -- 佛祖他总是给我一脚 </p>
</div>

css

.parent{
  padding: 0 10px;
  background-color: #f5f6f9;
  height: 100px;
  border-radius: 6px;
  font-size: 14px;
  // 以下是程度垂直居中要害代码
  display: flex;
  align-items: center;
  justify-content: center;
}

17. 单行文本溢出显示省略号

这个点估计全世界的前端都晓得如何写，所以还是看为您筹备的笑话乐一乐更有价值。

成果

html

<p class="one-line-ellipsis"> 不要轻易向命运抬头，因为一抬头就会看到赘肉 如果你违心一层一层剥开我的心 </p>

css

.one-line-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* 非必须，只是为了制作一行放不下的成果 */
  max-width: 375px; 
}

18. 多行文本溢出显示省略号

示例

html

<p class="more-line-ellipsis"> 上帝对人都是偏心的给了你丑表面 -- 也会配给你低智商 如果你违心一层一层剥开我的心，你会发现 -- 我缺心眼啊！</p>

css

.more-line-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 设置 n 行，也包含 1 */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

19. 革除浮动

一个好像有年代感的布局形式😄。当初挪动端应该大部分不采纳该布局形式了。

从图中能够看出，外层高度并未塌陷，就是应用了 clearfix 类的起因

成果

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>

css

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

20. 应用 filter:grayscale(1)使网页出现哀悼模式

平凡的革命先烈们为咱们祖国的诞生做出了微小的就义，在相应节日里，咱们的站点会出现灰色哀悼模式，以此来留念先烈们。

成果

css

body{filter: grayscale(1);
}
退出移动版