2019春招前端面试总结（HTML/CSS篇）

H5新特性

语义化：header、footer、aside、nav

表单：datalist、keygen、output

音频：video、audio、source、track

Canvas绘图、SVG、地理位置、拖放API、WEB存储

 

BFC

原理：

1. 内部的box在垂直方向上一个接一个的排列；
2. 在BFC这个元素的垂直方向的边距会发生重叠；
3. BFC区域不会与浮动元素重叠
4. BFC是个独立的容器，内外元素不会发生影响
5. 计算BFC高度时，也会计算浮动元素的高度

创建BFC：

1. 根元素
2. float不为none
3. Position不为relative或static
4. Display为block、table、flex等
5. Overflow除了visible

 

引申题目：给

中的第一个子元素设置margin-top会发生什么？为什么？如何解决？

会改变父元素的位置（父元素magin-top）

原因：1.盒模型margin合并

  2.直白讲：父元素的第一个子元素如果碰不到有效的padding或border就会一直向上找，并把自己margin给父元素或祖先使用。

    解决方法：给父元素一个有效的border或padding。

 

清除浮动

1. 固定高度
2. 底部加空标签并clear:both;
3. 父元素overflow：hidden
4. 父元素定义伪元素并zoom：1

 

CSS盒模型

标准盒模型：width=content;

IE盒模型：width = border+padding+content

Box-sizing:content-box/border-box

 

实现垂直水平居中

1.Position:absolute;

Top：50%；left：50%；

Translate：transform（-50%，-50%）

2.display:flex; justify-content:center; align-items:center;

1. Position:absolute; top:0 left:0;right:0;bottom:0; margin: auto;

选择器优先级（7）

!important>行内选择器>id选择器>类选择器>标签选择器>通配符>继承

DIV+CSS布局相较于table的优势

1. 符合W3C标准。即结构、行为、表现分离，带来足够好的可维护性。
2. 搜索引擎更加友好。
3. 样式调整更加方便。
4. 网页加载速度快，用户体验好。

 

隐藏元素的方法（5）

1. opacity: 0; 透明度
2. Display: none;
3. Visibility: hidden;
4. Clip-path: polygon();  通过裁剪(IE不支持)
5. Position: 把元素脱离文档流移出视觉区域。

opacity和rgba的区别

Rgba：red，green，blue，alpha

Rgba只作用于元素的颜色或其背景色，没有继承性。

Opacity作用于元素及其内所有内容。

css的引入方式有哪些？Link和@import的区别是什么？

1. 内联方式：
2. 嵌入方式:
3. 外联方式：
4. 导入方式：

区别：

1.加载内容：link除加载css外，还可加载Rss等其他事务，@import属于css范畴，只能加载css；

2.载入时间：link引入css时，在页面载入的同时加载；@import在网页完全载入后加 载；

3.兼容问题：link是XHTML标签，无兼容性问题； @import是在css2.1提出的，低版本 不支持；

4.link支持使用js控制DOM改变样式，@import不支持。