最近的生活有点太美好了，让我感觉像在做梦一样，哈哈哈哈，幸福的生活，无非就是这样，你说是啊，沙老板，我要更加努力是啊。 我想你就是我的动力。
1.1 文本溢出省略：
文本单行溢出：
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
white-space: nowrap; // 规定段落中的文本不进行换行
复制代码
多行文本溢出：
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
display:-webkit-box; // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3; // 显示的行数
复制代码
1.2css变量：
CSS变量又称为CSS自定义属性，由css中的自定义属性--var和函数var()组成，var()用于引用自定义属性。 说到CSS中为什么要使用变量，下面用一个例子。
:root {
--c-color: orange;
}
.title {
background-color: var(--c-color);
}
复制代码
1.3 梯度：
渐变分为线性渐变和径向渐变。 这里笔者直接记录一下使用方法，也是为了更直观的使用。 这里，当使用线性渐变时，使用角度和比例来控制渐变会变得越来越直观。 灵活的
指示：
//渐变(方向)
background: linear-gradient(to right, rgba(255, 255, 255, 0),#3FB6F7,rgba(255,255,255,0));
//渐变(角度)
background: linear-gradient(88deg, #4DF7BF 0%, rgba(77, 247, 191, 0.26) 12%, rgba(77, 247, 191, 0) 100%);
复制代码
边框渐变：
border有一个border-image属性，类似background也有一个background-image，通过为其设置渐变颜色css 透明，实现渐变，前面的数字4是x方向的偏转量
指示：
.border-grident{
margin-top: 20px;
width: 200px;
height: 200px;
border: 4px solid;
border-image: linear-gradient(to right, #8f41e9, #578aef) 4;
}
复制代码
1.4背景大小：覆盖和包含和100%
contains：图像只能放大到满足背景区域的最小边。 当背景区域与背景图像的长宽比不一致时，背景区域可能会在长边下方出现未完全覆盖的空白区域。 cover：图像被放大，直到能满足最大时间变化。 当背景区域与背景图片的长宽比不一致时css 透明，背景图片会被裁剪到短边以下，显示不完整。
比例：可以设置两个值
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.bg{
width: 100%;
height: 300px;
background: url('./img/mtk.png');
/* background-size: contain; */
/* background-size: cover; */
background-size: 100%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>
复制代码
结果依次显示在右侧：
包含：
覆盖：
比率（此处为 100%）：
1.5 css伪类三角形：
首先看例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css-三角形</title>
<style>
.triangle {
width: 0;
height: 0;
border: 100px solid;
border-color: orangered skyblue gold yellowgreen;
}
</style>
</head>
<body>
<div class="triangle">
</div>
</body>
</html>
复制代码
如果想要下三角，可以将边框的上边框设置为可见，其他边框的颜色设置为透明
.down-triangle {
width: 0;
height: 0;
border-top: 50px solid skyblue;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}
复制代码
1.6 媒体查询
页面颈部必须有关于视口的元声明
<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>
复制代码
一般在做响应式布局和大屏幕的时候非常常用，因此可以在不同码率下实现不同的显示效果。
/* 超过1920分辨率后显示多列 */
@media screen and (min-width:1920px) {
.car_box.el-card {
min-width: 450px !important;
width: 450px !important;
}
}
复制代码
1.7 改变elementui样式的几种方法：
笔者目前的技术栈是vue，要改elementui的风格真是惨不忍睹。 style使用css预处理器（less、sass、scss）编写如下
// 第一种/deep/
/deep/ .test {
***
}
// 第二种::v-deep
::v-deep .test{
***
}
复制代码
有时候会遇到把elementui中表格的所有样式都改掉的情况，那么我们就一一改一下：
①修改表格后台背景：
::v-deep .el-table th{
background: orange;
}
复制代码
②修改表格行背景：
::v-deep .el-table tr{
background: #eee;
}
复制代码
③修改斑马线表格背景：
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
background: #ccc;
}
复制代码
④修改前线颜色：
::v-deep .el-table td,.building-top .el-table th.is-leaf {
border-bottom: 2px solid #eee;
}
复制代码
⑤修改表格上边框的颜色和高度：
::v-deep .el-table::before{
border-bottom: 1px solid #ccc;
height: 3px
}
复制代码
⑥修改页眉字体颜色：
::v-deep .el-table thead {
color: #ccc;
font-weight: 700;
}
复制代码
⑦ 修改表格内容的字体颜色和字体大小：
::v-deep .el-table{
color: #6B91CE;
font-size: 14px;
}
复制代码
⑧修改表格无数据时的背景和字体颜色
::v-deep .el-table__empty-block{
background: #ccc;
}
::v-deep .el-table__empty-text{
color: #fff
}
复制代码
⑨修改表格键盘浮动悬停背景颜色
::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
background-color: pink;
}
复制代码
谢谢您的观看~！
点击里面的图片浏览课程大纲
出自：中城翻译
zcfy.cc/article/thoughts-on-self-documenting-css
原来的：
Robert C. Martin 的《整洁代码》是我读过的最好的编程书籍之一。 如果您还没有阅读过，我建议您将其添加到您的列表中。
注释意味着不言自明的代码 - Robert C. Martin
Martin 在本文中详细讨论了代码注释，我不会准确重复他的话。 简而言之，他的意思是这些注释注定会被淘汰。 注释在程序执行过程中会被忽略，因此很难保证此类解释性注释能够准确描述代码的作用。 所以最好的办法就是让代码不言自明，这样根据代码逻辑，程序员得到的信息和程序是一致的。
考虑以下代码：
// Check to see if the employee is eligible for full benefits
// 检查员工是否有资格获取全部福利
if ((employee.flags & HOURLY_FLAG) && (employee.age > 65)) {
…
}
评论有帮助吗？ 当然可以，但是下面的方法可能会更好：
if (employee.isEligibleForFullBenefits()) {
…
}
代码需要“言出必行”，无论注释是否可以替换为命名良好的函数或变量。 Martin 的意思并不是说永远不应该使用注释，而是应该尽可能避免使用注释。 注释意味着代码本身很难解释。
那么CSS呢？
我非常同意Martin对于注释的看法。 当涉及 CSS 这样的声明性语言时，会发生一些有趣的事情。 声明性语言必须符合相应的格式，CSS选择器基本上是由HTML结构决定的。 对于这些代码结构我们无能为力css中，这是否意味着CSS代码必须处处注释？
也许。 使用注释的原因有很多，编写注释的方法也有很多种。 让我们看一些注释并考虑是否应该添加这些注释。 我们先从真实的答案开始，然后一步步走向不太容易判断的地方。
坏处：多余的评论
在任何语言中，多余的注释都是多余的。 以下示例来自 Bootstrap3 的初始版本：
// Addresses
address {…}
显然，address是地址的选择器
// Unordered and Ordered lists
ul,
ol {…}
除了？
// Blockquotes
blockquote {…}
现在停下来！
那个注释就别写了，删掉这个多余的东西，只是重复代码而已。 当然，新版本的Bootstrap已经删除了大部分不必要的无用注释。
不好：阻止分隔评论
对于CSS来说，块分隔注释非常特殊，如下：
/* -----------------
* TOOLTIPS
* ----------------- */
这种注释可以让我抓狂。 我能想到为什么要写这些注释：有时候我们的CSS会写得很长，在一千多行的文件中搜索时，需要这些带有特殊符号的注释来帮助快速搜索。
但事实上，很长的 CSS 文件已经不再流行。 如果你的项目确实需要这些大的CSS文件，那么应该通过CSS预处理工具将其由多个小部分组成。
坏：解释句型
让我们再次以 Bootstrap 为例。 以下代码来自_tooltips.scss：
// Allow breaking very long words so they don't overflow the tooltip's bounds
// 设置长单词换行
word-wrap: break-word;
这种方法类似于“什么都不做的注释”，注释解释了 word-wrap 属性的作用。 这里有一篇文章提到了为什么不需要这些评论。 注释应该解释“why”，而不是“what”，即解释原因而不是解释功能（Why，而不是what）。
这里有一个例外，因为CSS有很多属性，也许有些属性你完全不知道，所以你使用这些注释是正常的。
坏：介绍图书馆
这是 Bootstrap tooltips.scss 文件中的另一条注释：
// Our parent element can be arbitrary since tooltips are by default inserted as a
// sibling of their target element. So reset our font and text properties to avoid
// inheriting weird values.
// 由于提示框会被默认插入到目标元素后作为一个兄弟元素，
// 所以需要重置提示框的字体属性避免从父元素继承样式影响。
@include reset-text();
font-size: $font-size-sm;
这个评论很有趣，虽然它似乎并不违反“说明为什么，而不是说明什么？” 规则，它表示在导出的表单中重置字体属性，因为它们可能会受到某些意外继承的字体属性的影响。
但再进一步看，很明显，在文件头中导出重置样式的唯一解释是担心受到继承样式的影响。
因此，我认为这些注释是不必要的，因为导出函数的名称已经说明了目的。 尽量使函数名称适合该功能，例如reset-inherited-font或者类似的名称，这样既清楚地说明了目的，又说明了原因。 这是一个函数调用，函数名称是不言自明的。 优先使用这些方法可以代替一些注释。
CSS 预处理器使 CSS 更接近传统编程语言。 只要有可能，请使用命名良好且有意义的变量和函数，这会使代码更加清晰。
不好：注释过时
.dropdown-header {
…
white-space: nowrap; // as with > li > a
}
“as with > li > a”是什么意思？ 我的第一反应是文件里好像有一个>li>选择器，而这行代码就是指的是那个选择器。 也许文件中有一条注释专门解释了为什么要这样写，但是我从头到尾看了一遍文件，发现没有这样的选择器。 该文件仅在 .dropdown-item 选择器下有一个 nowrap 属性css中，也许它指的是这个？ 或者这个注释实际上指的是一行早已被删除或导入到另一个文件中的代码？ 如果你想彻底理解这个注释的作用，唯一的方法就是搜索整个git记录。
这是一个过时的注释，也许它曾经有用过，但很长时间没有使用过，所以它已经过时了。 这似乎就是 Robert Martin 思考注释的原因：如果注释对应的代码更新了注释，则毫无用处，甚至更糟糕的是，注释可能会将你引向错误的方向。 如果发现此类评论，必须将其删除。 它完全没用，而且想知道它到底有什么用也是浪费时间？
有时有用：具有特殊含义的注释
这是一段带注释的代码：
.dropdown-item {
display: block;
width: 100%; // For `
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
clear: both;
font-weight: $font-weight-normal;
color: $dropdown-link-color;
text-align: inherit; // For `
white-space: nowrap;
background: none; // For `
border: 0; // For `
}
像这样的注释很有用，它们告诉我们这些特定的属性是为了覆盖样式而编写的。 此类注释很有用，因为有时代码的意图并不那么明显。
但此时你还需要问一个问题：有什么方法可以让代码不言自明呢？ 有必要考虑将这个特定属性移至第二个选择器，即专门为该键设置的选择器。
.dropdown-item {
display: block;
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
clear: both;
font-weight: $font-weight-normal;
color: $dropdown-link-color;
white-space: nowrap;
}
button.dropdown-item {
width: 100%;
text-align: inherit;
background: none;
border: 0;
}
这非常清晰易懂，但副作用是：专门减少了一个特殊的选择器。
相反，我认为这些方法非常有利于使用 mixins 来混合模式。 重构为可以在其他地方定义的函数并使代码更清晰。 考虑以下代码：
.dropdown-item {
@include remove-button-styles;
display: block;
width: 100%;
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
clear: both;
font-weight: $font-weight-normal;
color: $dropdown-link-color;
white-space: nowrap;
}
该代码未注释，但其目的很明确，因为它使用其他模块中也可用的公共函数。 我保留了 width:100% 而不是将其移到函数中，因为 width:100% 在将函数与代码混合时可能会导致一些其他问题。
在我开始注意到“代码气味（Code Smell）”之前，一开始就有十行.dropdown-item代码，我特别喜欢用mixin，mixin是个好东西，可以大大减少代码的行数代码，它可以让我们快速的知道代码的大致用途。
虽然使用函数构建代码并不总是有效，但请尽可能多地使用它们。
好：注释难以理解的零碎代码
我对评论并不总是那么严格。 比如下面的评论我就很难找到问题所在。 如果你看过normalize.css的源代码，你一定会注意到它充满了注释。 我不得不说，真的是“非常棒”的评论。
欣赏它：
/**
* 1. Add the correct box sizing in Firefox.
* FF下正常的盒子模型
* 2. Show the overflow in Edge and IE.
* 在Edge和IE下overflow为visble
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
没有这些注释，你永远不会知道为什么要这样写。 修复特定浏览器错误的代码通常是深奥的，并且经常作为死代码被删除。
由于 Normalize 库的目标是提供完全一致的样式环境，因此需要许多这样的注释。 选择器都是类型和属性选择器，没有任何类名，而且由于没有命名类名，自文档化非常困难。
以下是另一个 Bootstrap 评论：
/* Chrome (OSX) fix for https://github.com/twbs/bootstrap/issues/11245 */
select {
background: #fff !important;
}
一个Github链接，非常有用。 即使你不打开连接，你也可以知道这是一个bug，而且可能是一个很难定位的bug。 如果需要，可以通过链接找到更多信息。 最重要的是，由于没有大量的文本来解释该错误，因此它不会扰乱代码的逻辑，并且还告诉我们从哪里可以获得更多信息。 如果您使用JIRA等项目和问题跟踪工具，则可以直接在注释中关联编号。
当然，并不是每一段修补的代码都应该以这种方式进行注释，但如果错误不那么容易发现并且与浏览器的怪癖有关，那么就应该这样。
好：命令式评论
某些工具（例如 KSS）会在 CSS 文件中创建一些样式规范。 如下：
/*
Alerts
An alert box requires a contextual class to specify its importance.
一个警告信息框需要与语境有关的的类来指定其重要性
Markup:
Take note of this important alert message.
alert-success - Something good or successful 好的或成功的
alert-info - Something worth noting, but not super important 不那么重要的
alert-warning - Something to note, may require attention 需要被提示并记录，需要引起注意的
alert-danger - Something important. Usually signifies an error. 非常重要的，常用于错误
Styleguide Alerts
*/
它不仅仅是一个注释，它是一个可以被 KSS 解析并用于生成 HTML 的规范。 这已经是项目文档的一部分，我不得不说，这比自动创建单独的 HTML 文件要好得多，因为它位于同一个文件中并且始终与代码匹配。
另一种指导性注释是许可信息，在使用第三方库时一般需要包含许可信息，并在注释中注明许可信息。
当我发布 Robert Martin 关于注释的言论时，似乎我应该解释一下，但我没有。 因为我觉得这是一句很容易理解的句子。 如果你还在代码中写注释，请思考一下是否合理。
今天的图书捐赠
