前言
因为一直以来都感觉很多概念比较模糊，为了捡回来我忽略的细节，写下这篇文章，我会认真的分析每一个问题，如果内容多一点的话会单独链接出来。 更新中。。。
HTML
如何理解语义化?
默认情况下，哪些标签是块状元素，哪些标签是内联元素？
- 块状元素
特点是独占一行
display:block/table; 有div h1 h2... table ul ol p 等
- 内联元素
特点不会独占一行，会挨着往后排，知道浏览器边缘换行为止
display:inline/inline-block; 有span img input button等
CSS - 布局
margin 纵向重叠的问题？
相邻元素的 margin-top 和 margin-bottom 会发生重叠
margin 负值的问题？
margin-top 和 margin-left 负值，元素向上、向左移动
margin-right 负值，右侧元素左移，自身不受影响
margin-bottom 负值，下方元素上移，自身不受影响
BFC的理解和应用
Block format context ,块级格式化上下文
一块独立渲染区域，内部元素渲染不会影响边界以外的元素
形成 BFC 的常见条件
- float 不是 none
- position 是 absolute 或fixed
- overflow 不是 visible
- display 是 flex inline-block 等
BFC的常见应用
- 清除浮动
float 布局的问题，以及clearfix（清除浮动）
圣杯布局 和 双飞翼布局的目的
- 三栏布局，中间一栏最先加载和渲染（内容最重要）
- 两侧内容固定，中间内容随着宽度自适应
- 一般用于 pc 网页
圣杯布局 和 双飞翼布局的技术总结
- 使用 float 布局
- 两侧使用 margin 负值，以便和中间内容横向重叠
- 防止中间内容被两侧覆盖，一个用padding，一个用margin
圣杯布局代码
双飞翼布局代码C