前端面试题精选
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标签,没有兼容问题;