转载：www.jianshu.com/p/38ae866ac…
引入CSS的三/四种方式：
1.内联样式 标签中加style属性
2.style标签方法 head中加style
3.link标签引入，新建css文件并在html的head中添加 <link rel="stylesheet" href="./style.css"> rel=relation。
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. <ul style="list-style: none; margin: 0; padding: 0; border: 1px solid red;" class="clearfix">
检查后出现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 来解决
