你不知道的CSS！

前言

在Web开发中，做为前端开发人员来说，切图、写样式、页面布局这些都最基础的，也是必须要会的，但在实际开发过程中，除了一些常用的CSS样式属性以外，还有些CSS样式属性不经常用，但是却很实用，而长时间不用就会忘记，所以在这里总结一下，以后用到时方便查阅。

---

CSS3各浏览器的属性兼容前缀：

前缀	内核	浏览器
-o-	Presto	Opera（欧朋浏览器）
-ms-	Trident	Internet Explorer（IE浏览器）
-moz-	Gecko	Firefox（火狐浏览器）
-webkit-	Webkit	Chrome（谷歌浏览器） ，Safari（苹果浏览器）
使用时直接在CSS样式属性前面加上对应的前缀即可：

.box{
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
  	-ms-border-radius: 6px;
  	-o-border-radius: 6px;
  	border-radius: 6px;
  }

如果每个CSS样式属前缀都在自己手动去加，这样太浪费时间了，可以用CSS工具插来帮助我们自动完成兼容前缀的添加。
常用的CSS工具有：less，sass，stylus，postcss，等等。

---

CSS 优先级 权重规则

# 以下是从低到高的顺序排列：

1. 通用选择器（*），如： *{margin: 0; padding: 0}
2. 元素(类型)选择器，如：b{…}
3. 类选择器，如：.box{…}
4. 属性选择器，如：input[type=“text”]{…}
5. 伪类，如：li:first-child{…}; li:last-child{…} 或 奇偶数 li:nth-child(odd){…}; li:nth-child(even){…}
6. ID 选择器，如：#box{…}
7. 内联/行内样式，如；style=“color:red”
8. !important; ，可以在以任意选择器中使用，它是加在属性值后面的！如：.box{color: red!important；}

需要注意的是：当权重相等时，后面的样式 要优于(覆盖) 前面的样式。

注：尽量不要使用!important

虽然!important的权重是最高、可以快速的解决一些样式控制问题，但最终可能会导致大量的重写。
相反，我们应该花点时间找到CSS选择器不工作的原因并更改它。唯一可以使用的!important的地方是当您想要覆盖html中的内联样式时，但是内联样式同样也是一个坏的习惯，应该尽量的避免。

b {
	color: red;
	color: blue;
}
/* 这样上面这个b标签中的文字颜色将是blue，而不是red哦！！ */

---

# 原生CSS全局变量设置：root

在Web项目开发时，页面很多很全局、共用的如：主题颜色、字体、动画等css样式都是一样的，为了避免重复性的定义 和 做到一改全自改（特别是在切换到不同主题）时，根选择器:root（结构性根元素伪类选择器） 就排上用场啦。

如果是用单页面应用开发框架 如：Vue、React、Angular等，可以直接把这个main.css(名字可自定义)导入到开发框架的主入口main.js 或 main.ts 中。
注：在:root中声明变量名时，在变量名前面至少要加上2个及以上的’–'为前缀！。

/*main.css*/
:root {
    --primary       : #3069F6;
    --success       : #2BBD6F;
    --warning       : #D58D21;
    --error         : #E54141;
    --default       : #666;
	--fontSize      : 16px;
}

在使用时，就可以在页面view 或 组件components 中的 style标签中通过var()函数调用在:root中声明的css变量啦！

p {
	color: var(--primary); /* #3069F6; */
	font-size: var(--fontSize);  /* 16px; */
}

---

css全局变量

# 禁止选中文本：user-select

有时候网页中某些文本不想被选中时，user-select就排上用场啦

p {
	-webkit-touch-callout: none;
  	-webkit-user-select: none; 
	-moz-user-select: none;
  	-ms-user-select: none;
  	-o-user-select: none;
  	user-select: none;
  	
  	/*user-select样式的属性值：
		none :  元素和子元素的文本将无法被选中
		text :  文本可以被选中
		auto :  文本将根据浏览器的默认属性进行选择
		all  :  当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素
		contain、element :  可以选择文本，但选择范围受元素边界的约束，也就是选择的文本将包含在该元素的范围内。只支持Internet Explorer
*/
}

---

# 设置文本段落第一个字样式：first-letter

设置文本段落第一个字的样式，通过first-letter选中元素后，所设置的样式只对第一个字有效，最常见的是首字下沉效果。

p:first-letter {
	color: red;
    font-size: 36px;
}

---

# 修改被选中文本的背景样式：::selection

默认情况下，在浏览器中被选中的文本是蓝色的背景，白色的文字，我们也可通过::selection来修改被选中文本的样式。

