前端常用CSS笔记（更新中）

导读

前端在从前经常被后端瞧不起，究其原因，是因为后端对前端的印象还处在html、css和jQuery的时代，认为前端的工作无非就是按照美工的要求实现已有的页面，各种效果也不过是去网上进行复制黏贴，繁琐而又不能够凸显出个人能力。但是其实前端学习深入了，也不会比后端简单。比如vue等框架，将前端的工作进行模块化、组件化和工程化后，大大提高了代码的复用率，项目结构也更加合理，开发也将更加高效，使前端的学习也能够像后端一样有个规范化的发展。可视化、3D动画和游戏方面，从用户体验上来说，更多的也是前端的作用，对于使用者而言，他们很少在乎后端的工作（虽然也很重要），更加注重页面的效果和动画的实现是否能够从视觉上让人感觉到冲击和舒适。但是作为一个合格的前端开发人员，虽然html和css只是基础，但是仍然不能够掉以轻心，毕竟基础不牢，地动山摇。本文是一份关于css的使用或者页面标签的实现效果笔记，仅供参考，如果读者有更好的实现方式或者其他问题的解决方案，欢迎在评论区留言讨论，本文也会根据读者的建议进行实时地修改。

常用标签美化的css方案

文字的排版

1、文字如何进行上下或者左右居中处理？

左右居中：

text-align: center;

上下居中： 设置 line-height和height相等

height: 50px;	//先设置标签高度
line-height: 50px;	//设置标签内文字的高度

拓展（可以跳过不看）：很多人可能不理解height和line-height两个属性之间的关系，经过测试不难得出，height表示标签的高度，而line-height是标签内文字上下居中时的假定高度。

比如，从上图可以看出height和line-height相等时，文字完美地上下居中在标签内。那么，我们可以进一步猜测，当line-height === 2 * height的时候，文字就会出现在标签的底部border的居中位置。测试后果然得出相同的结论。

对于块级元素而言，在不设置height的情况下，line-height会自动填充块级元素的高度，如图：

结论：对于块级元素而言，在不设置高度的情况下，设置line-height，块级元素的高度会被撑大到相同高度，并且保持文字上下居中；在设置高度的情况下，需要line-height和height相等，才能够保证文字上下居中。对于一般使用者而言，上下居中设置line-height相等于height即可。

2、第一行文字的边距

最完美的方案:先设置标签的font-size属性，再设置text-indent属性为2em或者根据需要设置其他特殊的数值。 比如：

.text_center {
    font-size: 12px;
    text-indent: 2em;
}

拓展: px、em和rem三个单位的区别
px：绝对单位，页面按精确像素展示。
em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。
测试：
（1）使用rem时，根据html节点的font-size计算：

（2）使用em时，根据自身font-size计算：

（3）使用px时，根据像素计算：

3、文字省略号

对于单行文本：

	width: 129px;	//设置容器宽度
	overflow: hidden;  //设置超出隐藏
	white-space: nowrap;	//文本不换行
	text-overflow: ellipsis;	//超出部分显示省略号

对于多行文本（跨浏览器兼容方案）：

p {
    position:relative;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */
    height:4.2em;
    overflow:hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
}

提示：height高度真好是line-height的3倍；结束的省略好用了半透明的png做了减淡的效果，或者设置背景颜色；IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用…去模拟；要支持IE8，需要将::after替换成:after；

4.多行文本的省略

刚刚上面的答案是大多数的答案，但是有几个弊端：
（1）即使没有超出也有省略号
（2）可能文字只显示一半
所以使用下面一种方案：

font-size: 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 20px;
  color: red;

测试过了，兼容火狐和谷歌，其他浏览器还未测试。

组件的美化

1、滚动条样式

（1）设置容器超出隐藏，滚动条自动出现

.content-wrapper {
    overflow: auto;
}

（2）设置滚动条整体样式，比如宽度和背景颜色

.content-wrapper::-webkit-scrollbar {
    width: 6px;
    background-color: #0e487c;
}

（3）设置滚动滑块的样式

.content-wrapper::-webkit-scrollbar-thumb {
    background-color: #4facfa;
    border-radius: 3px;
}

滚动条显示效果如下：

如果希望有滚动效果，但是隐藏滚动条，可以设置滚动条宽度为0:

.content-wrapper::-webkit-scrollbar {
    width: 0 !important;
}

更多样式参考https://www.cnblogs.com/iamlhr/p/11673130.html

2、audio样式的调整

chrome audio默认圆角看起来非常别扭，使用audio的border-radius无法重置audio的边框圆角样式。可以通过设置audio和audio::-webkit-media-controls-panel的背景颜色进行调整。
（1）调整audio的宽高、取消点击高亮、边角背景颜色

.audio_con audio {
    width: 100%;
    height: 100%;
    outline: none;	
    background: rgb(101, 196, 228);	
}

（2）调整audio主体部分的背景颜色，和边角背景颜色一致

audio::-webkit-media-controls-panel {
    background: rgb(101, 196, 228);
}

效果如图：