前端常见html和css面试题（1）

野性酷女 2022-04-03 08:54 314阅读 0赞

**1.Doctype 的作用？严格模式与混杂模式的区别？区分**  
（1）<!DOCTYPE> 声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析文档）  
（2）严格模式下：页面排版及 JS 解析是以该浏览器支持的最高标准来执行  
（3）混杂模式：不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容 防止站点无法工作  
（4）.DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现  
2.Quirks 模式是什么？它和 Standards 模式有什么区别?

从 IE6 开始，引入了 Standards 模式，标准模式中，浏览器尝试给符合标准的文档在规范上  
的正确处理达到在指定浏览器中的程度。

在 IE6 之前 CSS 还不够成熟，所以 IE5 等之前的浏览器对 CSS 的支持很差， IE6 将对 CSS  
提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如 果 IE6 支持 CSS 则将令这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的  
渲染机制呢？

在写程序时我们也会经常遇到这样的问题， 如何保证原来的接口不变， 又提供更强大的功能，  
尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支，即当某  
个参数为真时，我们就使用新功能，而如果这个参数 不为真时，就使用旧功能，这样就能  
不破坏原有的程序，又提供新功能。IE6 也是类似这样做的，它将 DTD 当成了这个"参数"，  
因为以前的页面大家都不会去写 DTD，所以 IE6 就假定 如果写了 DTD，就意味着这个页面 将采用对 CSS 支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是 Quirks  
模式（怪癖模式，诡异模式，怪异模式）。 区别:总体会有布局、样式解析和脚本执行三个方面的区别。

盒模型：在 W3C 标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，  
而在 Quirks 模式下，IE 的宽度和高度还包含了 padding 和 border。

设置行内元素的高宽：在 Standards 模式下，给等行内元素设置 wdith 和 height 都  
不会生效，而在 quirks 模式下，则会生效。

设置百分比的高度：在 standards 模式下，一个元素的高度是由其包含的内容来决定的，如  
果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用  
margin:0 auto 设置水平居中：使用 margin:0 auto 在 standards 模式下可以使元素水平  
居中，但在 quirks 模式下却会失效。

（还有很多，答出什么不重要，关键是看他答出的这些是不是自己经验遇到的，还是说都是  
看文章看的，甚至完全不知道。）

1.  img 的 alt 与 title 有何异同？ strong 与 em 的异同？

a:alt(alt text):为不能显示图像、窗体或 applets 的用户代理（UA），alt 属性用来指  
定替换文字。替换文字的语言由 lang 属性指定。(在 IE 浏览器下会在没有 title 时把 alt 当成 tool tip 显示)

title(tool tip):该属性为设置该属性的元素提供建议性的信息。

strong:粗体强调标签，强调，表示内容的重要性

em:斜体强调标签，更强烈强调，表示内容的强调点

**4. 你能描述一下渐进增强和优雅降级之间的不同吗?**

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功  
能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器  
进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个  
非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰  
减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

"优雅降级"观点  
"优雅降级"观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为 "过时"或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限  
定为主流浏览器（如 IE、Mozilla 等）的前一个版本。

在这种设计范例下，旧版的浏览器被认为仅能提供"简陋却无  
妨 (poor, but passable)" 的浏览体验。你可以做一些小的调整来适应某个特定的浏 览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被  
直接忽略。

"渐进增强"观点  
"渐进增强"观点则认为应关注于内容本身。

内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有 的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得"渐进增强"成为 一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其"分级式浏览器  
支持 (Graded Browser Support)"策略的原因所在。

那么问题来了。现在产品经理看到 IE6,7,8 网页效果相对高版本现代浏览器少了很多圆角， 阴影（CSS3），要求兼容（使用图片背景，放弃 CSS3），你会如何说服他？

**5. css的引入方式有哪些？CSS 中 link 和@import 的区别是：**  
1.内联 内嵌 外链 导入  
2.Link 属于 html 标签，而@import 是 CSS 中提供的  
区别 ：同时加载  
　　前者无兼容性，后者CSS2.1以下浏览器不支持

Link 支持使用javascript改变样式，后者不可  
在页面加载的时候，link 会同时被加载，而@import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS

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