::selection {
    color: yellow;
	background: green;
}
::-moz-selection{
    color: yellow;
	background: green;
}
::-webkit-selection{
    color: yellow;
	background: green;
}

---

# 禁止鼠标点击 或 点击穿透：pointer-events

有时候网面中某些元素不想被鼠标点击，或 想点击 被某个元素遮盖住 的下面的元素时用。pointer-events 在除了指示该元素不是鼠标事件的目标之外，值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。

.box{
	pointer-events:none;   /* 如果用在表单元素上，就相当于 readonly 的效果，此时应  */ 
	
	/* 当设置 pointer-events:none; 以后：
	 1、当前的dom元素以及里面所有的子孙元素的所有鼠标事件都无效了。
	 2、事件会穿透当前层，也就是被当前元素遮盖住的元素可以交互（可以被点击之类的），因为穿透了当前元素。
	 3、如果里面的子元素 或 孙子元素 又需要保留鼠标事件时，可以在对应的子元素 或 孙子元素 上添加 pointer-events:auto 来取消鼠标事件穿透。 
	*/
}

---

# CSS版-防止按钮重复点击（模拟JS节流）：pointer-events

一般在做表单提交的时候，为了避免用户在短时间内多次重复提交、减少服务器压力等，往往需要对提效/保存按钮的点击行为做一定的限制，比如只允许在每1秒钟内提交一次。
这时候除了使用JS方式通过使节流(throttle)函数来实现以外，还可以通过CSS的方式来实现防止按钮的重复点击。

@keyframes key-throttle {
    0% {
        opacity: 0.5;
        pointer-events: none;
    }
    100% {
        opacity: initial;
        pointer-events: all;
    }
}

.btn-throttle {
    animation: key-throttle 1s step-end forwards;		/*如果需要不同的节流时间，直接修改动画的执行时间即可，1s = 1秒， 0.5s = 500毫秒*/
}

.btn-throttle:active {
    animation: none;
}

<button class="btn-throttle" onclick="console.log('我在1秒钟内只提交一次')">提交保存</button>

---

# 比pointer-events禁止得还要狠HTML5标签属性：inert

inert属性是HTMLElement的一个布尔属性，意为“惰性”，简单来说，就是可以禁用一切交互事件，如：鼠标事件（点击、选中、拖拽等），键盘事件（按下、抬起等）等

<a href="https://www.xxx.com" inert>提交保存</a>
<a href="https://www.xxx.com" inert="true">提交保存</a>
<button onclick="console.log('我的所有事件都被禁止了')" inert>提交保存</button >

---

# 放大首字(将第1个字的字号加大)：first-letter

有时候为了突出显示，需要将第一个字变大一些，可通过first-lette选取对应标签中的第一个字后改变文字大小。

/*选取p标签中的第一个字*/
p:first-letter {
   font-size: 100px;  /*字号大小自定义*/
}

---

# 在可打印的网页中显示a标签的URL地址：@media print

在打印网页中的内容时，由于a标签中的href地址(url跳转链接)默认是不可见的，如果想要在打印时显示出来，可通过@media print来实现。

@media print   {  
  a:after {  
    content: " [" attr(href) "] ";  
  }  
}

---

# 文字内容超出指定长度后显示"…"省略号：line-clamp

有时候在某些列表布局时，标题文字太长了就换行之类的，从而影响布局、美观，此时就可以把溢出的文件用省略号…代替。

/*1、单行文本内容超出指定长度后显示"..."*/
p{
	width: 200px;
	white-space: nowrap;  		/*超出的部分禁止换行*/
	text-overflow: ellipsis;  	/*超出的部分以省略号...形式出现*/
	overflow: hidden; 			/*超出的部分隐藏*/
}

/*2、多行文本内容超出指定长度后显示"..."*/
p{
	width: 200px;
	heigth: 100px;
	display: -webkit-box; 			/*值必须为-webkit-box或者-webkit-inline-box*/
	text-overflow: ellipsis;  	    /*超出的部分以省略号...形式出现*/
	overflow: hidden;				/*超出的部分隐藏*/
	-webkit-box-orient: vertical; 	/*值必须为vertical*/
	-webkit-line-clamp: 3; 			/*值为数字，表示一共显示几行*/
}

---

# 修改文本编辑区光标颜色：caret-color

就是修改 在文本可编辑器区域内如input输入框，textarea文本框等，用来指示用户的输入具体会插入到哪里的那个一闪一闪的竖杠 | 的颜色。

input{
	caret-color: red; /*将编辑器区光标设为红色*/
}

---

# 通用的透明效果：opacity

通用的跨浏览器透明效果

.transparent {
    filter: alpha(opacity=50);
    -khtml-opacity: 0.5;
    -moz-opacity: 0.5;
    opacity: 0.5;
}

