前端面试汇总(html+css)
HTML:
1、前端页面有哪三层组成？分别是什么？有什么作用？
前端页面由结构层HTML，表示层CSS，行为层JS组成。
2、HTML5为什么只用写<!DOCTYPE html>？
HTML5不是基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；而HTML4.0基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
3、Doctype作用？标准模式与兼容模式有什么区别？
!DOCTYPE声明位于HTML文档的第一行，处于HTML标签之前，告知浏览器的解析器用什么文档标准解析这个文档，DOCTYPE不存在或者格式不正确会导致文档以兼容模式存在。
4、HTML5有哪些新特性？移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？
1）新特性：
HTML5现在已经不是SGML的子集，主要是关于图像、位置、存储、多任务等功能的增加；
绘画canvas；
用于媒介回放的video和audio元素；
本地离线存储localstorage长期存储数据，浏览器窗口关闭数据不丢失；
sessionStorage的数据在浏览器窗口关闭后自动删除；
语义化标签，footer、header、nav、section等；
表单控件data、email、time、url、search等；
新增了地理定位功能，getCurrentPosition();
2）移除的元素：
big、center、font、s等；
3）支持HTML5新标签：
IE8/IE7/IE6支持通过document.createElement方法创建的标签，可以利用这一特性让浏览器支持性标签。
4）区分HTML和HTML5：
HTML5会声明DOCTYPE；
标签的使用；
h5新增的功能使用；CSS
1.div水平垂直居中
不确定宽高：
方法一：绝对定位+translate；
父级 position:relative;
子级 position:absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
方法二：flex布局；
父级 display: flex;
vertical-align: middle; //垂直
text-align: center; //水平
子级 margin: auto;
方法三：表格样式
父级 display: table-cell;
vertical-align: middle;
text-align: center;
子级 display: inline-block;
确定宽高
方法一：定位+margin负值居中
父级 position:relative;
子级 width:300px;
height:400px;
position:absolute;
top:50%;
left:50%;
margin-left: -150px;
maegin-top:-200px;
方法二：绝对定位下top left right bottom 都设置0
父级 position:relative;
子级 position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto; 相关推荐
liduote 2020-11-13
chenhaotao 2020-11-13
localhost0 2020-11-12
小秋 2020-11-12
lxhuang 2020-11-03
学习web前端 2020-10-27
小焊猪web前端 2020-10-24
杏仁技术站 2020-10-23
南昌千网科技 2020-10-18
liduote 2020-10-16
BlueSkyUSC 2020-10-15
Doniet 2020-10-08
zjutzmh 2020-09-25
PncLogon 2020-09-24
趣IT 2020-09-22
杏仁技术站 2020-09-18
拾光璇旅 2020-09-17
kiven 2020-09-11
lfbooo 2020-09-09