一、HTML面试题
1.如何理解语义化？
让人更容易读懂代码
让搜索引擎 更容易读懂（SEO）与搜索引擎建立良好的沟通，帮助爬虫抓取更有效的信息，爬虫依靠标签来确定每个关键词的上下文和权重）
2.块状元素，和内联元素？
块状元素
display:block/table;有div h1 h2 table ul ol p等 （不管里面有多少内容，都独占一行）
内联元素：
display:inline/inline-block;有span img input button等（不独占一行，会挨着往后排，直到浏览器的边缘换行为止）
二、css布局
1.BFC理解和应用
offsetWidth=(内容宽度+内边距+边框）无外边距
2.margin纵向 重叠.
相邻元素的margin-top和margin-bottom会发生重叠；
空白内容的<p></p>也会重叠，一层一层的重叠，被忽略，p标签的高度就不算了。
3.margin负值问题
margin负值问题
margin-top和margin-left负值，元素向上、向左移动
margin-right负值，右侧元素左移，自身不受影响
margin-bottom负值，下方元素上移，自身不受影响
4.BFC理解与应用
块级格式化上下文，一块独立渲染区域内部元素的渲染i不会影响边界以外的元素
形成条件
①float 不是none
②position是absolute或者fixed
③overflow不是visible
④display不是flex inline-block等
BFC常用应用
1.清除浮动
5.float布局
<1>圣杯布局和 双飞翼布局的目的
①两栏布局，中间一栏最先加载和渲染（内容最重要）
②两侧内容固定，中间内容随着宽度自适应
③一般用于pc网页
<2>技术总结：
使用float布局
两侧使用margin负值，以便和中间内容横向重叠
防止中间内容被两侧覆盖，一个用padding，一个用margin
<3>实现思路：
（1）圣杯布局
①使用container包裹center、left、right，（center的div一定要放在第一位，也就是按center、left、right的顺序依次把三个部分放进container容器里）【为了让center部分最先显示】，并且给center设置width:100%;（使center的宽度始终和父元素一致，从而实现页面宽度缩小时center宽度跟着改变）；
②left、center、right三部分设置float：left，给container/footer设置清除浮动（clear：both）；【给container设置或者footer设置都是可以的，清除浮动是清除浮动元素给自身带来的影响。所以也可以给footer设置，让它不受上面浮动元素的影响，能够回到原来的位置上】【这里存在一个特殊的情况，在正常情况下，当上面的元素浮动，下面的footer是要移动在center下面被它挡住。但是文字有特殊的解析机制，它会找到一个不挡住它的位置显示，所以footer就到了第二行，因这样可以显示它里面的文字了。】
③给container设置padding-left（left容器的宽度），（padding-right）right容器的宽度，使之后left和right元素移上来有位置；
④给left设置margin-left：-100%;（使left的margin-left为负的父元素宽度的100%，这样它就可以移上去和center位于一行了）；然后设置position：relative;right：自身宽度值;（这样就使left元素显示到了center的左侧）
⑤给right元素设置margin-right：负的自身宽度值;【给元素设置margin-right为负值，就相当于元素自身的宽度缩小。当margin-right的值和元素自身的宽度值一样大时，就相当于元素自身宽度为0了，这时它可以认为是不存在的。所以这样设置可以使right元素移到上面一行，位于center的右侧】
6.flex布局
···常用语法
display：flex（弹性布局）
属性：
flex-direction用在父容器上，定义子元素的排列方向
flex-direction：排列方式，默认横向（row，且起点在左边）
flex-direction：row-reverse（横向排，起点在右边）
flex-direction：column（竖着排，起点在上面column-reverse，起点在下面）
justify-content（用在父元素上，定义子元素的对齐方式）
属性：
flex-start：开始对齐（左对齐）
flex-end：结束对齐（右对齐）
center：居中对齐
space-between：两端对齐，子元素之间间隔相同
space-around：子元素之间间隔相同，且与父元素间隔1/2距离
align-items：（用在父元素上，定义子元素在交叉轴上的对齐方式，交叉轴是和主轴垂直的轴）
flex-start：交叉轴起点对齐
flex-end：交叉轴终点对齐
center：交叉轴中心对齐
baseline：了解
stretch：了解
align-self：（用在子元素上，定义元素在交叉轴上的对齐方式，交叉轴是和主轴垂直的轴）
其属性和align-items一模一样，只是align-items用在父元素上，align-self用在子元素上
7.居中问题
水平居中
inline元素：text-align:centerblock元素：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
