css总结
1、select:first-of-type 和 select:last-of-type：如果 select 是类名要注意 不一定是我们理解的那样，因为他们是基于元素去找的，而不是类名。
即 先查找 select 选择器对应的标签，在父元素下的第一个或最后一个该标签的元素，然后这个标签是不是同时满足select选择器。如：
/* 下面的选择器没用选中标签，因为css先找到 .p类名元素的标签，再找到这个标签在父元素下的最后一个，且这个元素的的类名是.p */ .p:last-of-type{ color: red; }
<div> <p class="p">dkafjdf</p> <p class="p">dkafjdf</p> <p>jhdsajhfjdf</p> <div>会计积分</div> </div>
另外 html 机构改下：.p 类名对应的 标签有h3、h1。这个两个标签都是各自标签名的 最后一个，且都有 .p 类名。所以可以被选中。
<div> <h3 class="p">dkafjdf</h3> <!-- 样式起作用 --> <h1 class="p">dkafjdf</h1> <!-- 样式起作用 --> <p>jhdsajhfjdf</p> <div>会计积分</div> </div>
总结：:first-of-type 是基于 标签元素名 和 选择器进行 选择的【即有两个选择器】，而不是简单的基于 一个选择器选择。https://segmentfault.com/q/1010000016703741
CSS 实现功能：
1、css实现小三角（原理）：https://www.cnblogs.com/JennyLin77/p/5287811.html
css中 border 显示机制：某一边的border没有相邻的border，则这条border显示的就是矩形；如果这条border有相邻的border，则重叠的border 各一部分【对角线为边界线】。效果如下：
div{ width: 50px; height: 50px; border-top: 20px solid pink; border-left: 20px solid lightgreen; // 上边框 和 左边框，相邻的两条边框都有时，重叠部分是各占45°角。 }
基于border这种机制，只要对边border之间距离为0，就很好实现了。
应用：基于这个原理，我们可以实现 任意角度 的三角形。
2、自定义滚动条样式：https://baijiahao.baidu.com/s?id=1620626742712547161&wfr=spider&for=pc 或 https://codepen.io/stevenlewis/pen/hubpL(可以看效果展示)
浏览器兼容性问题： https://blog.csdn.net/qq_35355153/article/details/107205254
谷歌：可以进行自定义
火狐：滚动条直接隐藏，火狐滚动条不能修改样式。
3、表格 属性设置：
a、border-collapse：属性可以设置表格边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示
意料之外 的CSS样式
1、内联及行内元素设margin-top,padding-top没有效果，因为他们是基于基线对齐的。（需要自己多尝试下）
background-attachment：fixed 属性可以让背景图在浏览器窗口始终固定不变（就好像脱离了该背景图的标签），下面的内容滚动上去可以把它覆盖。
2、margin-top属性不起作用的几个原因 ： 参考 http://www.php.cn/div-tutorial-55481.html 及
关于内层DIV设置margin-top不起作用的解决方案： http://www.cnblogs.com/huangyong8585/archive/2013/05/21/3090779.html
标签内的第一个标签设margin-top和最后一个标签设margin-bottom是没有效果的，他们都会作用到父元素上的。
3、小图标或图片 与文字在一行的垂直居中：https://blog.csdn.net/u010618627/article/details/84783744
<div class="a"> <img src="images/a.png"> <p>干活呢</p> </div>
.a img { width: 20px; height: 15px; vertical-align: middle; /* 这里必须要设置vertical-align: middle。不然如果有适配的问题，字体大小变了，下面的属性就要重新校准下。*/ margin: -5px 10px 0 15px; /*这里是基于 vertical-align: middle 有偏差进行的微调。*/ } .a p{ display: block; width: calc(100% - 55px); height:21px; float: right; line-height: 21px; margin-right: 10px; }
4、行内标签嵌套块级标签：如 span 里面含有 div标签
浏览器实际的渲染，会把行内元素里面的块级元素拿出来渲染。
<span>
<span>span标签</span>
<div>div标签</div>
</span>
代码是这么写的，在浏览器的elements面板上看也是这样嵌套的。但真实的渲染是下面这样的。
<span>
<span>span标签</span>
</span>
<div>div标签</div>
说明：这种机制要知道，不然布局上出现出乎意料的结果。排查问题会很难的。
5、
CSS 总结：
2、transform-origin：属性设置原点，是相对于该标签的左上角哪个点。默认的原点是图片中心点，也就是transform-origin：50% 50% 0；
5、给元素设高度100%，往上推的父级元素的高度必须是可以确定，不然计算机没法计算的。如父元素的高度是通清除浮动撑出来的高度，给子元素设100%是无效的。
父元素高度不是定值时，子元素高度用百分比是没有效果的。比如，父元素高度是被子元素撑高的，也包括清除浮动撑出来的高度。但是如果是定位元素的话，父元素高度不定，子元素也是单位的话，高度100%确是可以获得的。
6、内联元素（包括行内块）默认都是基线对齐的，图片的基线就是图片的底部。父级元素默认 底边上一点的距离是基线对齐的地方（这个也只是对内联元素的子代有意义，块级元素没有任何影响）。内联元素一定是先按照内联元素对齐规则对齐后，再从上到下排版的。当文字的，图片的 vertical-align不为基线时或父元素的高度比图片大的多，则父元素默认 底边上一点的距离是基线就根本没有意义了，和没有一样。即父级元素默认 底边上一点的距离是基线只是在内联子元素是以基线对齐的时候会有效果。
也可以另外一种理解（个人自己的想法，觉的这种解释更合理。），内联元素始终是基线对齐的，内联元素高度最高的那个是决定基线所在的位置的，通过vertical-align可以设置它的基线位置，而其他的内联元素的vertical-align则是声明它们要和基准元素的关系，是和基准的头部对齐 还是基线对齐、又或者是底部对齐。
注意：vertical-align：bottom用在最高的内联元素则说明是与父元素以底边对齐的，与基线无关了。
9、标签中如果有 文本 或 内容元素标签（img） 则，这个标签内的行高就会有效。即，如果标签内只有一个img标签，没有任何内容，这个标签一会被行高撑出高度来。
10、有的标签不会继承父辈的font-size属性与color属性，如 <button>。
12、BFC布局的理解：https://blog.csdn.net/gladys_1111/article/details/77049122 或 https://www.cnblogs.com/chen-cong/p/7862832.html
a、bfc的区域不会与float的元素区域重叠。【这个特性可以 很好的实现一些布局，如：两列布局、三列布局】
b、计算bfc的高度时，浮动元素也参与计算。【这个特性可以 解决 浮动 没有撑出高度的问题，即清除浮动】
13、排除某个元素的一类元素：:not(selector) 。
如：li:not(.icon) 选择li中不是icon类名的所有 li标签。
