前端面试题总结 HTML+CSS篇（一）

最新推荐文章于 2023-10-25 14:43:20 发布

恩言-胡凯赫

最新推荐文章于 2023-10-25 14:43:20 发布

阅读量2.8k

点赞数 1

分类专栏： Web前端文章标签： html css

本文链接：https://blog.csdn.net/Hukaihe/article/details/60478855

版权

Web前端专栏收录该内容

39 篇文章 2 订阅

订阅专栏

介绍一下dl\dt\dd标签

dl是列表标签，dt和dd须出现在dl中，其中，dt是上层项目，dl是下层项目。在浏览器渲染时，二者差别体现在dd会因为-webkit-margin-start属性而距离dt的左边有一定的边距。

行内元素、块级元素、空元素都有哪些？

如果不考虑html5的语义化标签，那么
行内元素有：

img\input\a\span\i\strong\select\button\label\textarea

块级元素有：
div\ul\ol\dl\li\dd\dt\blockquote\p

空元素是指单个标签，中间没有内容的元素，包括：
input\img\br\hr\meta\link

css如何实现垂直水平居中？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS垂直居中</title>
<style>
    .wrapper{
        width: 500px;
        height: 500px;
        background-color: #666;
        /*方式一，方式二 绝对定位的方式*/
        /*position: relative;*/
        /*方式三 基于属性计算*/
        /*overflow: hidden;*/
        /*方式四: 基于vertical-align属性*/
        /*text-align: center;*/
        /*方式五: 使用弹性盒子*/
        /*display: flex;*/
        /*justify-content: center;*/
        /*align-items: center;*/
        /*方式六 基于块级内联元素的特性*/
        line-height: 550px; /*.wrapper.height+1/2*box.height*/
        text-align: center;
    }

    .box{
        width: 100px;
        height: 100px;
        background-color: red;
        /*方式一*/
        /*position: absolute;*/
        /*left:0;*/
        /*right: 0;*/
        /*top:0;*/
        /*bottom:0;*/
        /*margin: auto;*/
        /*方式二*/
        /*position: absolute;*/
        /*left: 50%;*/
        /*top: 50%;*/
        /*margin-left: -50px; !*1/2的width*!*/
        /*margin-top: -50px; !*1/2的height*!*/
        /*方式三*/
        /*margin: calc(50% - 50px) auto;*/
        /*方式四*/
        /*display: inline-block;*/
        /*vertical-align: middle;*/
        /*margin: 0 auto;*/
        /*方式六*/
        display: inline-block;
    }

    /*方式四的辅助元素*/
    /*.help{*/
        /*width: 0;*/
        /*height: 100%;*/
        /*display: inline-block;*/
        /*vertical-align: middle;*/
    /*}*/
</style>
</head>
<body>
<div class="wrapper">
    <div class="box"></div>
    <!--方式四-->
    <!--<div class="help"></div>-->
</div>
</body>
</html>

请简述href和src的区别

href指向网络资源所在位置，建立和当前元素或文档的连接，常用于a标签和link标签。
src指向外部文档，指向的内容将会嵌入到文档中当前标签所在位置。在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
总而言之，我们在可替换的元素上使用src，然而把href用于在涉及的文档和外部资源之间建立一个引用关系。

请简述link和@import的区别

（1）link是XHTML标签，除了加载CSS外，还可以定义RSS（真正简易联合，被设计用来展示选定的数据）等其他事务；@import属于CSS范畴，只能加载CSS。

（2）link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

（3）link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

（4）link支持使用Javascript控制DOM去改变样式；而@import不支持。

什么是CSS hack?有什么作用？

通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号，以达到应用不同的CSS样式的目的。Hack一般又分为三种，条件Hack（if ie）、属性级Hack(_color)、选择符Hack(* + html)

请简述px，rem和em有什么区别？

px是绝对尺寸单位，其值是固定的。而em和rem是字体相对尺寸单位，其值并不固定。em会继承父级元素的字体大小，而rem则是相对于html根元素确定的。

什么是优雅降级、什么是渐进增强？

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

浏览器的内核分别是什么?

IE: trident内核
Firefox：gecko内核

Safari：webkit内核

Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核

Chrome：Blink(基于webkit，Google与Opera Software共同开发)

说说对BFC的理解

BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个 BFC 中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的 margin 会发生折叠。W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。