1.如何理解HTML语义化？
·让人更容易读懂（增加代码可读性）
·让搜索引擎更容易读懂（SEO)
2.块级元素和行内元素
（1）什么是块级元素？
·块元素会在页面中独占一行（自上向下垂直排列）
·默认宽度是父元素的全部（会把父元素撑满）
·默认高度是被内容撑开（子元素撑开）,元素有多少，高度就是多少
（2）什么是行内元素？
·行内元素不会独占页面中的一行，只占自身的大小
·行内元素在页面中自左向右水平排列，如果一行之中不能容纳所有的行内元素，则元素会换到第二行继续自左向右排列（和习惯的书写顺序一致）
·行内元素的默认宽度和默认高度都是被内容撑开
（3）区别
·块级元素独占一行，可以设置元素的宽高，会自动换行,可以容纳行内元素和其他块级元素。
·行内元素不独占一行，不能设置元素的宽高及外边距和内边距,行内元素只能容纳文本或者其他行内元素。
·行内块元素既可以设置宽度和高度，又不会独占一行，但一般不建议使用
·当把行内元素设置为浮动 （float：left/right）后，行内元素的display属性会转换为block，且具备浮动的特性。
·当为行内元素进行定位时，position:absolute与position:fixed都会使得原先的行内元素变为块级元素。
3.盒子模型的宽度如何计算？
（1）标准盒模型
padding和border不被包含在e定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )
（2）怪异盒模型
padding和border被包含在e定义的width和height之内。对象的实际宽度等于设置的width值，即 ( Element width = width ）
4.margin纵向重叠的问题
（1）相邻元素的margin-top和margin-bottom会发生重叠
（2）空白内容的<p>标签也会重叠
5.margin负值问题
（1）margin-top和margin-left负值，元素向上，向左移动
（2）margin-right为负，右侧元素向左移动，自身不受影响
（3）margin-botton为负，下侧元素向上移动，自身不受影响
6.BFC的理解和应用
理解：
（1）块级格式化上下文
（2）一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
形成BFC的常见条件：
（1）float不是none
(2）positon是absolute或fixed
(3）overflow不是visible
（4）display是flex inline-block等
BFC常见应用：
（1）清除浮动
7.float布局问题以及clearfix
（1）如何实现圣杯布局和双飞翼布局
<1>三栏布局，中间一栏最先加载和渲染（内容最重要）
<2>两侧内容固定，中间内容随着宽度自适应
· 使用float布局
· 两侧使用margin负值，以便中间内容横向重叠
· 防止中间内容被两侧覆盖，一个用圣杯布局用padding一个用双飞翼布局用margin
（2）手写clearfix
.clearfix:after {
content: '';
display: table;
clear: both;
}
8.flex花骰子
fiex常用属性：1.fiex-direction 横向 2.justify-content竖向 3.align-items 从开始方向 4.flex-wap 换行 5.align-self 子元素的对齐方式
.box {
display: flex;
justify-content: space-between;
}
.item:nth-child(2) {
align-self:center; //第二项居中对齐
}
.item:nth-child(3) {
align-self: flex-end ; // 第三项尾对齐
}
9.absolute和relative分别依据什么定位？
（1）relative依据自身定位
（2）absolute依据最近一层的定位元素定位
·定位元素 absolute relative fixed body
10.居中对齐的方式
（1）水平居中
·inline元素： text-align： center
·block元素： margin：auto
·absolute元素： left： 50% +margin-left负值
（2）垂直居中
·inline元素： line- height的值等于height
·absolute元素： top：50% + margin-top负值 或 transform（-50%， -50%） 或 top, left, bottom, right = 0 + margin:auto