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

摘要

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

正文

行内元素的高
众所周知，行内元素是无法通过直接设置height样式来设置高度的，我们常用的方法是设置 line-height, font-size 来撑高。可是不知道道友们有没有发现，比如：
```
<span style="font-size: 16px">
  hello
</span>
```
这段HTML在浏览器查看span的高度并不是16px

尝试设置行高也无济于事，不过还是找到了原因所在。W3C规范文档，行内非替换元素背景高度由字体和字体大小决定的，默认处理和行高没关系，不过这只是浏览器现在的处理方法（摘自参考）。不过实际上这个对样式的影响不是很大,或者设置display: inline-block；line-height: 1。
vertical-align属性的理解
- vertical-algin理解
  vertical-algin 元素相对于基线(baseline, 字符的基线要底部偏上一些)的偏移量。vertical-align的值除了baseline, middle也是可以为px数值的。而那些特殊有意义的单词也可以理解为对应了相应的px值。借用一张表，这里描述的比较详细
下图栗子

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

侧边栏一边固定一边自适应的原理（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重叠。

来源：https://www.cnblogs.com/jlfw/p/11975628.html

标签

自适应

vertical-align

bfc