固定自适应侧边栏原来是这样实现的（持续更新中）

摘要刚刚看了一篇前端面试题的帖子，虽然有些css题可以解答，但是出于学习和好奇的目的，我觉得有必要加深对功能实现原理的理解。整理一份文件，互相勉励。众所周知，内联元素的高度是不能通过直接设置height样式来设置的。我们常用的方法是设置line-height和font-size，让它们变高。不过不知道各位道友有没有发现，比如：你好这个HTML在浏览器中的高度不是16px。尝试设置行高也无济于事，但还是找到了原因。在W3C规范文档中，行中非替换元素的背景高度由字体和字号决定。默认处理与行高无关，但这只是浏览器当前的处理方式（来自参考）。但其实这个对样式影响不大，还是设置display:inline-block;line-height：1、vertical-align属性vertical-algin的理解理解vertical-algin元素相对于baseline（baseline，字符的基线高于底部）的偏移量。除了基线，vertical-align的值也可以是px值。而那些特殊的、有意义的词，也可以理解为对应对应的px值。借用一张表，这里描述的比较详细。下图的栗子是一个扩展句：行内元素的高度=行高+vertical-align**适配（BFC）页面结构时固定边栏的原理