如何理解HTML语义化
- 让人更容易读懂（增加代码可读性）
- 让搜索引擎更容易读懂（SEO）
盒模型宽度计算
- offsetWidth =（内容宽度+内边距+边框），无外边距
box-sizing： border-box
margin纵向重叠问题
- 相邻元素的margin-top和margin-bottom会发生重叠
- 空白的
<p></p>也会重叠
margin的负值问题
- margin-top和margin-left为负值，元素向上、向左移动
- margin-right为负值，右元素左移，自身不受影响
- margin-bottom为负值，下方元素上移，自身不受影响
可以理解为margin为正值时向外凸，为负值时向内凹，自动补齐
BFC的理解与应用
- 是一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
- 形成BFC的常见条件：
- float不是none
- position是absolute或fixed
- overflow不是visible
- display是flex inline-block等
- BFC常见的应用： 清除浮动
圣杯布局和双飞翼布局的技术总结
- 使用 float 布局
- 两侧使用 margin 负值，一遍和中间内容横向重叠
- 防止中间内容被两侧覆盖，一个用 padding（圣杯），一个用 margin（双飞翼）
手写 clearfix
.clearfix:after {
content: '';
display: block;
clear: both;
}
flex布局常用语法
（https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html）
面试题
absolute和relative定位
- relative依据自身定位
- absolute依据最近一层的定位元素定位（absolute relative fixed body）
居中对齐的实现方式
- 水平居中：
1. inline元素： text-align：center
2. block元素： margin： auto
3. absolute元素： left： 50% + margin-left为负值 - 垂直居中：
1. inline元素： line-height的值等于height的值
2. absolute元素： top： 50% + margin-top为负值
3. absolute元素：transform：teanslate(-50%, -50%)
4. absolute元素： top，left，bottom，right = 0 + margin： auto
line-height如何继承
p标签的line-height是多少
- 写具体数值，如 30px ,则继承该值
- 写比例， 如2/1.5，则继承该比例
- 写百分比，如200%，则继承计算出来的值（考点）
所以上面的题line-height为40px
响应式布局的常用方案
方案一
- media-query，根据不同的屏幕宽度设置根元素font-size
- rem： 相对长度单位，相对于根元素
方案二
- window.screen.height （屏幕高度）
- window.innerHeight （网页视口高度）
- document.body.clientHeight （body高度）
- vh： 网页视口高度的1/100
- vm： 网页视口宽度的1/100
- vmax：取两者最大值，vmin： 取两者最小值
