前端面试高频考点重中之重（HTML、CSS部分）持续更新~

html

如何理解HTML语义化

1. 让人更容易读懂

2. 让搜索引擎更容易读懂（seo）

块状元素&内联元素？

1. 块状元素：
   display: block/table; 有div h1 h2 table ul ol p 等
   特点： 独占一行
2. 内联元素：
   display: inline/inline-block 有span img input button 等
   特点： 不会独占一行，都在一行之内往后挤，直到右边边距换行为止

css

盒模型宽度计算

• offsetWidth = (内容宽度+内边距+边框) ，无外边距
• box-sizing: border-box ， 元素的width不仅仅是内容宽度，而且包含了内容宽度+内边距+边框

例题：

答案：100+10+10+1+1=122

margin重叠问题

• 相邻元素的margin-top 和 margin-bottom会发生重叠

• 空白内容的 < p > 也会重叠，类似被忽略掉的样子

例题：

答案：15

margin负值问题

• margin-top 和 margin-left 负值，元素向上、向左移动
• margin-right 负值，右侧元素左移，自身不受影响
• margin-bottom 负值，下方元素上移，自身不受影响

BFC

• 定义：独立渲染区域，内部元素渲染不会影响外部元素

• 形成BFC的条件：

  float 不是 none

  position 是 absolute 或fixed

  overflow 不是 visible

  display 是 flex 或 inline-block

• BFC的常见应用，清除浮动

float 布局

圣杯布局和双飞翼布局的技术总结：

1. 使用float布局
2. 两侧使用margin负值，以便和中间内容横向重叠
3. 防止中间内容被两侧覆盖，一个用padding 一个用margin

插一句：这两个布局涵盖了css很多方面知识，所以很多公司会去考察，自己多打代码实现以下

手写clear fix

清除浮动

.clearfix:after {
	content: '';
	display: table;
	clear: both;
}
.clearfix {
	*zoom: 1; /* 兼容IE低版本 */
}

Flex布局

flex布局是面试中常考布局类型，常见于画色子题目

.box {
	display: flex; /* flex 布局 */
    justify-content: space-between; /* 两端对齐 */
}
.item {
    /* 背景色，大小，边框等*/
}
.item:nth-child(2) {
    align-self: center; /* 第二项居中对齐 */
}
.item:nth-child(3) {
    align-self: flex-end; /* 第三项尾对齐 */
}

关于flex布局画筛子详细代码与相关知识见此文章 面试高频题目—flex画色子

absolute 和 relative定位

• absolute依据最近一层的定位元素定位
• relative依据自身定位

垂直居中和水平居中

此部分内容传送门：absolute和relative定位总结

line-height如何继承

• 写具体数值，如30px，则继承该值
• 写比例，如2/15，则继承该比例
• 写百分比，如200%，则继承计算出来的值（考点）

响应式系列

rem

vm/vh

响应式系列题目也是面试题的重中之重，关于此部分知识，由于篇幅问题，移步传送门 搞定前端面试 响应式问题

关于 CSS3动画

除非面试专门做动画的职位，一般不是面试考察重点

---

有话要说：

1. 此篇文章总结了前端面试中 html 和 css 部分面试常考的重点，虽然内容不是很多，但是没有废话都是重点，希望大家好好掌握。
2. 前端面试中，JS考察的占比约60-70%，后面会给大家继续带来JS部分的考察重点，多多关注
3. 有什么问题或需要补充的欢迎评论区留言，文章持续更新！！