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

摘要

刚看了一个关于前端面试题的帖子，有些css题虽然能答出来，但出于学习的目的与好奇心，觉得有必要加深一下对功能实现原理的了解。整理出一份文档，共勉。

正文

1. 行内元素的高

   众所周知，行内元素是无法通过直接设置height样式来设置高度的，我们常用的方法是设置 line-height, font-size 来撑高。可是不知道道友们有没有发现，比如：

   <span style="font-size: 16px">
     hello
   </span>

   这段HTML在浏览器查看span的高度并不是16px
   
   
   

   尝试设置行高也无济于事，不过还是找到了原因所在。W3C规范文档，行内非替换元素背景高度由字体和字体大小决定的，默认处理和行高没关系，不过这只是浏览器现在的处理方法（摘自参考）。不过实际上这个对样式的影响不是很大,或者设置display: inline-block；line-height: 1。

2. vertical-align属性的理解

   • vertical-algin理解
     vertical-algin 元素相对于基线(baseline, 字符的基线要底部偏上一些)的偏移量。vertical-align的值除了baseline, middle也是可以为px数值的。而那些特殊有意义的单词也可以理解为对应了相应的px值。借用一张表，这里描述的比较详细

   
   下图栗子
   
   扩展一句：行内元素的高 = 行高 + vertical-align**

3. 侧边栏一边固定一边自适应的原理（BFC）

   页面结构

   <div>
      <div class='left'></div>
      <div class='right'></div>
   <div>

    .left {
      float: left;
      width: 200px;
      height: 300px;
    }
    .right {
       height: 350px;
       overflow:hidden;
    }
    // 这样会得到一个left浮在right上的布局（下列的特性1）
    // 当设置right的overflow:hidden,则right产生为bfc区域，left与right就成了并列的布局，且left区域的宽固定，right会自适应（下列特性2）

   主要利用了bfc的两个特性:
   1、每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
   2、BFC的区域不会与float box重叠。