开发效率创新高，只因收下了这波 CSS 操作

首先不管你承不承认干前端这一行除了没 bug 还需要界面美观度达到一定的值。否则是不可能让你通过的，这篇文章不是讲如何用 css 做酷炫的效果，比如实现个三角形、多边形、土星的。这里写的都是最普通的常用的操作，例如如何快速重置默认样式，如何实现文字最多只有三行，超过三行省略显示，这里总结的是平常非常常见的操作但是比起设置元素的宽、高、颜色、字体又没那么好记忆。于是我帮你分门类别的记录了一下

经常使用，又记不住的 CSS 样式

1. 快速重置表单元素 unset

原始的 button 按钮要重置挺麻烦的。洋洋洒洒的要设置好几个属性，就像下面这样：

button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  outline: none;
  padding: 0;
}

其实你只需要这样就可以(像平时用的特别多的 input textarea )：

button { all: unset; }

 

2.文本省略号显示

文本省略号是非常常见的需求，而省略号展示又通常分为俩种情况折行和不折行。不折行：

div {  
  white-space:nowrap;/* 规定文本是否折行 */  
  overflow: hidden;/* 规定超出内容宽度的元素隐藏 */
  text-overflow: ellipsis;
  /* 规定超出的内容文本省略号显示，通常跟上面的属性连用，因为没有上面的属性不会触发超出规定的内容 */
}

折行(能主动控制行数,这里设置的超出 4 行显示省略号)：

div {      
  overflow: hidden;      
  text-overflow: ellipsis;      
  display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */      
  -webkit-line-clamp: 4; /* 控制最多显示几行 */      
  -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */    
}

 

3.改变盒模型的宽高计算方式

默认：盒模型的宽高 = 内容宽 + padding + border

通常我们写页面的时候会直接固定好元素的宽高，后面才会在接着设置 padding，border 这些细节。然后设置了 padding，border 之后发现元素尺寸发生了变化，这种情况很是烦人，所以我们需要下面的理想情况↓

理想: 盒模型直接设置的宽为最终宽，不会随  padding，border 改变

box-sizing:border-box;

4.改变滚筒条样式

首先要明确滚筒条的组成分为三个部分，滚动条容器 scrollbar, 滚筒条轨道 scrollbar-track,滚动条滑块 scrollbar-thumb。然而我写这篇文字的时候尝试了一下轨道的内容可以直接在容器设置，也就是没有清晰的区分容器和轨道之间的区别，有知道的同学还麻烦告知，谢谢。

div::-webkit-scrollbar {
  /* 这里的宽是指竖向滚动条的宽，高是指横向滚动条的高*/      
  width: 16px;      
  height: 16px;      
  background: pink;    
}
div::-webkit-scrollbar-thumb {      
  border-radius: 10px;      
  background: 
  linear-gradient(red,orange);    
}

 

5.最后一个 div 不显示下边框

div:not(:last-child) /* 匹配非最后一个 div 元素的 div 元素 */

6.设置文本俩端对齐

div {  
width: 100px;  
padding: 0 10px;  
background: pink;  
margin-bottom: 10px;  
text-align-last:justify; /* 这是关键属性 */
}

<div>账号</div>
<div>密码设置</div>
<div>手机号</div>

 

7.规定图像展示方式

显示图片的时候会遇到这种问题，对面返回的图片宽高比例是不一样的。但是设置的容器大小是一样的，这个时候需要让图片保持比例最大填充容器。

object-fit：fill | contain | cover | none | scale-down

具体的例子可以看这个：https://codepen.io/pen/?&editable=true

总结

这些是使用场景特别多的不易记录的技巧，如果想看更多的骚操作可以看这篇文章：

https://juejin.im/post/5d4d0ec651882549594e7293

常用的几种布局方式

布局最常用的就是垂直居中，水平居中的实现。然后元素分为块状元素和行内元素，因此导致实现的方式大有不同，所以我来帮你归归类

1.行内元素

让行内元素垂直居中对其你肯定知道只要设置行高=包裹元素的高度，text-align=center即可。那如果是不同字体大小的行内元素放在同一个水平线上呢？

