前端面试题

前端面试题精选
HTML CSS

1.css盒子模型

标准盒子模型：box-sizing：content-box width不包括padding和border

IE盒子模型又叫怪异盒模型：box-sizing：border-bo width包括padding和border

2.HTML5新增的内容

语义化标签：Header、Nav、Section、Footer等 优点：1.提升可访问性 2.seo 3.结构清晰，利于维护

多媒体标签、表单元素

3.Css3新增的特性

边框：border-radius、border-shadow、border-image

背景：Background-size

渐变、文本效果、Transform

动画：animation

4.清除浮动的方式

（1）父级定义overflow：hidden；zoom：1

（2）在浮动元素后面加一个空标签，clear：both；height：0；overflow：hidden

（3）给塌陷的元素添加伪对象

.father：after{

     Content：“随便写”；

     Clear：both；

     display：block；

     Height：0；

     Overflow：hidden；

     Visibility：hidden

}

5.定位的属性值有何区别

Relative相对定位 不脱离文档流，相对于自身定位

Absolute 绝对定位，脱离文档流 相对于父级定位

Fixed 固定定位，脱离文档流，相对于浏览器窗口定位

Static 默认值，元素出现在正常的流中

6.水平垂直居中方法

（1）子元素相对于父元素绝对定位，子元素top，left设置50%，子元素margin-top和margin-left减去各自宽高的一半

（2）子元素相对于父元素绝对定位，子元素上下左右全为0，然后设置子元素margin：auto

（2）父元素设置弹性盒子display flex just-content:center align-items: center;

7.px，rem，em的区别

px，绝对长度单位，像素px是相对于显示器屏幕分辨率来说的

em 相对长度单位，相对于当前对象内文本的字体尺寸

     em的值并不是固定的

     em会继承父级元素的字体大小（参考物是父元素的font-size）

     em中所有的字体都是相对于父元素的大小决定的

rem 相对于html根元素的font-size

1em=1rem=16px 在body中加入font-size：62.5% 这样直接就是原来的px数值除以10加上em就可以

8.Doctype作用：声明文档类型

9.display: none、overflow:hidden、visibility:hidden和opacity: 0之间的区别

（1）display:none;隐藏元素，不占网页中的任何空间 会产生回流和重绘

（2）overflow:hidden 超出的元素隐藏

（3）visibility:hidden 隐藏元素仍需占用与未隐藏时一样的空间，任然会影响页面布局 具有继承性，给父元素设置visibility:hidden

子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别

只会引起页面重绘

(4) opacity: 0 隐藏元素仍需占用与未隐藏时一样的空间，任然会影响页面布局 也有继承性，但是父元素隐藏后，给子元素设opacity:1;，子元素也不会显示

隐藏后的元素可以点击  只会引起页面重绘

10.link和@import区别

（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS（简易信息聚合，是一种基于XML标准，在互联网上被广泛采用的

内容包装和投递协议），rel连接属性等作用；@import是CSS提供的，只能用于加载CSS

（2）页面被加载时，link会同时被加载；而@import引用的CSS会等到页面被加载完成后再加载

（3）link是XHTML标签，没有兼容问题；