css提效技巧

渐变文字

修改 media defaults

编写css重置时，添加这些属性以改善媒体默认值。

img, picture, video, svg {
    max-width: 100%;
    object-fit: contain;  /* preserve a nice aspect-ratio */
}

column count

p {
    column-count: 3;
    column-gap: 5rem;
    column-rule: 1px solid salmon; /* border between columns */
}

使用 position 居中元素

div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

逗号分隔的列表

li:not(:last-child)::after {
    content: ',';
}

平滑的滚动

html {
    scroll-behavior: smooth;
}

hyphens

hyphens 告知浏览器在换行时如何使用连字符连接单词。可以完全阻止使用连字符，也可以控制浏览器什么时候使用，或者让浏览器决定什么时候使用。

可选值：none | nanual | auto

first-letter

避免不必要的 span ，并使用伪元素来设计你的内容，同样第一个字母的伪元素，我们还有第一行的伪元素。

h1::first-letter {
    color:#ff8A00;
}

accent-color

accent-color 属性能够使用自定义颜色值重新着色浏览器默认样式提供的表单控件的强调颜色。

Image filled text

placeholder 伪元素

使用 placeholder 伪元素来改变 placeholder 样式：

input::placeholder{
    font-size: 1.5em;
    letter-spacing: 2px;
    color: green;
    text-shadow: 1px 1px 1px black;
}

colors 动画

使用颜色旋转滤镜改变元素颜色。

button{
    animation: colors 1s linear infinite;
}

@keyframes colors {
    0%{
        filter: hue-rotate(0deg);
    }
    100%{
        filter: hue-rotate(360deg);
    }
}

clamp() 函数

clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。

h1{
    font-size: clamp(5.25rem,8vw,8rem);
}

selection 伪类

设置选中元素的样式。

::selection {
    color: coral;
}

decimal leading zero

将列表样式类型设置为十进制前导零。

li{
    list-style-type:decimal-leading-zero;
}

自定义光标

html{
    cursor:url('no.png'), auto;
}

caret-color

caret-color 属性用来定义插入光标（caret）的颜色，这里说的插入光标，就是那个在网页的可编辑器区域内，用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。

only-child

CSS伪类 :only-child 匹配没有任何兄弟元素的元素。等效的选择器还可以写成 :first-child:last-child 或者 :nth-child(1):nth-last-child(1) ,当然,前者的权重会低一点.

使用 grid 居中元素

.parent {
    display: grid;
    place-items: center;
}

text-indent

text-indent 属性能定义一个块元素首行文本内容之前的缩进量。

p {
    text-indent: 5.275rem;
}

list style type

CSS 属性 list-style-type 可以设置列表元素的 marker（比如圆点、符号、或者自定义计数器样式）。

li {
    list-style-type: '🟧';
}

解决 img 5px 间距的问题

.img-container {
    font-size: 0;
}

将 img 元素设置为 display: block

img {
    display: block;
}

将 img 元素设置为 vertical-align: bottom

img {
    vertical-align: bottom;
}

给父元素设置 line-height: 5px

.img-container {
    line-height: 5px
}

元素的高度与 window 的高度相同

使用 height: 100vh;

使用 :not 选择器

除了最后一个元素外，所有元素都需要一些样式，使用 not 选择器非常容易做到。

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

删除 type="number" 末尾的箭头

默认情况下，在type="number"的末尾会出现一个小箭头，但有时我们需要将其删除。我们应该怎么做呢？

.no-arrow::-webkit-outer-spin-button,
.no-arrow::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

隐藏滚动条

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

不允许选择文本

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

单行文本溢出时显示省略号

p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 375px;
}

多行文本溢出时显示省略号

p {
    overflow: hidden;
    text-overflow: ellipsis;

    display: -webkit-box;
    /* set n lines, including 1 */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

使用 "filter:grayscale(1)"，使页面处于灰色模式

body {
    filter: grayscale(1);
}

中英文自动换行


p{
  word-wrap: break-word;
  white-space: normal;
  word-break: break-all;
}
//不换行
.wrap {
  white-space:nowrap;
}
//自动换行
.wrap {
  word-wrap: break-word;
  word-break: normal;
}
//强制换行
.wrap {
  word-break:break-all;
}

设置placeholder的字体样式

input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: red;
}
input::-moz-placeholder { /* Firefox 19+ */
  color: red;
}
input:-ms-input-placeholder { /* IE 10+ */
  color: red;
}
input:-moz-placeholder { /* Firefox 18- */
  color: red;
}

