重点知识积累

简历

1 简洁明了，重点突出项目经历和解决方案（什么样的技术，技术栈）
2 把个人博客放在简历中，并且定期维护更新博客
3 把个人的开源项目放在简历中，并维护开源项目
4 简历千万不要造假，要保持能力和经历上的真实性

如何看待加班？

1 加班就像借钱，救急不救穷
2 千万不要挑战面试官，不要反铐面试官
3 学会给面试官惊喜，但是不要太多
4 遇到不会回答的问题，说出你知道的也可以
5谈谈你的缺点–说一下你最近正在学什么就可以了（我最近正在学vue,但是学的还不算很精通，大概在学一个月左右吧就应该可以做出来一个像样的项目了）

1 浮动解决方案
2 绝对定位解决方案
3 flexbox解决方案
4 表格布局
5 网格布局解决方案

页面布局小结

1 语义化掌握到位
2 页面布局理解深刻
3 CSS基础知识扎实
4 思维灵活且积极上进
5 代码书写规范

CSS盒模型的认识

1 基本概念：标准模型+IE模型
2 标准模型和IE的区别（计算宽度和高度的不同）
3 CSS是如何设置这两种模型的？
4 JS如何设置获取盒模型对应的宽和高
5 实例题（根据盒模型解释边距重叠）
6 BFC(边距重叠解决方案)（面试面的频率比较高的）

标准模型

1 标准模型的宽度和高度只有content，不包括padding 和 border

IE模型

1 IE模型的宽度和高度=content+padding+border

CSS如何设置这两种类型

box-sizing:content-box:(css3的一个属性) ：标准属性
box-sizing:border-box:IE属性

如何设置获取盒模型对应的宽度和高度

1 dom.style.width/height （内嵌样式）
2 dom.currentStyle.width/height(通过浏览器运行后得到的是及时运行后的结果，缺点：这个属性只有IE浏览器支持)
3 window.getComputedStyle(dom).width / height(通用性更好些)
4 dom.getBoundingClientRect().width/height(这个API也能及时拿到运行后结果，一般用于计算一个元素的绝对位置)

BFC(解决边距重叠的问题)

BFC的基本概念

BFC:块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level  BOX参与
，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关

BFC的原理

如何创建BFC

1 float的值不为none
2 overflow的值不为visible
3 display的值为inline-block,table-cell,table-caption
4 position的值为absolute或fixed

BFC的使用场景

<section class="box" id="sec">
        <style media="screen">
          #sec{
            background: #f00;
          }
          .child{
            height: 100px;
            margin-top: 10px;
            background: yellow
          }
        </style>
        <article class="child"></article>
      </section>
 
      <!-- BFC垂直方向边距重叠 -->
 
      <section id="margin">
        <style>
          #margin{
            background: pink;
            overflow: hidden;
          }
          #margin>p{
            margin: 5px auto 25px;
            background: red;
          }
        </style>
        <p>1</p>
        <div style="overflow:hidden">
          <p>2</p>
        </div>
        <p>3</p>
      </section>
 
      <!-- BFC不与float重叠 -->
      <section id="layout">
        <style media="screen">
          #layout{
            background: red;
          }
          #layout .left{
            float: left;
            width: 100px;
            height: 100px;
            background: pink;
          }
          #layout .right{
            height: 110px;
            background: #ccc;
            overflow: auto;
          }
        </style>
        <div class="left"></div>
        <div class="right"></div>
      </section>
 
      <!-- BFC子元素即使是float也会参与计算 -->
      <section id="float">
        <style media="screen">
          #float{
            background: red;
            overflow: auto;
            /*float: left;*/
          }
          #float .float{
            float: left;
            font-size: 30px;
          }
        </style>
        <div class="float">我是浮动元素</div>
      </section>
      1 去除边距重叠现象
      2 清除浮动（让父元素的高度包含子浮动元素）
      3 避免某元素被浮动元素覆盖
      4避免多列布局由于宽度计算四舍五入而自动换行