Link 引入样式的权重大于@import 的引用（@import 是将引用的样式导入到当前的页面中）  
link 和@import区别  
两者都是外部引用的css方式:  
区别1:link是XHTML标签,除了加载css外,还可以定义css等其他事物;@import属于css范畴只能加载css  
区别2:link引入css时,再页面加载的同时加载;@import需要页面完全载入以后加载  
区别3:link是XHTML标签.无兼容问题;@import是在css2.1提出的,低版本浏览器不支持  
区别4:link支持使用JacaScript控制DOM去改变样式,而@import不支持

**7. 为什么利用多个域名来存储网站资源会更有效？**

CDN 缓存更方便

突破浏览器并发限制

节约 cookie 带宽

节约主域名的连接数，优化页面响应速度

防止不必要的安全问题

**8. 请谈一下加粗样式你对网页标准和标准制定机构重要性的理解。**

网页标准和标准制定机构都是为了能让 web 发展的更’健康’，开发者遵循统一的标准，降  
低开发难度，开发成本，SEO 也会更好做，也不会因为滥用代码导致各种 BUG、安全问题，  
最终提高网站易用性。

**9. 请描述一下 cookies，sessionStorage 和 localStorage 的区别？**

sessionStorage 用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话  
中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久 化的本地存储，仅仅是会话级别的存储。而 localStorage 用于持久化的本地存储，除非主  
动删除数据，否则数据是永远不会过期的。

web storage 和 cookie 的区别

Web Storage 的概念和 cookie 相似，区别是它是为了更大容量存储设计的。Cookie 的大小  
是受限的，并且每次你请求一个新的页面的时候 Cookie 都会被发送过去，这样无形中浪费  
了带宽，另外 cookie 还需要指定作用域，不可以跨域调用。

除此之外，Web Storage 拥有 setItem,getItem,removeItem,clear 等方法，不像 cookie  
需要前端开发者自己封装 setCookie，getCookie。但是 Cookie 也是不可以或缺的：Cookie 的作用是与服务器进行交互，作为 HTTP 规范的一部分而存在 ，而 Web Storage 仅仅是为  
了在本地"存储"数据而生。

1.  有哪项方式可以对一个 DOM 设置它的 CSS 样式？

外部样式表，引入一个外部 css 文件

内部样式表，将 css 代码放在 标签内部

内联样式，将 css 样式直接定义在 HTML 元素内部

1.  CSS 都有哪些选择器？

派生/标签选择器（用 HTML 标签申明）

id 选择器（用 DOM 的 ID 申明）

类选择器（用一个样式类名申明）

属性选择器（用 DOM 的属性申明，属于 CSS2，IE6 不支持，不常用，不知道就算了）

除了前 3 种基本选择器，还有一些扩展选择器，包括

后代选择器（利用空格间隔，比如 div .a\{ \}）

群组选择器（利用逗号间隔，比如 p,div,\#a\{ \}）

那么问题来了，CSS 选择器的优先级是怎么样定义的？  
基本原则： 一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。

复杂的计算方法：

用 1 表示派生选择器的优先级

用 10 表示类选择器的优先级

用 100 标示 ID 选择器的优先级

div.test1 .span var 优先级 1+10 +10 +1

span\#xxx .songs li 优先级 1+100 + 10 +1

\#xxx li 优先级 100 +1

那么问题来了，看下列代码，

标签内的文字是什么颜色的？

123

答案：red。与样式定义在文件中的先后顺序有关，即是后面的覆盖前面的，与在

中的先后关系无关。

css选择符有哪些?哪些属性是可以继承?优先级算法如何计算?内联和important哪个优先级高?  
通用选择器 \*  
类别选择器 .class  
id选择器 \#id  
标签选择器 element  
后代选择器 子代选择器 并集选择器 交集选择器  
伪类选择器(:link :visited :active :hover :focus)  
结伪类(:first-child :last-child :nth-child(length) :nth-last-child(length))  
属性可以继承:line-height color font text  
所有元素可以继承的:visibility和cursor  
终极块级元素可继承的:text-indent text-align  
内联元素可以继承的letter-spacing white-space line-height color  
font,font-family,font-size,font-style,font-variant,font-weight,text-decoration,text-transform,direction  
列表元素可以继承的:  
list-style, list-style-type, list-style-position, list-style-image  
浏览器默认 继承的样式 通配符 标签选择器 类选择器 id选择器 行内样式 important