---
## 去除input标签type="number"时，右侧的上下箭头
有时候，只允许用户输入数字，我们可以使用input标签type="number"可以实现，但当input框得到焦点 或鼠标移入时，在最右侧有一个上下加减的小三角形按扭。
```css
/*注：该属性未出现在CSS规范草案中，可能会有兼容性问题！！*/
input.number::-webkit-outer-spin-button,
input.number::-webkit-inner-spin-button{
    -webkit-appearance: none!important;
    -moz-appearance: textfield;
}

---

# 修改输入框placeholder的文字颜色：input::input-placeholder

有些时候需修改输入框默认提示文字颜色，此时可用input::input-placeholder来设置样式。

	/* 同时设置了input 和 textarea 元素的placeholder属性样式 */
	input::-webkit-input-placeholder, 
	textarea::-webkit-input-placeholder {
		color: blue;
	}

---

# 模糊文本：text-shadow

想要用文字变得模糊不清，可以使用color透明 和 text-shadow 来实现。

    .text {
    color: transparent;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
    }

---

# 遮罩层背景模糊效果：backdrop-filter

backdrop-filter 这个CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，【为了看到效果，必须使元素或其背景至少部分透明】。
backdrop-filter样式属性一般在弹出框、遮罩层等场景比较多一点。

.box {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
	backdrop-filter: saturate(180%) blur(20px);
}

/* 
backdrop-filter滤镜的函数值：
	backdrop-filter: blur(2px);
	backdrop-filter: brightness(60%);
	backdrop-filter: contrast(40%);
	backdrop-filter: drop-shadow(4px 4px 10px blue);
	backdrop-filter: grayscale(30%);
	backdrop-filter: hue-rotate(120deg);
	backdrop-filter: invert(70%);
	backdrop-filter: opacity(20%);
	backdrop-filter: sepia(90%);
	backdrop-filter: saturate(80%);

还可以同时添加多个滤镜效果，只需在各函数值之间用空格隔开即可：
	backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
 */

---

# 将整个网页变成灰色：filter: grayscale(100%)

在一些特殊的日子中，为表达对逝者的哀悼举措，游戏停服、直播停播、各搜索引擎、门户网站等都会将页面变灰色调，可用css中在根节点html上filter: grayscale(100%)样式属性即可。

html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(1);
}

---

# 使滚动条平滑的滚动到指定位置：scroll-behavior

比如用在返回顶部按扭效果，不用js去计算平滑值了，用纯CSS也能当用户通过 API 触发滚动操作时，CSS 属性 scroll-behavior 为一个滚动框指定滚动行为， 平滑到达还是立即到达指定位置。 scroll-behavior

.box {
    height: 500px;
    border: 1px solid gray;
    overflow-y: scroll;
    scroll-behavior: smooth;
}

/* scroll-behavior的属性值：
	auto 滚动框立即滚动。
	smooth 滚动框通过一个用户代理预定义的时长、使用预定义的时间函数，来实现平稳的滚动，用户代理应遵循其平台的约定，如果有的话。
*/

---

# 在移动设备上使用滚动回弹效果：-webkit-overflow-scrolling

在移动设备上可以通过-webkit-overflow-scrolling属性来控制元素在移动设备上是否使用滚动回弹效果，尤其是在ios设备在滑动时有卡顿情况时，可以通过该属性来解决。 -webkit-overflow-scrolling

.box {
    -webkit-overflow-scrolling: touch; 
}

/* -webkit-overflow-scrolling的属性值：
	auto 当手指从触摸屏上移开，滚动会立即停止
	touch 当手指从触摸屏上移开，会保持一段时间的滚动 
*/

---

# 修改浏览器滚动条样式：scrollbar，scrollbar-track，scrollbar-thumb

由于浏览器默认的滚动条样式，在项目中和某些风格太搭配时，此时就可以修改浏览器滚动条样式，注意加上兼容前缀，这里以-webkit-为例：

/*设置滚动条 整体样式*/
::-webkit-scrollbar {
        width: 10px;
        border-radius: 10px;
        background-color: #eee;
}
/*设置滚动条 滚动轨道样式*/
::-webkit-scrollbar-track {
        border-radius: 10px;
        box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
}
/*设置滚动条 拖动柄样式*/
::-webkit-scrollbar-thumb {
        border-radius: 10px;
        border: 1px solid white;
        background-image: -webkit-gradient(linear, left bottom,left top, color-stop(0.1,rgb(0, 0, 200)),color-stop(0.5,rgb(0, 255, 128)),color-stop(1,rgb(0, 0, 200)));
}

---

# 隐藏滚动条：-webkit-scrollbar

有时候在滚动区域中，不想显示滚动条并且保留滚动效果时，可以使用-webkit-scrollbar来隐藏滚动。

.box{
  	width: 100px;
    height: 100px;
    border: 1px solid gray;
    overflow: auto;
}
/*隐藏滚动条*/
.box::-webkit-scrollbar{
   display: none;
}

---

# 动态计算长度值：calc()

css3 的 calc() 函数允许我们在属性值中执行数学操作，还可以用来对数值属性执行四则运算，特别是我们可以混合计算绝对单位（比如百分比与视口单元）与相对单位（比如像素）。

.box{
 	padding: calc(1vw + 1em);
    width: calc(50vmax + 3rem);
    font-size: calc(50vw / 3);
    transform: rotate( calc(1turn + 28deg) );
    background: hsl(100, calc(3 * 20%), 40%);
}

/*calc() 函数可以嵌套。在函数里边，会被视为简单的括号表达式*/
.box{
    width: calc( 100% / calc(100px * 2) );
}

/*calc() 已经得到普遍支持，如果还是担心兼容问题，可以用降级方案：
对于不支持 calc() 的浏览器，整个属性值表达式将被忽略。
不过我们可以对那些不支持 calc() 的浏览器，使用一个固定值作为降级方案。
*/

.box{
    width: 90%; 
    width: calc(100% - 50px);
}

/*实例：元素居中定位*/
/* 普通写法 */
.div{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16.666666666%;
    marging-top: -150px;
    margin-left: -150px;
}

/* calc() 函数写法 */
.div{
    position: absolute;
    width: calc(100% / 6);
    top: calc(50% - 150px);
    left: calc(50% - 150px);
}

---

# 线性渐变：repeating-linear-gradient()

css3 的repeating-linear-gradient() 函数 可用于在background中创建重复的线性渐变。
如下样式，可实现信封的【倾斜边框】效果！

.box{
	width: 100%;
	height: 30px;
    background: repeating-linear-gradient(
    45deg,
    red 0px, 
    red 20px, 
    white 20px, 
    white 40px
    );
}

---

# 倒影效果：-webkit-box-reflect

通过-webkit-box-reflect属性，再加上css3 的repeating-linear-gradient() 函数 可以实现对文本、图片等元素的倒影效果！

.box{
	width: 100px;
	height: 100px;
   -webkit-box-reflect: below 10px -webkit-linear-gradient(transparent, transparent 50%, rgba(0, 0, 0, .8));
}

---

# 垂直对齐：transform

垂直对齐容器中的元素，通过transform: translateY(-50%); 样式属性，可以很优雅的这个问题，它还可以从单行文本、段落到box，都会垂直对齐！

.box{
	position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

---

# 非盒子布局不定高度垂直居中对齐：transform

通过 position: absolute; 和 transform: translate(-50%, -50%); 样式属性，可以解决不定高度垂直居中对齐，特别是用在自定义弹框的时候！

<!-- 注：这种方式是对元素本身有效 -->
.box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

---

# 盒子布局不定高度垂直居中对齐：flex

盒子布局通过align-items: center; 样式属性，也可以很优雅的解决盒子布局不定高度垂直居中对齐，特别是用在自定义弹框的时候！

<!-- 注：这种方式是对子元素有效 -->
.box{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

---

# 表格table td列宽自适应：white-space

对于表格，在调整列宽时，中以给td元素添加white-space: nowrap;能让文本正确的换行！

	td {
	    white-space: nowrap;
	}

---

# 省略号加载动画：content: “\2026”;

对于用在简单的数据加载中的状态时，这个还是很有用的，而不用去使用gif图像！

    .loading:after {
        content: "\2026";
        display: inline-block;
        font-size: 100px;
        color: blue;
        overflow: hidden;
        animation: ellipsis 2s infinite;
    }
    @keyframes ellipsis {
        from {
            width: 0px;
        }
        to {
            width: 100px;
        }
    }

---

# 根据不同文件类型的链接，设置图对应的icon图标样式：[^ $ ];

对于用在简单的数据加载中的状态时，这个还是很有用的，而不用去使用gif图像！

/* 选择href属性为https://开头的a链接 */
a[href^="http://"] {
    padding-right: 20px;
    background: url('./imgs/link.gif') no-repeat center;
}
/* 选择href属性为mailto:类型的a链接 */
a[href^="mailto:"] {
    padding-right: 20px;
    background: url('./imgs/email.png') no-repeat center;
}
/* 选择href属性为.pdf后缀名的a链接 */
a[href$=".pdf"] {
    padding-right: 20px;
    background: url('./imgs/pdf.png') no-repeat center;
}

---

后续更新。。。