html5css3常见面试题,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;