1.  CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范

围内？

最基本的设置 display 属性为 none，或者设置 visibility 属性为 hidden  
技巧性：  
设置宽高为 0，设置透明度为 0，设置 z-index 位置在-1000em

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

答案： 点击访问过的超链接样式不在具有 hover 和 active 了,解决方法是改变 CSS 属性的 被  
排列顺序: L-V-H-A（link,visited,hover,active）

1.  什么是 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*/

1.  行内元素和块级元素的具体区别是什么？行内元素的 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 元素（拥有内在尺寸，可设置高宽，  
但不会自动换行），有哪些？  
答案： 、 、 、 、。

1.  什么是外边距重叠？重叠的结果是什么？

外边距重叠/外边距塌陷就是 margin-collapse。

在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一  
个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠  
外边距。

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

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

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

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

1.  rgba()和 opacity 的透明效果有什么不同？

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

而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明  
效果！）

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

垂直方向：line-height  
水平方向：letter-spacing

那么问题来了，关于 letter-spacing 的妙用知道有哪些么？  
答案:可以用于消除 inline-block 元素间的换行符空格间隙问题。

1.  如何垂直居中一个浮动元素？

// 方法一：已知元素的高宽 
    	#div1{ 
    	background-color:#6699FF; 
    	width:200px; 
    	height:200px; 
    	position: absolute; 	//父元素需要相对定位
    top: 50%; 
    left: 50%; 
    margin-top:-100px ; margin-left: -100px; 
    }

//方法二:未知元素的高宽 
    
    
    #div1{ 
    width: 200px; height: 200px; 
    
    
    //二分之一的 height，width 
    background-color: #6699FF; 
    margin:auto; 
    position: absolute; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    }
    //父元素需要相对定位 
    那么问题来了，如何垂直居中一个<img>?（用更简便的方法。） 
    	#container 	//<img>的容器设置如下 
    	{
    	display:table-cell; 
    	text-align:center; 
    	vertical-align:middle; 
    	}

1.  px 和 em 的区别。

px 和 em 都是长度单位，区别是，px 的值是固定的，指定是多少就是多少，计算比较容易。  
em 得值不是固定的，并且 em 会继承父级元素的字体大小。

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

1.  描述一个"reset"的 CSS 文件并如何使用它。知道 normalize.css 吗？你了解他们的不同之处？

重置样式非常多， 凡是一个前端开发人员肯定有一个常用的重置 CSS 文件并知道如何使用它们。 他们是盲目的在做还是知道为什么这么做呢？原因是不同的浏览器对一些元素有不同的  
默认样式， 如果你不处理， 在不同的浏览器下会存在必要的风险，或者更有戏剧性的性发生。

你可能会用 Normalize 来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供了 一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）。 在这一方面，无法做每一个复位重置。它也确实有些超过一个重置，它处理了你永远都不用考虑的怪癖，像 HTML 的 audio 元素不一致或 line-height 不一致。

1.  Sass、LESS 是什么？大家为什么要使用他们？

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

例如 Less 是一种动态样式语言. 将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函  
数. LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可一在服务端运行  
(借助 Node.js)。  
为什么要使用它们？

结构清晰，便于扩展。  
可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，  
减少无意义的机械劳动。

可以轻松实现多重继承。

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

1.  display:none 与 visibility:hidden 的区别是什么？

display : 隐藏对应的元素但不挤占该元素原来的空间。  
visibility: 隐藏对应的元素并且挤占该元素原来的空间。  
即是，使用 CSS display:none 属性后，HTML 元素（对象）的宽度、高度等各种属性值都将 “丢失”;而使用 visibility:hidden 属性后，HTML 元素（对象）仅仅是在视觉上看不见（完  
全透明），而它所占据的空间位置仍然存在。

**32. 简介盒子模型：**

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

盒模型：内容、内边距、外边距（一般不计入盒子实际宽度）、边框

1.  为什么要初始化样式？

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

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

1.  BFC 是什么?

BFC（块级格式化上下文），一个创建了新的 BFC 的盒子是独立布局的，盒子内元素的布局  
不会影响盒子外面的元素。在同一个 BFC 中的两个相邻的盒子在垂直方向发生 margin 重叠  
的问题

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

