《css世界》学习摘要

分手后的思念是犯贱 2023-08-17 16:59 117阅读 0赞

1.父级元素设置height：auto 会导致子级的元素设置的height：100%无效  
2.如果块级元素的width是个固定值，margin是auto，则margin会撑满剩下的空间；如果margin是固定值，width是auto，则width会撑满剩下的空间。这就是流体布局的根本所在  
3.误解：css权重比较，当两个权值进行比较的时候，是从高到低逐级将等级位上的权重值（如 权值 1,0,0,0、0,1,0,0、0,0,1,0、0,0,0,1 对应--> 第一等级权重值，第二等级权重值，第三等级权重值，第四等级权重值）来进行比较的，而不是简单的 1000个数 + 100个数 + 10个数 + 1个数 的总和来进行比较的，换句话说，低等级的选择器，个数再多（只要不超过256个，因为css权重256进制）也不会越等级超过高等级的选择器的优先级的  
4.!important的权重相当的高，假如宽高的设置是使用最高权限!important但是此元素又设置了max-width/min-width，那么引擎会解析此元素的宽高为设置的最大或者最小值，!important会失效  
5.设置box-sizing: border-box；元素的宽度计算为border+padding+content的宽度总和  
6.替换元素：存在src=""属性的<img> <audio> <video> <iframe>元素和可以输入文本的<input> <select> <textarea>元素等，其vertical-align属性默认是bottom（非替换元素默认值是baseline）  
7.border属性中颜色是可选填的，通过结合transparent透明色的设置可以制作成一些梯形，三角形等  
8.line-height实现垂直居中的本质：行距；行距是指一行文本和相邻文本之间的距离。行距 = line-height — font-size。行距具有上下等分的机制：意思是文字上下的行距是一样的，各占一半，这也是line-height能让内联元素垂直居中的原因。下图中字母x上下行距各占一半，共同撑起了div。  
9.幽灵空白节点应该是由font-size、line-height、vertical-align等相关的几个属性造成的，line boxes模型里面的span也算内联盒子，不过只是触发幽灵空白节点的必要条件之一而已  
10.无论内联元素的line-height如何设置，最终父元素的高度都是数值大的那个line-height决定的  
11.vertical-align属性起作用的前提必须是作用在内联元素上。 即display计算值为inline inline-block inline-table table-cell的元素。所以如果元素设置了float: left或者position: absolute，则其vertical-align属性不能生效，因为此时元素的display计算值为block了

转载于:https://www.cnblogs.com/prospective-zkq/p/11489050.html