前端面试之-----html+css(21-60)

Myth丶恋晨 2021-09-20 02:22 367阅读 0赞

**21、什么是 Css Hack？ie6,7,8 的 hack 分别是什么？**

答案：针对不同的浏览器写不同的 CSS code 的过程，就是 CSS hack。

示例如下：

\#test \{

width:300px;

height:300px;

background-color:blue; /\*firefox\*/

background-color:red\\9; /\*all ie\*/

background-color:yellow; /\*ie8\*/

\+background-color:pink; /\*ie7\*/

\_background-color:orange; /\*ie6\*/ \}

:root \#test \{ background-color:purple\\9; \} /\*ie9\*/

@media all and (min-width:0px)\{ \#test \{background-color:black;\} \} /\*opera\*/

@media screen and (-webkit-min-device-pixel-ratio:0)\{ \#test \{background-color:gray;\} \} /\*chrome

and safari\*/**22、请用 Css 写一个简单的幻灯片效果页面**

答案：知道是要用 css3。使用 animation 动画实现一个简单的幻灯片效果。

/\*\*HTML\*\*/

div.ani

/\*\*css\*\*/

.ani\{

width:480px;

height:320px;

margin:50px auto;

overflow: hidden;

box-shadow:0 0 5px rgba(0,0,0,1);

background-size: cover;

background-position: center;

\-webkit-animation-name: "loops";

\-webkit-animation-duration: 20s;

\-webkit-animation-iteration-count: infinite;

@-webkit-keyframes "loops" \{

0% \{

background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg)

no-repeat;

25% \{

background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg)

no-repeat;

50% \{

background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg)

no-repeat;

75% \{

background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg)

no-repeat;

100% \{

background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg)

no-repeat;\}

**24、行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可**

**设置吗？**

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;

宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

和相邻的内联元素在同一行;

宽度(width)、高度(height)、内边距的 top/bottom(padding-top/padding-bottom)和外边

距的 top/bottom(margin-top/margin-bottom)都不可改变（也就是 padding 和 margin 的

left 和 right 是可以设置的），就是里面文字或图片的大小。

那么问题来了，浏览器还有默认的天生 inline-block 元素（拥有内在尺寸，可设置高宽，

但不会自动换行），有哪些？

答案： 、 、、 、。

**25、什么是外边距重叠？重叠的结果是什么？**

外边距重叠就是 margin-collapse。

在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一

个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠

外边距。

折叠结果遵循下列计算规则：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。

两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。

两个外边距一正一负时，折叠结果是两者的相加的和。

**26、rgba()和 opacity 的透明效果有什么不同？**

rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的

所有内容的透明度，而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明

效果！）

**27、css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？**

垂直方向：line-height

水平方向：letter-spacing

那么问题来了，关于 letter-spacing 的妙用知道有哪些么？

答案:可以用于消除 inline-block 元素间的换行符空格间隙问题。

**28、如何垂直居中一个浮动元素？**

// 方法一：已知元素的高宽

\#div1\{

background-color:\#6699FF;

width:200px;

height:200px;

position: absolute; //父元素需要相对定位

top: 50%;

left: 50%;

margin-top:-100px ; //二分之一的 height，width

margin-left: -100px;

//方法二:未知元素的高宽

\#div1\{

width: 200px;

height: 200px;

background-color: \#6699FF;

margin:auto;

position: absolute; //父元素需要相对定位

left: 0;

top: 0;

right: 0;

bottom: 0;

\}27

那么问题来了，如何垂直居中一个?（用更简便的方法。）

\#container //的容器设置如下

display:table-cell;

text-align:center;

vertical-align:middle;

**29、px 和 em 的区别。**

px 和 em 都是长度单位，区别是，px 的值是固定的，指定是多少就是多少，计算比较容易。

em 得值不是固定的，并且 em 会继承父级元素的字体大小。

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

10px=0.625em。

**30、描述一个”reset”的 CSS 文件并如何使用它。知道 normalize.css 吗？你**

**了解他们的不同之处？**

重置样式非常多，凡是一个前端开发人员肯定有一个常用的重置 CSS 文件并知道如何使用它

们。他们是盲目的在做还是知道为什么这么做呢？原因是不同的浏览器对一些元素有不同的

默认样式，如果你不处理，在不同的浏览器下会存在必要的风险，或者更有戏剧性的性发生。

你可能会用 Normalize 来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供了

一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗

体的标题）。

在这一方面，无法做每一个复位重置。它也确实有些超过一个重置，它处理了你永远都不用

考虑的怪癖，像 HTML 的 audio 元素不一致或 line-height 不一致。

**31、Sass、LESS 是什么？大家为什么要使用他们？**

他们是 CSS 预处理器。他是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。

例如 Less 是一种动态样式语言. 将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函

数. LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可一在服务端运行

(借助 Node.js)。

为什么要使用它们？结构清晰，便于扩展。

可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，

减少无意义的机械劳动。

可以轻松实现多重继承。

完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所

以老的 CSS 代码也可以与 LESS 代码一同编译。

**32、display:none 与 visibility:hidden 的区别是什么？**

display : 隐藏对应的元素但不挤占该元素原来的空间。

visibility: 隐藏对应的元素并且挤占该元素原来的空间。

即是，使用 CSS display:none 属性后，HTML 元素（对象）的宽度、高度等各种属性值都将

“丢失”;而使用 visibility:hidden 属性后，HTML 元素（对象）仅仅是在视觉上看不见（完

全透明），而它所占据的空间位置仍然存在。

**34、CSS 中 link 和@import 的区别是：**

Link 属于 html 标签，而@import 是 CSS 中提供的

在页面加载的时候，link 会同时被加载，而@import 引用的 CSS 会在页面加载完成后才会加

载引用的 CSS

@import 只有在 ie5 以上才可以被识别，而 link 是 html 标签，不存在浏览器兼容性问题

Link 引入样式的权重大于@import 的引用（@import 是将引用的样式导入到当前的页面中）

**35、简介盒子模型：**

CSS 的盒子模型有两种：IE 盒子模型、标准的 W3C 盒子模型模型

盒模型：内容、内边距、外边距（一般不计入盒子实际宽度）、边框**36、为什么要初始化样式？**

由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同浏

览器之间的显示差异

但是初始化 CSS 会对搜索引擎优化造成小影响

**37、BFC 是什么?**

BFC（块级格式化上下文），一个创建了新的 BFC 的盒子是独立布局的，盒子内元素的布局

不会影响盒子外面的元素。在同一个 BFC 中的两个相邻的盒子在垂直方向发生 margin 重叠

的问题

BFC 是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外

元素的布局，这个渲染区域只对块级元素起作用

**38、html 语义化是什么？**

当页面样式加载失败的时候能够让页面呈现出清晰的结构

有利于 seo 优化，利于被搜索引擎收录（更便于搜索引擎的爬虫程序来识别）

便于项目的开发及维护，使 html 代码更具有可读性，便于其他设备解析。**39、Doctype 的作用？严格模式与混杂模式的区别？**

用于告知浏览器该以何种模式来渲染文档

严格模式下：页面排版及 JS 解析是以该浏览器支持的最高标准来执行

混杂模式：不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容

**40、IE 的双边距 BUG：块级元素 float 后设置横向 margin，ie6 显示的 margin**

**比设置的较大。解决：加入\_display：inline**

**41、HTML 与 XHTML——二者有什么区别？**

1. 所有的标记都必须要有一个相应的结束标记

2. 所有标签的元素和属性的名字都必须使用小写

3. 所有的 XML 标记都必须合理嵌套

4. 所有的属性必须用引号 "" 括起来

5. 把所有 < 和 & 特殊符号用编码表示

6. 给所有属性赋一个值

7. 不要在注释内容中使用 "--"

8. 图片必须有说明文字

**42、html 常见兼容性问题？**

1.双边距 BUG float 引起的 使用 display

2.3 像素问题 使用 float 引起的 使用 dislpay:inline -3px

3.超链接 hover 点击后失效 使用正确的书写顺序 link visited hover active

4.Ie z-index 问题 给父级添加 position:relative

5.Png 透明 使用 js 代码 改

6.Min-height 最小高度 ！Important 解决’

7.select 在 ie6 下遮盖 使用 iframe 嵌套

8. 为 什 么 没 有 办 法 定 义 1px 左 右 的 宽 度 容 器 （ IE6 默 认 的 行 高 造 成 的 ， 使 用

over:hidden,zoom:0.08 line-height:1px）

9.IE5-8 不支持 opacity，解决办法：

.opacity \{

opacity: 0.4

filter: alpha(opacity=60); /\* for IE5-7 \*/

\-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /\* for IE

8\*/

\}10. IE6 不支持 PNG 透明背景，解决办法: IE6 下使用 gif 图片

**43、对 WEB 标准以及 W3C 的理解与认识**

答：标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链 css 和 js 脚本、

结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更

广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提

供打印版本而不需要复制内容、提高网站易用性。

**44、行内元素有哪些?块级元素有哪些?CSS 的盒模型?**

答：块级元素：div p h1 h2 h3 h4 form ul

行内元素: a b br i span input select

Css 盒模型:内容，border ,margin，padding

**45、前端页面有哪三层构成，分别是什么?作用是什么?**

答：结构层 Html 表示层 CSS 行为层 js。

**46、Doctype 作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何**

**意义?**

（1）、 声明位于文档中的最前面，处于 标签之前。告知浏览器的

解析器，用什么文档类型 规范来解析这个文档。

（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。

（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以

防止站点无法工作。

（4）、DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。

**47、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？**

（1）CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认

的 display 值，比如 div 默认 display 属性值为“block”，成为“块级”元素；span 默认

display 属性值为“inline”，是“行内”元素。

（2）行内元素有：a b span img input select strong（强调的语气） 块级元素有：div ul

ol li dl dt dd h1 h2 h3 h4…p

（3）知名的空元素：

--------------------

鲜为人知的是：

高级中级

**48、CSS 的盒子模型？**

（1）两种， IE 盒子模型、标准 W3C 盒子模型；IE 的 content 部分包含了 border 和

pading;

（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).

**49、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3 新增**

**伪类有那些？**

\* 1.id 选择器（ \# myid）

2.类选择器（.myclassname）

3.标签选择器（div, h1, p）

4.相邻选择器（h1 + p）

5.子选择器（ul < li）

6.后代选择器（li a）

7.通配符选择器（ \* ）

8.属性选择器（a\[rel = "external"\]）

9.伪类选择器（a: hover, li: nth - child）

\* 可继承： font-size font-family color, UL LI DL DD DT;

\* 不可继承 ：border padding margin width height ;

\* 优先级就近原则，样式定义最近者为准;

\* 载入样式以最后载入的定位为准;

优先级为:

!important > id > class > tag

important 比 内联优先级高

CSS3 新增伪类举例：

p:first-of-type 选择属于其父元素的首个

元素的每个

元素。

p:last-of-type 选择属于其父元素的最后

元素的每个

元素。

p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。

p:only-child 选择属于其父元素的唯一子元素的每个

元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。

:enabled、:disabled 控制表单控件的禁用状态。

:checked，单选框或复选框被选中。

**50、如何居中 div,如何居中一个浮动元素?**

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

div\{

width:200px;

margin:0 auto;\}

居中一个浮动元素

确定容器的宽高 宽 500 高 300 的层

设置层的外边距

.div \{

Width:500px ; height:300px;//高度可以不设

Margin: -150px 0 0 -250px;

position:relative;相对定位

background-color:pink;//方便看效果

left:50%;

top:50%;

**51、浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？原因，解决**

**方法是什么，常用 hack 的技巧 ？**

\* IE 浏览器的内核 Trident、Mozilla 的 Gecko、google 的 WebKit、Opera 内核 Presto；

\* png24 为的图片在 iE6 浏览器上出现背景，解决方案是做成 PNG8.

\* 浏 览 器 默 认 的 margin 和 padding 不 同 。 解 决 方 案 是 加 一 个 全 局 的

\*\{margin:0;padding:0;\}来统一。

\* IE6 双边距 bug:块属性标签 float 后，又有横行的 margin 情况下，在 ie6 显示 margin

比设置的大。

浮动 ie 产生的双倍距离 \#box\{ float:left; width:10px; margin:0 0 0 100px;\}

这种情况之下 IE 会产生 20px 的距离，解决方案是在 float 的标签样式控制中加入 —

—\_display:inline;将其转化为行内属性。(\_这个符号只有 ie6 会识别)

渐进识别的方式，从总体中逐渐排除局部。

首先，巧妙的使用“\\9”这一标记，将 IE 游览器从所有情况中分离出来。

接着，再次使用“+”将 IE8 和 IE7、IE6 分离开来，这样 IE8 已经独立识别。

css

.bb\{

background-color:\#f1ee18;/\*所有识别\*/

.background-color:\#00deff\\9; /\*IE6、7、8 识别\*/

\+background-color:\#a200ff;/\*IE6、7 识别\*/

\_background-color:\#1e0bd1;/\*IE6 识别\*/

\* IE 下,可以使用获取常规属性的方法来获取自定义属性,

也可以使用 getAttribute()获取自定义属性;

Firefox 下,只能使用 getAttribute()获取自定义属性.

解决方法:统一通过 getAttribute()获取自定义属性.\* IE 下,even 对象有 x,y 属性,但是没有 pageX,pageY 属性;

Firefox 下,event 对象有 pageX,pageY 属性,但是没有 x,y 属性.

\* （条件注释）缺点是在 IE 浏览器下可能会增加额外的 HTTP 请求数。

\* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入

CSS 属性 -webkit-text-size-adjust: none; 解决.

超链接访问过后 hover 样式就不出现了 被点击访问过的超链接样式不在具有 hover 和

active 了解决方法是改变 CSS 属性的排列顺序:

L-V-H-A : a:link \{\} a:visited \{\} a:hover \{\} a:active \{\}

**52、列出 display 的值，说明他们的作用。position 的值，relative 和 absolute**

**定位原点是？**

1. block 象块类型元素一样显示。

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

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

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

2. position 的值

\*absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

\*fixed （老 IE 不支持）

生成绝对定位的元素，相对于浏览器窗口进行定位。

\* relative

生成相对定位的元素，相对于其正常位置进行定位。

\* static 默认值。没有定位，元素出现在正常的流中

\*（忽略 top, bottom, left, right z-index 声明）。

\* inherit 规定从父元素继承 position 属性的值。

**53、absolute 的 containing block 计算方式跟正常流有什么不同？**

**54、position 跟 display、margin collapse、overflow、float 这些特性相互**

**叠加后会怎么样？**

**55、对 WEB 标准以及 W3C 的理解与认识**

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链 css 和 js 脚本、结

构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广

泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供

打印版本而不需要复制内容、提高网站易用性；**56、css 的基本语句构成是?**

选择器\{属性 1:值 1;属性 2:值 2;……\}

**57、浏览器标准模式和怪异模式之间的区别是什么?**

盒子模型 渲染模式的不同

使用 window.top.document.compatMode 可显示为什么模式

**58、**CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范围内？

最基本的：

设置 display 属性为 none，或者设置 visibility 属性为 hidden

技巧性：

设置宽高为 0，设置透明度为 0，设置 z-index 位置在-1000

**59、**超链接访问过后 hover 样式就不出现的问题是什么？如何解决？

答案：被点击访问过的超链接样式不在具有 hover 和 active 了,解决方法是改变 CSS

属性的排列顺序: L-V-H-A（link,visited,hover,active）

60、什么是 Css Hack？ie6,7,8 的 hack 分别是什么？

答案：针对不同的浏览器写不同的 CSS code 的过程，就是 CSS hack。

示例如下：

\#test \{

width:300px;

height:300px;

background-color:blue; /\*firefox\*/

background-color:red\\9; /\*all ie\*/

background-color:yellow\\0; /\*ie8\*/

\+background-color:pink; /\*ie7\*/

\_background-color:orange; /\*ie6\*/ \}

:root \#test \{ background-color:purple\\9; \} /\*ie9\*/

@media all and (min-width:0px)\{ \#test \{background-color:black\\0;\} \} /\*opera\*/

@media screen and (-webkit-min-device-pixel-ratio:0)\{ \#test

\{background-color:gray;\} \} /\*chrome and safari\*/62、请用 Css 写一个简单的幻灯片效果页面

答案：知道是要用 css3。使用 animation 动画实现一个简单的幻灯片效果。

/\*\*HTML\*\*/

div.ani

/\*\*css\*\*/

.ani\{

width:480px;

height:320px;

margin:50px auto;

overflow: hidden;

box-shadow:0 0 5px rgba(0,0,0,1);

background-size: cover;

background-position: center;

\-webkit-animation-name: "loops";

\-webkit-animation-duration: 20s;

\-webkit-animation-iteration-count: infinite;

@-webkit-keyframes "loops" \{

\{ background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034

f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat;

25% \{

background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2

632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat;

50% \{

background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfd

ed1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat;

75% \{

background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86

d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat;

100% \{ background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161

a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat;

前端面试之-----html+css(21-60)

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关前端面试之浏览器内核

相关前端面试之浏览器渲染

相关前端面试锦集之 vue 面试总结

相关前端跳槽面试总结之面试准备

相关前端面试之前端性能优化

相关前端劝退之前端知识体系（前端面试体系）

相关前端面试之HTML篇

相关前端面试之JS

相关前端面试之盒模型

相关前端面试之js基础