1.  html 语义化是什么？

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

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

便于项目的开发及维护，使 html 代码更具有可读性，便于其他设备解析。

1.  IE 的双边距 BUG：块级元素 float 后设置横向 margin，ie6 显示的 margin 比设置的较大。

解决：加入\_display：inline

1.  HTML 与 XHTML——二者有什么区别？

1 所有的标记都必须要有一个相应的结束标记  
2. 所有标签的元素和属性的名字都必须使用小写  
3. 所有的 XML 标记都必须合理嵌套  
4. 所有的属性必须用引号 “” 括起来  
5. 把所有 < 和 & 特殊符号用编码表示  
6. 给所有属性赋一个值  
7. 不要在注释内容中使用 “–”  
8. 图片必须有说明文字

1.  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 图片

**40. 对 WEB 标准以及 W3C 的理解与认识**

答：标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链 css 和 js 脚本、  
结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更 广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提  
供打印版本而不需要复制内容、提高网站易用性。

1.  行内元素有哪些?块级元素有哪些?CSS 的盒模型?

答：块级元素：div p h1 h2 h3 h4 form ul  
行内元素: a b br i span input select  
Css 盒模型:内容，border ,margin，padding

1.  前端页面有哪三层构成，分别是什么?作用是什么?

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

1.  Doctype 作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

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

1.  行内元素有哪些？块级元素有哪些？ 空(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 h4p  
（3）知名的空元素：

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

鲜为人知的是：

1.  CSS 的盒子模型？

（1）两种， IE 盒子模型、标准 W3C 盒子模型；IE 的 content 部分包含了 border 和 pading;  
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).  
IE模型中：  
CSS中的宽（width）=内容（content）的宽+（border+padding）\*2  
CSS中的高（height）=内容（content）的高+（border+padding）\*2

W3C模型中：  
　　　　　　CSS中的宽（width）=内容（content）的宽  
　　　　　　CSS中的高（height）=内容（content）的高

1.  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，单选框或复选框被选中。

1.  如何居中 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%;  
\}

1.  列出 display 的值，说明他们的作用。position 的值， relative 和 absolute 定位

原点是？

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

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

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

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

1.  position 的值

\*absolute

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

\*fixed （老 IE 不支持）

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

*  relative

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

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

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

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

1.  absolute 的 containing block 计算方式跟正常流有什么不同？

lock-level boxes  
一个 block-level element (‘display’ 属性值为 ‘block’, ‘list-item’ 或是 ‘table’)  
会生成一个 block-level box，这样的盒子会参与到 block-formatting context (一种布  
局的方式) 中。  
block formatting context  
在这种布局方式下，盒子们自所在的 containing block 顶部起一个接一个垂直排列，水平  
方向上撑满整个宽度 (除非内部的盒子自己内部建立了新的 BFC)。  
containing block  
一般来说，盒子本身就为其子孙建立了 containing block，用来计 算内部盒子的位置、大小，而对内部的盒子，具体采  
用哪个 containing block 来计算，需要分情况来讨论：

若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第 一个和最后一个 inline box 的 padding box (除 m argin, border 外的区域)  
的最小矩形；  
否则则由这个祖先元素的 padding box 构成。  
根元素所在的 containing block 被称为 initial containing block，在我们 常用的浏览器环境下，指的是原点与 canvas 重合，大小和 viewport 相同的矩  
形；  
对于 position 为 static 或 relative 的元素，其 containing block 为祖先  
元素中最近的 block container box 的 content box (除 margin, border,  
padding 外的区域)；  
对于 position:fixed 的元素，其 containing block 由 viewport 建立；  
对于 position:absolute 的元素，则是先找到其祖先元素中最近的 position  
属性非 static 的元素，然后判断：  
如果都找不到，则为 initial containing block。

1.  对 WEB 标准以及 W3C 的理解与认识

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链 css 和 js 脚本、结  
构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广 泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供  
打印版本而不需要复制内容、提高网站易用性；

1.  css 的基本语句构成是?

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

1.  浏览器标准模式和怪异模式之间的区别是什么?

盒子模型 渲染模式的不同  
使用 window.top.document.compatMode 可显示为什么模式

1.  CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范

围内？

最基本的：

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

