简历
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避免多列布局由于宽度计算四舍五入而自动换行