解决IOS页面跳卡顿

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

设置滚动条样式


.test::-webkit-scrollbar{
  /*滚动条整体样式*/
  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.test::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius   : 10px;
  background-color: skyblue;
  background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
  );
}
.test::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #ededed;
  border-radius: 10px;
}

实现隐藏滚动条同时又可以滚动

.demo::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.demo {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}

CSS实现文本节点形象

.wrap {
    text-align: justify;
    text-justify: distribute-all-lines;  //ie6-8
    text-align-last: justify;  //一个块或行的最后一行对齐方式
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
}

使元素鼠标事件失效

.wrap {
  // 如果按tab能选中该元素，如button，然后按回车还是能执行对应的事件，如click。
 pointer-events: none;
 cursor: default;
}

禁止用户选择

.wrap {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

使用硬件加速

老方式

.wrap {
    transform: translateZ(0);
}

新方式

.wrap {
    /* will-change: transform, opacity; */
    will-change: all;
}

页面动画出现问题

在 Chrome 和 Safari 中，当我们使用 CSS 转换或者动画时可能会有页面闪烁的效果，下面的代码可以修复此情况：

.cube {
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;

   -webkit-perspective: 1000;
   perspective: 1000;
   /* Other transform properties here */
}

在webkit内核的浏览器中，另一个行之有效的方法是

.cube {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
  /* Other transform properties here */
}

删除转换闪屏

.wrap {
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

识别字符串里的'\n'并换行

body {
   white-space: pre-line;
}

移除一个标签被点链接的边框

a {
  outline: none；//或者outline: 0
  text-decoration:none; //取消默认下划线
}

CSS显示链接之后的URL

<a href="https://mankeung.github.io/docs/mk-data">在线文档</a>
<style>
a:after {content: " (" attr(href) ")";}
</style>

修改输入输入细节的颜色不改变的颜色

input{
    color:  #fff;
    caret-color: red;
}

子元素固定宽度父元素宽度被撑开

// 父元素下的子元素是行内元素
.wrap {
  white-space: nowrap;
}
// 若父元素下的子元素是块级元素
.wrap {
  white-space: nowrap;  // 子元素不被换行
  display: inline-block;
}

实现立体字的效果

<div class="text_solid"> mkimq在线文档，记录工作学习前端问题。</div>
<style>
.text_solid{
    font-size: 32px;
    text-align: center;
    font-weight: bold;
    line-height:100px;
    text-transform:uppercase;
    position: relative;
  background-color: #333;
    color:#fff;
    text-shadow:
    0px 1px 0px #c0c0c0,
    0px 2px 0px #b0b0b0,
    0px 3px 0px #a0a0a0,
    0px 4px 0px #909090,
    0px 5px 10px rgba(0, 0, 0, 0.6);
}
</style>

屏背景图片的实现

.swper{
  background-image: url(./img/bg.jpg);
  width:100%;
  height:100%;//父级高不为100%请使用100vh
  zoom: 1;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
}

实现文字描边的2种方法

.stroke {
    -webkit-text-stroke: 1px greenyellow;
    text-stroke: 1px greenyellow;
}


.stroke {
    text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
    -webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
    -moz-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
    *filter: Glow(color=#000, strength=1);
}

解决1px边框变粗的问题

.dom{
  height: 1px;
  background: #dbdbdb;
  transform:scaleY(0.5);
}

CSS实现文字模糊

.vague_text{
  color: transparent;
  text-shadow: #111 0 0 5px;
}

图片object-fit

当图片带不固定时间，想要让图片整体，一般都用background-size:cover/contain，但这个只适用于背景图。缩放的问题。使用的提前条件：图片的父级容器宽高。

img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

填充：默认值。内容拉伸填满整个内容框，不保证保持原有的比例。

包含：边保持边长和长度中的那条长度，等比缩放，可能会留白。

封面：保持原有的空间长度。宽度和高度中长度一致，长的部分等比缩放。可能部分区域不可见。（经常）

无：保持原有的保留比例。保持同时替换内容的原始尺寸大小。

按比例缩小：保持原有尺寸大小，如果容器尺寸较大，图片内容尺寸不变，保持图片的尺寸不变，不会放大缩小；容器尺寸较小的图片内容尺寸不变，最能容纳。

行内标签元素出现空白问题

方式一：父级font-size设置为0

.father{
  font-size:0;
}

方式二：父元素上设置word-spacing的有合适的值

.father{
   word-spacing:-2px
}

其他方案：1将行内元素写为1行（会影响布局）；2行（会影响布局）。

解决vertical-align属性不生效

在使用vertical-align:middle实现垂直居中的时候，经常会发现不生效的情况。

作用环境：父元素设置line-height。需要和高度一致。将显示属性设置为表格单元，将块元素转化为单元格。作用对象：子元素中的inline-block和inline元素。

<div class="box">
  <img src=".\test.jpg"/>
  <span>内部文字</span>
</div>
<style>
.box{
  width:300px;
  line-height: 300px;
  font-size: 16px;
}
.box img{
  width: 30px;
  height:30px;
  vertical-align:middle
}
.box span{
  vertical-align:middle
}
</style>

负边距使用技巧

规律: 左为负时，是左移，右为负时，是左拉。上下与左右类似

<style>
*{
    margin:0;
    padding:0;
}
.wrap{
    /* 利用负值技巧进行整体移动 */
    margin-left:-6px;
}
.item{
    float:left;
    width: 20%;
    height: 300px;
    border-left:6px solid #fff;
    box-sizing: border-box;
}
</style>

<div class="wrap">
    <div class="item" style="background-color: red;"></div>
    <div class="item" style="background-color: green;"></div>
    <div class="item" style="background-color: yellow;"></div>
    <div class="item" style="background-color: pink;"></div>
    <div class="item" style="background-color: green;"></div>
</div>

定位同时设置方位情况

规律: 绝对定位和固定定位时，同时设置 left 和 right 等同于隐式地设置宽度

<style>
span{
  border:1px solid red;
  position: absolute;
  left:0;
  right:0;
   /* 等同于设置  width:100%;display:block */
}
</style>

<span>1</span>

相邻兄弟选择器之常用场景

ul{
  width: 500px;
    margin:auto;
    list-style: none;
    padding:0;
    border:1px solid red;
    text-align: center;
}
li+li{
    border-top:1px solid red;
}

<ul>
  <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

outline属性的妙用技巧

区别: outline不计算大小 border计算大小

* {
    padding: 0;
    margin: 0;
  }

  ul {
    list-style: none;
    width: 600px;
    margin: auto;
  }

  li {
    padding: 10px;
    border: 10px solid pink;
    outline-offset: -10px;
  }
  li+li{
    margin-top:-10px;
  }
  li:hover{
    /* border:10px solid gold; */
    outline:10px solid gold;
  }

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

隐藏文本的常用两种方法

text-indent: -9999px; 或者 font-size: 0;

表格边框合并

table{
  border-collapse: collapse;
}

# css提效技巧

# 渐变文字

# 修改 media defaults

# column count

# 使用 position 居中元素

# 逗号分隔的列表

# 平滑的滚动

# hyphens

# first-letter

# accent-color

# Image filled text

# placeholder 伪元素

# colors 动画

# clamp() 函数

# selection 伪类

# decimal leading zero

# 自定义光标

# caret-color

# only-child

# 使用 grid 居中元素

# text-indent

# list style type

# 解决 img 5px 间距的问题

# 元素的高度与 window 的高度相同

# 使用 :not 选择器

# 删除 type="number" 末尾的箭头

# 隐藏滚动条

# 不允许选择文本

# 单行文本溢出时显示省略号

# 多行文本溢出时显示省略号

# 使用 "filter:grayscale(1)"，使页面处于灰色模式

# 中英文自动换行

# 设置placeholder的字体样式

# 解决IOS页面跳卡顿

# 设置滚动条样式

# 实现隐藏滚动条同时又可以滚动

# CSS实现文本节点形象

# 使元素鼠标事件失效

# 禁止用户选择

# 使用硬件加速

# 页面动画出现问题

# 删除转换闪屏

# 识别字符串里的'\n'并换行

# 移除一个标签被点链接的边框

# CSS显示链接之后的URL

# 修改输入输入细节的颜色不改变的颜色

# 子元素固定宽度父元素宽度被撑开

# 实现立体字的效果

# 屏背景图片的实现

# 实现文字描边的2种方法

# 解决1px边框变粗的问题

# CSS实现文字模糊

# 图片object-fit

# 行内标签元素出现空白问题

# 解决vertical-align属性不生效

# 负边距使用技巧

# 定位同时设置方位情况

# 相邻兄弟选择器之常用场景

# outline属性的妙用技巧

# 隐藏文本的常用两种方法

# 表格边框合并