前端常见而实用的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 优先级 权重规则

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

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

!important是权重最高的
需要注意的是：当权重相等时，后面的样式 要优于(覆盖) 前面的样式。
不要使用!important
看起来!important可以快速的解决问题，但最终可能会导致大量的重写。
相反，我们应该花点时间找到CSS选择器不工作的原因并更改它。唯一可以使用的!important的地方是当您想要覆盖html中的内联样式时，但是内联样式同样也是一个坏的习惯，应该尽量的避免。

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

---

禁止选中文字：user-select

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

p{
  	-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
*/
}

---

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

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

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

---

文字内容超出指定长度后显示"…"省略号：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*/
	-webkit-box-orient: vertical; 	/*值必须为vertical*/
	-webkit-line-clamp: 3; 			/*值为数字，表示一共显示几行*/
	overflow: hidden;				/*超出的部分隐藏*/
}

---

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

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

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

---

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

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

::selection{
    color: yellow;
	background: green;
}

---

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

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

---

使滚动条平滑的滚动到指定位置：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 滚动框通过一个用户代理预定义的时长、使用预定义的时间函数，来实现平稳的滚动，用户代理应遵循其平台的约定，如果有的话。
*/

---

修改浏览器滚动条样式：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)));
}

---

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

后续更新。。。