5个CSS、HTML5最常见前端面试题

1、CSS3的盒子模型；

答案：标准盒模型（box-sizing:content-box）、怪异盒模型(box-sizing:border-box)、flex弹性伸缩盒模型、column多列布局盒模型；

2、盒子水平和垂直居中5大方案；

方法一：position 定位（适用于子盒子有宽度和高度的时候）

.parent {
    positon:relative;
}
.child {
    positiong: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin: auto;
}

方法二：position + transform（子盒子有或没有宽高的时候都适用）

缺点：兼容性不是很好；

方法三：flex 布局（子盒子有或没有宽高的时候都适用）

方法四：table-cell（父元素得有固定宽高，子盒子有或没有宽高的时候都适用）

.parent {
display: table-cell;
vertical-align:middle;
text-align:center;
}
.box {
display:inline-block;
}

方法五：（子盒子有宽高的时候都适用）

总结：position（margin、transform）、flex、table-cell、js算宽高。

3、掌握几大经典的布局方案？

答案：圣杯布局、双飞翼布局；
圣杯布局：一个容器里面包含左中右；

双飞翼布局：左右不分不属于container本身，拿出来放在后面

常见思路：左右固定，中间自适应（实现思路：float结合margin、flex布局、position定位）；

4、移动端响应式布局开发的三大方案？

答案：media、rem、flex、vh/vw、...

• media：经常应用于PC端和移动端使用一套布局，不同的宽度使用不同的布局，针对一些不是非常复杂的项目；
• rem：PC端和移动端使用两套完全不一样的布局，此时移动端就使用rem，例如某宝、某商城等等项目；
• flex：用于关注视图结构；
• vh/vw：视口分为100份，1vh为100份之一；

5、什么是标签语义化，有哪些标签？

答案：合理的标签做合适的事情，标签可分为：块级标签，行内标签，行内块标签，区别如下：
1、块级元素：独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽，如：p、div、ul、ol、li、dl、dt、dd、h1~h6、form；；
2、行内元素：可多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高，如：a、span、em、strong、b、i、u、label、br；
3、行内块元素：结合的行内和块级的优点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示；

各种标签之间的转换
1、块级标签转换为行内标签：display:inline;
2、行内标签转换为块级标签：display:block;
3、转换为行内块标签：display：inline-block;