前端面试汇总(html+css)

2024年1月19日 157次阅读 来源: Melody

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;
    原文作者：Melody
    原文地址: https://segmentfault.com/a/1190000019650952
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