可以很明显看到大号字体是垂直居中了，小号字体并没有垂直居中。要想居中内就要用到 vertical-align 属性了。这个属性用起来是有区别于正常的顶对齐，底对其的，讲解这个不在本篇文章的范围，不过我帮你找了俩片文章好让你轻松理解。

https://blog.csdn.net/fe_dev/article/details/75948659

https://www.cnblogs.com/rainman/archive/2011/08/05/2128068.html

上面的行内元素垂直居中的场景还是蛮多的，像图片跟文字组合。像字体图表跟文字组成的按钮，像付款的时候金额永远标红并且字号要大

2.块元素

1.将块元素变为行内元素，继续沿用上文的方式进行垂直居中

2.变为 flex 布局。设置主轴和交叉轴垂直

align-items:center
justify-content:center

3.采用定位，这种方式多见于做一些提示框。并且通常都根据浏览器定位的比较多

position:absolute
top:50%
left:50%
transfrom:translate(-50%, -50%)

总结

专门写垂直居中布局的文章列举的花样是我这个的好几倍，但我这边不是为了增加记忆负担。只分析最长见得情况，用最朴素的代码实现最简单的效果快速交付

样式提高

自从 css3 出来之后涌现了大量简单实用的技巧，界面开始加入的渐变、阴影、旋转、动画也越来越多。所以这些属性不仅仅要知道，还要更好的投入实战当中。

1.渐变

线性渐变

/* 第一个参数俩种形式一种是角度另一正是英文描述例如: to left, to right */
/* 语法, [] 中的内容为一组， + 代表内容能够出现 1 - N 次 */
background: liner-gradient([angle]+, color-stop[, color-stop]+)
/* 举例 */
background: linear-gradient(0deg, red, blue, ...)

 

渐变当中最简单的渐变,可以设置多种颜色，颜色之间的渐变距离是等分的。需要注意的是渐变方向的问题。你可以理解为角度指向的方向就是定义最后颜色的方向。

重复线性渐变

/* 单位不仅仅局限于百分比，像素也是可以的 */
background: repeating-linear-gradient(45deg, white, white 10%, black 10%, black 20%)

可以看出来它能够控制渐变的范围，是 linear-gradient 的升级版。不加范围效果跟 linear-gradient 是一样的。而这个属性使用的整个难度也都在范围上。但其实你稍加注意一下这些规则就没问题了。

• radial-gradient(circle, red, blue, green);开始和结束，不设置百分比分别代表 0% 和 100%
• 最后设置的百分比代表一组的位置，比如 20% 。代表能够重复 5 组
• 想要没渐变，可以重复设置相同的颜色值，上图的意思就是 0-10% 设置白色 10%-20% 设置黑色就可以实现没有渐变的颜色

径向渐变

这个语法蛮复杂的，贴一下 MDN 上的语法

看懂这个需要注意几个限定符和特殊字符（语法跟正则挺像）

• + 匹配 1-N 次
• ？匹配 0-1 次
• | 或者
• {2} 匹配俩次，正好俩次，多了少了都不行

background: radial-gradient(circle closest-corner at 50% 50%, red, blue, green);

重复径向渐变

/* 关键词*/
repeating-radial-gradient

跟重复径向渐变差不多，就不过多叙述了

2.阴影

box-shadow:[inset] offset-x offset-y color [, [inset] x-shadow y-shadow color]+

• inset 控制是内 / 外阴影。不填外阴影，填了内阴影
• offset-x 可正可负，正值在右边，负值在左边
• offest-y 可正可负，正值在下边，负值在右边
• color 颜色
• 上面的可以重复设置

box-shadow: -10px 0 10px red, 
            10px 0 10px yellow, 
            0 -10px 10px blue, 
            0 10px 10px green;

 

 

总结

这篇文章给我的总体感觉并不怎么突出主题，除了上面的第一部分经常使用又记不住的 css 感觉还可以。剩下的并没有太多心意，但是给自己定的每周一篇的目标又必须完成，所以只能先发表后期在完善了。广大同学如果有好的意见还请多多评论。有喜欢用微信看文章的可以关注一波我的公众号《点滴前端》