html面试题：
1.如何理解HTML语义化：
语义化就是标题是标题（h1），列表是列表（ui、li），而不是全部用div包裹起来
- 让人更容易读懂(增加代码可读性)
- 让搜索引擎更容易读懂(SEO)
2.块状元素&内联元素？
- display：block/table;如：div h1 h2 table ul ol p 等
- display:inline/inline-block; 如 span img input buttion 等
css知识模块大概分为五部分：
一.布局
1.盒模型宽度计算：
offsetWidth = （内容宽度+内边距+边框），无外边距。答案为100+20+2为122。上面的div1如果加上 box-sizing:border-box 则width包括padding和border，此时offsetwidth为100。
2.margin纵向重叠问题：
- 相邻元素的margin-top和margin-bottom会发生重叠
- 空白内容的也会重叠
上述答案为15px
3.margin 负值问题
- margin-top 和 margin-left负值，元素向上、向左移动
- margin-right负值，右侧元素左移，自身不守影响
- margin-bottom 负值，下方元素上移，自身不受影响
4.BFC理解与应用
-
Block format context，块级格式化上下文
-
一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
形成BFC的常见条件 -
float不是none
-
position是absolute或fixed
-
overflow不是visible
-
display是flex inline-block等
BFC的常见应用： -
清除浮动
5.float 布局
- 圣杯布局和双飞翼布局的目的：
1.三栏布局，中间一栏最先加载和渲染(内容最重要)
2.两侧内容固定，中间内容随着宽度自适应
3. 一般用于pc网页
- 圣杯布局和双飞翼布局的技术总结
使用float布局
两侧使用margin负值，以便和中间内容横向重叠
防止中间内容被两侧覆盖，一个用padding 一个用margin
6.flex 布局
常用语法回顾：
- flex-direction：主轴的方向
- justify-content：主轴对齐方式
- align-items：交叉轴对齐方式
- flex-wrap：是否换行
- align-self：子元素在交叉轴的对齐方式
画三个点的色子
二、定位
- absolute和relative分别根据什么定位？
relative依据自身定位
absolute依据最近一层的定位元素（absolute，relative，fixed；若没有任何定位元素则根据body）定位
- 居中对齐有哪些实现方式？
水平居中和垂直居中
水平居中：
inline元素：text-align：ceter
block元素：margin：auto
absolute元素：left：50% + margin-left负值
垂直居中：
inline元素：line-height的值等于height值
absolute元素：top：50% +margin-top负值
absolute元素：transform（-50%，-50%）
absolute元素：top，left，bottom，right = 0 + margin:auto
三、图文样式
- line-height如何继承
写具体数值，如30px，则继承该值(比较好理解)
写比例，如2/1.5,则继承该比例
写百分比，如200%，则继承计算出来的值
四、响应式
- px,绝对长度单位，最常用
- em,相对长度单位，相对于父元素，不常用
- rem,相对长度单位，相对于根元素，常用于响应式布局
响应式布局的常用方案
- media-query，根据不同的屏幕宽度设置根元素font-size
- rem，基于根元素的相对单位
rem的弊端：“阶梯性”
网页视口尺寸 - window.screen.height //屏幕高度
- window.innerHeight // 网页视口高度
- document.body.clientHeight // body 高度
- vh 网页视口高度的1/100
- vw 网页视口宽度的1/100
- vmax 取两者最大值；vmin取两者最小值(横屏或者竖屏)