技巧性：

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

1.  行内元素和块级元素的具体区别是什么？行内元素的 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 元素（拥有内在尺寸，可设置高  
宽，但不会自动换行），有哪些？

答案： 、 、 、 、

1.  什么是外边距重叠？重叠的结果是什么？

答案：

外边距重叠就是 margin-collapse。

在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合  
成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为  
折叠外边距。

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

1.  两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
2.  两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。 3. 两个外边距一正一负时，折叠结果是两者的相加的和。

58、描述一个"reset"的 CSS 文件并如何使用它。知道 normalize.css 吗？你了解他们的不  
同之处？

重置样式非常多， 凡是一个前端开发人员肯定有一个常用的重置 CSS 文件并知道如何使  
用它们。 他们是盲目的在做还是知道为什么这么做呢？原因是不同的浏览器对一些元素有不 同的默认样式，如果你不处理，在不同的浏览器下会存在必要的风险，或者更有戏剧性的性  
发生。

你可能会用 Normalize 来代替你的重置样式文件。它没有重置所有的样式风格，但仅提  
供了一套合理的默认样式值。 既能让众多浏览器达到一致和合理， 但又不扰乱其他的东西 （如  
粗体的标题）。

在这一方面，无法做每一个复位重置。它也确实有些超过一个重置，它处理了你永远都  
不用考虑的怪癖，像 HTML 的 audio 元素不一致或 line-height 不一致。  
57. 说 display 属性有哪些？可以做什么？

display:block 行内元素转换为块级元素  
display:inline 块级元素转换为行内元素  
display:inline-block 转为内联元素

1.  哪些 css 属性可以继承？

可继承： font-size font-family color, ul li dl dd dt;  
不可继承 ：border padding margin width height ;

1.  css 优先级算法如何计算？

!important > id > class > 标签  
!important 比 内联优先级高

\*优先级就近原则，样式定义最近者为准;  
\*以最后载入的样式为准;

1.  b 标签和 strong 标签,i 标签和 em 标签的区别？

后者有语义，前者则无。

1.  有那些行内元素、有哪些块级元素、盒模型？

1.内联元素(inline element) 也就是行内元素

a - 锚点 abbr - 缩写 acronym - 首字 b - 粗体(不推荐) big - 大字体 br - 换行 em - 强调 font - 字体设定(不推荐) i - 斜体 img - 图片 input - 输入框 label - 表格标签 s - 中划线(不推荐) select - 项目选择 small - 小字体文本 span - 常用内联容器，定义文本内区块 strike - 中划线 strong - 粗体强调 sub - 下标 sup - 上标 textarea - 多行文本输入框 tt - 电传文本  
u - 下划线 var - 定义变量

2、块级元素

address - 地址 blockquote - 块引用 center - 举中对齐块  
dir - 目录列表 div - 常用块级容易，也是 css layout 的主要标签  
dl - 定义列表 fieldset - form 控制组 form - 交互表单 h1 - 大标题 h2 - 副标题h3 - 3 级标题 h4 - 4 级标题 h5 - 5 级标题 h6 - 6 级标题 hr - 水平分隔线 isindex - input prompt menu - 菜单列表  
noframes - frames 可选内容，（对于不支持 frame 的浏览器显示此区块内容）  
noscript - ）可选脚本内容（对于不支持 script 的浏览器显示此内容）  
ol - 排序表单 p - 段落 pre - 格式化文本 table - 表格 ul - 非排序列表

3.CSS 盒子模型包含四个部分组成：

内容、填充（padding）、边框（border）、外边界（margin）。

1.  有哪些选择符，优先级的计算公式是什么？行内样式和！important 哪个优先级高？

\#ID > .class > 标签选择符 !important 优先级高

1.  我想让行内元素跟上面的元素距离 10px，加 margin-top 和 padding-top 可以吗？  
    margin-top,padding-top 无效
2.  CSS 的盒模型由什么组成？

内容，border ,margin，padding 65. 说说 display 属性有哪些？可以做什么？

display:block 行内元素转换为块级元素

display:inline 块级元素转换为行内元素

display:inline-block 转为内联元素

1.  哪些 css 属性可以继承？

可继承： font-size font-family color, ul li dl dd dt;

不可继承 ：border padding margin width height ;