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