史上最精辟的web前端面试题之HTML&CSS

Dear 丶 2022-03-16 07:24 128阅读 0赞

![1240][]

img的alt和title的异同？

\*\*alt \*\*是图片加载失败时，显示在网页上的替代文字；

\*\*title \*\*是鼠标放上面时显示的文字,title是对图片的描述与进一步说明;

这些都是表面上的区别，alt是img必要的属性，而title不是。

对于网站seo优化来说，title与alt还有最重要的一点：

搜索引擎对图片意思的判断，主要靠alt属性。所以在图片alt属性中以简要文字说明，同时包含关键词，也是页面优化的一部分。条件允许的话，可以在title属性里，进一步对图片说明。

简述一下src与href的区别

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

html5新元素？

HTML5 中一些有趣的新特性：

①用于绘画的 canvas 元素；

②用于媒介回放的 video 和 audio 元素；

③对本地离线存储的更好的支持；

④新的特殊内容元素，比如 article、footer、header、nav、section；

⑤新的表单控件，比如 calendar、date、time、email、url、search"

以上是w3c上的原话，简单说就是更符合标准，提供更多功能支持；更加规范，可读性更强，性能有提升，实现功能更加简单方便，就像手机一样，高版本的功能多一些。

更详细请看[html5新元素][html5]

CSS层叠是什么？介绍一下

CSS就是层叠式样式表（Cascading Style Sheets）的简称,CSS中层叠的意思就是在HTML文档树结构中的子标记能够继承所有父标记定义的样式，还可以多次定义自己的样式，全部样式按照从外到内、由先到后的顺序叠加起来，如果不发生冲突，则全部样式都有效，重复定义冲突时按照内层优先、后定义优先的原则进行覆盖，即内层子元素覆盖父元素样式、后定义的覆盖先定义的样式。

CSS实现垂直和水平居中

这是一道经典的问题，实现方法也有很多种，以下是其中一种实现：

具体方案说明：

①使用绝对定位left:50%与margin-left取宽度值一半的复数形式设置水平居中。

②使用绝对定位top:50%与margin-top取高度值一半的复数形式设置垂直居中

HTML结构：

![1240 1][]

CSS代码：

![1240 2][]

