关于Web的学习（18.5.21）——css篇

1.li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。

详解：https://blog.csdn.net/sjinsa/article/details/70919546

2.为什么要初始化CSS样式？

因为浏览器兼容问题，不同的浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

当然，初始化样式会对SEO有一定影响，但鱼和熊掌不可兼得，但力求影响最小的情况初始化。

最简单的初始化方法 * {padding: 0; margin: 0;} （强烈不建议）

参考：CSS样式初始化代码

3.absolute的containing block(容器块)计算方式跟正常流有什么不同？

无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：

• 若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；
• 否则,则由这个祖先元素的 padding box 构成。
• 如果都找不到，则为 initial containing block。

补充：

• static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）
• absolute: 向上找最近的定位为absolute/relative的元素
• fixed: 它的containing block一律为根元素(html/body)，根元素也是initial containing block

4.CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？

对于普通元素visibility:collapse会将元素完全隐藏，不占据页面布局空间，与display:none表现相同。如果目标元素为table，visibility:collapse将table隐藏，这点和display:none不同，依然不会占据页面布局空间。

详细（带测试）：CSS里的visibility属性有个鲜为人知的属性值：collapse

网上很多说法说：谷歌浏览器中collapse和display:none效果相同，只有IE和Firefox中其table才会隐藏，但经过实际测试，发现现版本的谷歌浏览器也可以隐藏，且不占据空间。

5.position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

如果元素的display为none，那么元素不被渲染，position、float不起作用，如果元素拥有position:absolute或者position:fixed属性那么元素将为绝对定位，float不起作用。如果元素float属性不是none，元素会脱离文档流，根据float属性值来显示。有浮动，绝对定位，inline-block属性的元素，margin不会和垂直方向上的其他元素margin折叠。

详解：https://www.cnblogs.com/jackyWHJ/p/3756087.html