HTML面试题
·如何理解HTML语义化
HTML结构语义化，是最近几年才提出来的，以前的html结构，都是一堆没有语义的冷冰冰的标签。最泛滥的就是div+css，以前的页面，一打开就是一堆div+css，为了改变这种这种状况，开发者们和官方提出了让HTML结构语义化的概念，并且官方w3c，也在HTML5给出了几个新的语义化的标签。
·默认情况下，哪些HTML标签是块级元素，哪些是内联元素
display:block/table;div、h1、table、ul、ol、p等
display:inline/inline-block;有span、img 、input、button等
CSS面试题
分析知识模块
· 布局
1.盒模型的宽度如何计算？
· offsetWidth = （内容宽度 + 内边距 + 边框）无外边框
该盒子的宽度为 122px
2.margin纵向重叠的问题
相邻元素的 margin-top 和 margin-bottom 会发生重叠（包括空标签的内容也会重叠）
3.margin负值的问题
对margin的top left right bottom设置负值，有何效果
1、margin-top 和 margin-left 负值，元素向上、向左移动
2、margin-right 负值，右侧元素左移，自身不受影响
3、margin-bottom负值，下方元素上移，自身不受影响
4.BFC的理解和运用
BFC是：Block format context，块级格式化上下文，它是一块独立渲染区域，内部元 素的渲染不会影响边界以外的元素
形成BFC的常见条件：
1、float 不是 none；
2、position 是 absolute 或 fixed；
3、overflow 不是 visible；
4、display 是 flex，inline-block 等；
BFC 常见的应用：清除浮动；
5.float布局的问题，以及clearfix
如何实现圣杯布局和双飞翼布局？
目的：
1、三栏布局，中间一栏最先加载和渲染（内容最重要）；
2、两侧内容固定，中间内容随着宽度自适应；
3、一般用于PC网页；
技术总结：
1、使用 float 布局；
2、两侧使用 margin 负值，以便和中间内容横向重叠；
3、防止中间内容被两侧覆盖，一个用 padding 一个用 margin；
手写clearfix
.clearfix {
content: '';
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* 兼容 IE 低版本 */
}
6.flex布局
flex实现一个三点的骰子
结论：将最外层的盒子设置成弹性盒子display：flex，并使它的两端横向对齐，紧接着将第二个子元素设置align-self：center；使其垂直方向居中对齐，将第三个子元素设置align-self：flex-end；使其垂直方向尾对齐。
· 定位
·absolute和relative分别依据什么定位
1、relative：是依据自身进行定位的；
2、absolute：是依据最近一层的定位元素（也就是父元素）进行定位。
定位元素：absolute、relative、fixed 或者直接找到 body
2.居中对齐有哪些实现方式
水平居中：
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（-50%，-50%）；
4、absolute 元素：top，left，bottom，right = 0、margin：auto；
· 图文样式
·line-height的继承问题
1、当 line-height 为具体数值时，如 line-height ：30px；则继承该值
2、当 line-height 为比例时，如 line-height：2 / 1.5，则继承该比例
3、当 line-height 为百分比时，如 line-height：200%，则继承计算出来的值
· 响应式
1.rem是什么？
rem是相对长度单位，相对于根元素进行设置大小的，常用于响应式布局
2.如何实现响应式
1、media-query，根据不同的屏幕宽度设置根元素 font-size
2、rem，基于根元素的相对单位
· CSS3
1.关于CSS3动画