.box1 \{      position: relative;      width:600px;      height:600px;      background-color: red;    \}    .content\{        background-color:pink;        width:200px;        height:200px;        position: absolute;//父元素相对定位,使子元素相对父元素定位top:50%;        left:50%;        margin-top:-100px ;//二分之一的height，widthmargin-left:-100px;    \}

下面是小编整理的一整套系统的**web前端**学习教程，加群即可免费领取！

自己整理了一份最全面前端学习资料,从最基础的HTML+CSS+JS \[炫酷特效，游戏，插件封装，设计模式\]到移动端**HTML5**的项目实战的学习资料都有整理，送给每一位前端小伙伴, 有想学习**web前端**的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。

加Q 裙：853597293（招募中）

什么是CSS Hack?

针对不同的浏览器写不同的CSS,就是 CSS Hack。

详情请看以下链接

[CSS hack大全&详解（什么是CSS hack）][CSS hack_CSS hack]

你知道哪些CSS浏览器兼容性问题。

[CSS 多浏览器兼容性问题及解决方案][CSS]

px和em的区别

px和em都是长度单位，区别是，px的值是固定的，是绝对单位，类似的还有pt（磅，1pt=1/72英寸）、pc（皮卡，1pc=12pt）、mm（毫米）、cm（厘米）、in（英寸）绝对单位指定是多少就是多少，计算比较容易。

em的值不是固定的，它是相对单位，em是指当前默认字号大小（继承父元素默认字号）的倍数，可根据父元素字号的改变而自动调整。例如2em是当前字号的2倍，若父元素或默认字号为12pt,则2em就是24pt。类似的还有ex,ex是当前字号高度值（通常是字体尺寸一半）的倍数。

浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

HTML5离线存储

localStorage    长期存储数据，浏览器关闭后数据不丢失；

sessionStorage  数据在浏览器关闭后自动删除。

说说你对语义化的理解

①去掉或者丢失样式的时候能够让页面呈现出清晰的结构；

②有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

③方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

④便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

描述一段语义的HTML代码

（HTML5中新增加的很多标签（如：<article>、<nav>、<header>和<footer>等）就是基于语义化设计原则）

![1240 3][]

**标题< /h1>**

**专注Web前端技术< /h2>< /div>**

给div设置一个宽度，然后添加margin:0 auto属性

div\{width:200px; margin:0 auto; \}

列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？

①

**block**像块类型元素一样显示。

**none**缺省值。像行内元素类型一样显示。

**inline-block**像行内元素一样显示，但其内容像块类型元素一样显示。

\*\*list-item \*\*像块类型元素一样显示，并添加样式列表标记。

②

**absolute**

absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位，若父元素都没有定位则相对于html的根元素（浏览器窗口）定位。

**fixed**

fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。

**relative**

relative生成相对定位的元素，相对于其原来所在的文档流中的位置进行定位。

**static**

static  默认值。没有定位，元素出现在正常的流中 （忽略 top, bottom, left, right z-index 声明）

对BFC规范的理解

BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。

（W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）

描述CSS Reset的作用和用途。

Reset重置浏览器的css默认属性浏览器的品种不同，样式不同，然后重置，让他们统一。

最简化的CSS Reset

![1240 4][]

\*\{outline:0;padding:0;margin:0;border:0;\}

CSS定义的权重

CSS有自己的优先级计算公式，而不仅仅是行间>内部>外部样式；ID>class>元素。

理解选择器的特殊性很重要，特别是在修复bug的时候，但是要尽量避免使用。

[CSS选择器的权重与优先规则][CSS 1]

CSS定位方式有哪些?position属性的值有哪些?他们之间的区别是什么?

在CSS中关于定位的内容是：position:relative | absolute | static | fixed

•    static 自动定位，自动定位就是元素在页面普通文档流中由HTML自动定位，普通文档里中的元素也称为流动元素。不能通过z-index进行层次分级。

•    relative 相对定位，相对定位不脱离文档流，参考其在原来文档流中的位置，通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。

•    absolute 绝对定位，绝对定位脱离文档流，依据最近的已经定位（绝对、相对或固定定位）的父元素，通过 top,bottom,left,right 定位。当父级 position 为 static 时，absolute元素将依据body根元素（浏览器窗口）进行定位，可以通过z-index进行层次分级。

•    fixed 固定定位，固定定位与父元素无关（无论父元素是否定位），直接根据浏览器窗口定位，且不随滚动条拖动页面而滚动，可通过z-index进行层次分级。

CSS中margin和padding的区别

margin是外边距，属于元素之外，相邻元素的margin可以融合。

padding是内边距，在元素之内，相邻元素的padding不可融合。

使用CSS预处理器吗？喜欢哪个？

[什么是css预处理器？现在阶段我们用不用,怎样用？][css]

[1240]: /images/20220316/4c60337eff4b430da46b51c69c719ccb.png
[html5]: https://link.jianshu.com/?t=http://www.runoob.com/html/html5-new-element.html
[1240 1]: /images/20220316/e866839befff4e4bb12a94528289abca.png
[1240 2]: /images/20220316/8047dafa08294ebcb7778d771da5c5ea.png
[CSS hack_CSS hack]: https://link.jianshu.com/?t=http://www.kwstu.com/Admin/ViewArticle/201409011604277330
[CSS]: https://link.jianshu.com/?t=http://www.jb51.net/css/23232.html
[1240 3]: /images/20220316/9215f52af9604dec8aa9a20c1a974ce8.png
[1240 4]: /images/20220316/27d9c88766a8452da7206a693729e64a.png
[CSS 1]: https://link.jianshu.com/?t=http://www.nowamagic.net/csszone/css_SeletorPriorityRules.php
[css]: https://link.jianshu.com/?t=http://blog.sina.com.cn/s/blog_90e614f1010180sl.html