CSS：层叠样式表 cascading style sheet
不仅学CSS，还要学些LESS CSS、SASS、PostCSS
https://www.cnblogs.com/KeithWang/p/3139517.html inline inline-block block
没创意？ https://dribbble.com/
高清壁纸？ wall haven (heiven) https://wallhaven.cc/
背景图太大？ jpg compress https://compressjpeg.com/
各种图标？icon https://www.iconfont.cn/
各种网站小图标? 例如qq的图标 https://www.qq.com/favicon.ico
图片需要一个地址？ https://sm.ms/
调试网速快？ 检查 network 找到slow 3G
中文文档？
资源：
橡皮筋进度条：elastic progress 在codrops
css tricks [shape] 搜索
引入CSS的三/四种方式：
1.内联样式 标签中加style属性
2.style标签方法 head中加style
3.link标签引入，新建css文件并在html的head中添加
4.不常用。@import url(./b.css); 在一个css文件中引入b.css
CSS相关：
使用float使得到并排导航栏用float，只要用float就一定有bug，解决方法：
css文件写
.clearfix::after{
content: "";
display: block;
clear: both;
} 再在所有float属性的标签的父标签的属性添加 class="clearfix"
e.g.
检查后出现style，是展示所有的样式，computed是所有计算出来的样式。
text-decoration: none; 可以消除字体下划线等装饰
不知道css取值，xxxx mdn，或开发者模式试
标签与标签之间只要有符号就用空格，把他们挨一起！
可能存在li标签中a标签没有被包裹住情况，
在a标签css中添加 display:block;即可。没有什么内联inline元素、块级block元素，所有元素既可以是内联元素，也可以是块级元素
color可以继承父辈属性。
CSS核心之一： 一个div的高度由其内部文档流元素 的高度 的总和决定。
文档流：文档内元素的流动方向内联元素，如span 从左往右流；块级元素，如div，不从左往右流，而是每个块占1行但是如果单词很长，如hahahahahahahahahahh不处理它还是会一行，不会分开（分开不影响阅读啊啊）需要加css label{ word-break: break-all;}(还有其他属性中文为主的网站推荐break-all，英文break-word（单词分割的地方可以打断）)
文档规定内联元素一个挨着一个，块级是每个另起一行（可使用float left，父标签clearfix）后续出了display: inline-block; 属性(但是！！！这个很垃圾，回头写)
文档流（简略）：内联元素从左往右流动，块级元素从上往下流动，每个元素另起一行
块级元素的高度（body、div）由什么决定：由其内部文档流元素的总和决定的（不是相等）
span（内联元素）的高度由什么决定：很难。。涉及到非前端的内容。和字体的“建议行高”相关 而不是font-size指定 font-family不同、建议行高不同，
内联元素有回车等符号：皆会导致两个元素之间有一个空格的间隙（不是紧密相接的）
使用line-height:1.2(120px); 属性可能会改变，很小可能。。
div中有两个span，div高度是？：多个span时，这一行高度一般由最高的span决定。但是有内联元素其实已经不可控了，调整内联元素font-size属性、div的line-height、height属性到合适的大小吧。（font-size较小时可用line-height设定）
不到万不得已，千万不要使用：height: xxpx 与width:xxxpx xxx%
脱离文档流：和文档流息息相关，点穴与解穴。需要的css添加属性 position: fixed; top: 0; left:0; 脱离文档流，相对于屏幕固定(左上角) 有fixed会往内缩 加width:100%; 就可以占满整个上部分
存在width:100% 的标签，则最好不要再有左右padding，不然容易出事，在他里面加一个儿子div，让儿子div去承受他爸之前承受的一切，他爸爸只剩下一个空壳去确定范围。
banner：
background-position: center center; 背景图x水平方向居中，y竖直方向居中。
背景图按比例 自适应 缩放：background-size: cover;
自适应 属性：max-width: xxx px; 缩小页面后无滚动条
居中 若已经有一个宽度width或max-width，只要写margin-left: auto; margin-right: auto; 就可以让它居中 还有text-align:center;
内联元素不接受宽高，为其增加 display: inline-block; 属性就可以指定 width、height，inline-height与height相等可以实现字体居中 行高与高度一样。但是！！！只有在line-height比较低时成立。还有text-align:center;一起用完成居中
以上是新手字体居中，老手从内往外做。用padding居中：在四周加padding，而不指定width、height。指定好width再添加字会出bug，用padding就好多了。最后再检查一下字体大小，写一行line-height防止不同浏览器字体占的大小不同，就完成了。
如何用CSS画三角形？！！！！
一个div 四个border-top等-color: 设置。然后颜色可以transparent，注意width、height为0。调整border-top等-width可以调整，此处width是中心到上部距离。
span+display:block就是div。
脱离文档流绝对定位：子元素中加position: absolute; 父元素上写position:relative;相对于祖先中第一个position:related;定位 position:fixed 是相对于窗口定位，这样是相对于div/body（父）定位。 然后使用top等属性。。
top: 100% 表示自身上边缘距离上一个元素的上边缘相距整个上个元素的大小。top:0;则不会管padding。
padding使用：如果需要padding但是最外层div已经指定width或max-width，则不适合在最外层div中使用padding（超过maxwidth），可以在他内部的div中使用padding来代替直接操作。
默认样式很讨厌：可以用h1,h2,h3,h4,h5,h6,p{margin:0; padding:0;}解决，或使用*{margin:0; padding:0}，所有元素的默认都不要了
dl使用1： 使用width: 50%,可以使每对dt，dd各占一半，然后自动换行。凑100%就可以换行
图标样式网站：iconfont
a标签各个元素居中：在其父元素css中text-align:center;
强记之vertical-align:top; 可以解决svg上下不均匀，上面顶头，下面没有。
a元素圆形包裹内部元素？border-radius: 50%;调节width等，可以加display:inline-block;调试
居中问题a元素包svg：小图标居中写height有时候就不好办，试试只写width，line-height（svg的width），padding 2*p+line-height = width。与该元素大小相关（到时候看情况）。
看hover：检查模式选中a链接，然后找:hover，点击即可。
伪类：
什么是空标签？ meta、input等，因为没有儿子元素。非空标签默认有伪类。::before伪元素，不是真元素，无法被选中。
两个冒号:: 伪元素 一个冒号: 伪类。 上面好像弄错了
大致就是在所有例如div::before{content:"["} 所有div前都有 [ , after同理。也可以给他们display:block;等。一般必须有display:block，和content。不过position:absolute 绝对定位后自动变为block
标签中有id，其css格式：
谷歌 css tricks shape有各种形状
例如：
css3 linear gradient generator 生成css线性渐变，注意css中生成器要多使用，省的自己写
儿子和父亲的位置关系怎么移动：之前也有写，父亲 position: relative; 儿子 position:absolute，之后调top等属性。之后儿子的儿子的位置皆与其父亲相关，不是与最初的relative相关
居中新学： margin: 100px auto;即可居中 到上边缘为100px，左右等宽，下面自动分配
margin: 100px auto 50px; 左右auto 上100px 下50px
position:absolute 绝对定位后自动变为block： 套路，没有原因
::before ::after作用：可以少使用2个div，很帅。但是1个before和1个after都是只能有1个子元素
生成中心小球，可以用border，也可以用渐变。
动画效果：.css中 @keyframes spin { } 遇见不会的，css animation mdn 来解决
两幅图嵌在一起： 可以在标签里用 style="margin-top:-200px;"
a标签加download 一定下载
内联元素居中（inline、inline-block） 需要搞个父元素包住它，然后在父元素上面加
例如：
检查-computed-搜索color是字体颜色，只有color，无其他修饰。
阴影设计：谷歌 css shadow generator shadow要变慢些：加transition: box
去除ol，ul列表样式：因为两者有默认样式，影响设计，使用 ul,ol{list-style:none;}消除。
进度条：可以用父子div，其中第一个做外围border(第二个div的父亲)，第二个做条。但是需要注意外围border的height需要与第二个div的height一样，或第二个使用height:100%;
剪切板管理器！！！！！自己找个吧
最大width，width占满的情况应对（左右两个元素）：一种是再用一个div包裹住，再在这个div使用margin-right:20px;等，另一种是使用属性：box-sizing: border-box; 这时候 width:50% 则包含了padding和border。
第奇数，偶数个孩子分别指定：例如奇数odd的儿子左浮，偶数even儿子右浮
section.skills>ol>li {
/* border: 1px solid red; */
float: left;
width: 47%;
}
section.skills>ol>li:nth-child(even) { /*当是第2，4，6....个元素时右浮*/
float: right;
}
float居中：不考虑 float 的元素居中，而要居中他们的父亲元素
死记硬背：使用display:inline-block，一般需要再加一行 vertical-align: top;消除一点点空隙。
inline-block，ol的属性display:inline-block，不要放在li的属性。
text-align:center：管的是里面的内容！！
class里有空格的情况：例如 class="bar state-1"，则需要使用类似section.portfolio>nav .bar.state-1 定位到他，原因暂时不清楚（实验得出非理论）
需要script标签的元素，元素的标签需要在script上方定义过了
transition 加在要变化的东西上
绝对定位的元素脱离文档流，div不知道自己的宽高，需要人为指定
kbd是一个inline内联元素
小写变大写 css属性 text-transform: uppercase;
居中两种情况：内联元素：给父亲元素加一个text-align:center。块级元素：宽度固定也好居中
绝对定位后，使用top left bottom right进行定位。
平时不出现，hover时出现：
kbd>button {
position: absolute;
right: 0;
bottom: 0;
display: none;
}
kbd:hover>button {
display: inline-block;
}
渐变色： css gradient generator
外层几圈颜色：可以使用box-shadow 不要模糊，跳转几个像素的做。
flex布局，比如设计键盘中心存在A等字母。
display: flex(有时候需要incline-flex); align-items: center; //上下居中 justify-content: center; //左右居中
inline元素bug第二次提：如果写代码时inline元素之间有回车空格等各种符号，页面上的inline元素之间会有空隙。 js生成则不会。
div不包括 box-shadow阴影
http://mcdlr.com/key-sheet/ mac键盘。
视野，整个屏幕：body{ height:100vh; } viewport height (视野高度100就是整个屏幕)
居中想要一个东西绝对居中，只需要给父元素加三行代码：
display: flex; justify-content:center; align-items: center; 另外需要父元素不能太低，需要和整个屏幕视野一样高 height:100vh;。
背景图片：background: grey url(./img/back-wall5.jpg) no-repeat center center; 第一个grey是网速较慢时，先出grey颜色的底色。两个center表示上下左右居中，还有一个属性默认即可。
字体需要span包起来才能给样式：像
canvas 和img一样，不会因为 display block而变，有两个属性 width height此处设置的是属性值，不是样式 不建议用css控制canvas宽高
position: fixed : 同absolute 一样，也是绝对定位的元素，但不同的是，它相对于浏览器窗口进行定位。平时我们看到的对联广告就是利用JS和此属性来定义的。
需要两个按钮之类的东西时候，可以用一个div把它们包起来。
class里有空格的情况：例如 class="bar state-1"，则需要使用类似section.portfolio>nav .bar.state-1 定位到他，原因暂时不清楚（实验得出非理论）
class有空格，确定状态：actions.className = 'actions x'; class有空格，用点.actions.x给css样式
.actions.x>#brush {
display: inline-block;
}
可以通过更改className改变状态。很有趣！！！！
eraser.onclick = function () {
eraserEnabled = true;
actions.className = 'actions x';
}
brush.onlick = function () {
eraserEnabled = false;
actions.className = 'actions';
}
.actions {
position: fixed;
left: 0;
bottom: 0;
}
.actions>#brush {
display: none;
}
.actions.x>#brush {
display: inline-block;
}
.actions.x>#eraser {
display: none;
}
手机显示乱动问题，设置为 display:block; 有时候就不会随触摸乱动了，inline经常会。
还有，body{overflow:hidden;} 不要滚动条了
还有 可以用position:fixed; top:0; left:0;
实在不行，js还有一个。。
.classList.add 进行状态转换：场景为 画笔与橡皮擦在点击到时变红，且一个变红另一个就不红。
pen.onclick = function () {
eraserEnabled = false;
pen.classList.add('active')
eraser.classList.remove('active')
// actions.className = 'actions';
}
eraser.onclick = function () {
eraserEnabled = true;
eraser.classList.add('active')
pen.classList.remove('active')
// actions.className = 'actions x';
}
添加JS特效到简历
居中小球（非内联）： 注意.circle中的top bottom left right = 0 和margin: auto
.wrapper{
width: 200px;
height: 200px;
border: 1px solid red;
position: relative;
}
.circle{
position: absolute;
width:10px;
height:10px;
background:black;
border-radius:50%;
top:0;
left:0;
bottom:0;
right:0;
margin: auto;
}
z-index 好像可以规定在第几层。越高越在上面容易出现。
字换行问题！当父元素是float，子元素是绝对定位时，如果子元素的字体出现换行。可以对该子元素 在子元素CSS中 使用 white-space: nowrap;
可以用 outline: 10px solid red 来突出目标
溢出overflow: hidden; 在父元素中写overflow:hidden;
trans