1. 解释一下 CSS 的盒子模型？

参考回答： 回答一：

a、标准的 css 盒子模型：宽度=内容的宽度+边框的宽度+加上内边框的宽度

b、网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS 盒子模式都具备这些属性。

c、这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。CSS 盒子模型就是在网页设计中经常用到的 CSS 技术所使用的一种思维模型。

回答二：

标准的盒模型：width = content

IE 盒模型：width = content+padding-Left+padding-right+border-left + border-right

2. 请你说说 CSS 选择器的类型有哪些，并举几个例子说明其用法？

参考答案：

类型：基础的选择器、组合选择器、属性选择器、伪类、伪元素

基础的选择器

组合选择器：

属性选择器：

伪类：

伪元素：

3. 请你说说 CSS 有什么特殊性?（优先级、计算特殊值）

参考答案： 优先级：

(1)、同类型，同级别的样式后者先于前者(2))、ID > 类样式 > 标签 > *

(3) 、内联>ID 选择器>伪类>属性选择器>类选择器>标签选择器>通用选择器(*)> 继承的样式

(4) 、具体 > 泛化的，特殊性即 css 优先级

(5) 、近的 > 远的 (内嵌样式 > 内部样式表 > 外联样式表)

  内嵌样式：内嵌在元素中，span

  内部样式表：在页面中的样式，写在中的样式

外联样式表：单独存在一个 css 文件中，通过 link 引入或 import 导入的样

式

(6) 、!important 权重最高，比 inline style 还要高

计算特殊性值

important > 内嵌 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符

权重、特殊性计算法：

CSS 样式选择器分为 4 个等级，a、b、c、d

(1)、如果样式是行内样式（通过 Style=“”定义），那么 a=1，1,0,0,0

(2)、b 为 ID 选择器的总数 0,1,0,0

(3)、c 为属性选择器，伪类选择器和 class 类选择器的数量。0,0,1,0

(4)、d 为标签、伪元素选择器的数量 0,0,0,1

(5)、!important 权重最高，比 inline style 还要高

比如结果为：1093 比 1100，按位比较，从左到右，只要一位高于则立即胜出， 否则继续比较。

4. 要动态改变层中内容可以使用的方法？

参考答案： innerHTML，innerText

5. 常见浏览器兼容性问题与解决方案？

参考答案：

（1） 浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同

问题症状：随便写几个标签，不加样式控制的情况下，各自的 margin 和 padding 差异较大。

碰到频率:100%

解决方案：CSS 里 *{margin:0;padding:0;}

备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的 CSS 文件开头都会用通配符*来设置各个标签的内外补丁是 0。

（2） 浏览器兼容问题二：块属性标签 float 后，又有横行的 margin 情况下， 在 IE6 显示 margin 比设置的大

问题症状:常见症状是 IE6 中后面的一块被顶到下一行

碰到频率：90%（稍微复杂点的页面都会碰到，float 布局最常见的浏览器兼容问题）

解决方案：在 float 的标签样式控制中加入 display:inline;将其转化为行内属性

备注：我们最常用的就是 div+CSS 布局了，而 div 就是一个典型的块属性标签， 横向布局的时候我们通常都是用 div float 实现的，横向的间距设置如果用margin 实现，这就是一个必然会碰到的兼容性问题。

（3） 浏览器兼容问题三：设置较小高度标签（一般小于 10px），在 IE6，IE7， 遨游中高度超出自己设置高度

问题症状：IE6、7 和遨游里这个标签的高度不受控制，超出自己设置的高度碰到频率：60%

解决方案：给超出高度的标签设置 overflow:hidden;或者设置行高 line-height 小于你设置的高度。

备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是 IE8 之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

（4） 浏览器兼容问题四：行内属性标签，设置 display:block 后采用 float 布局，又有横行的 margin 的情况，IE6 间距 bug

问题症状：IE6 里的间距比超过设置的间距碰到几率：20%

解决方案 ： 在 display:block;后面加入 display:inline;display:table; 备注：行内属性标签，为了设置宽高，我们需要设置 display:block;(除了 input 标签比较特殊)。在用 float 布局并有横向的 margin 后，在 IE6 下，他就具有了块属性 float 后的横向 margin 的 bug。不过因为它本身就是行内属性标签，所

以我们再加上 display:inline 的话，它的高宽就不可设了。这时候我们还需要在 display:inline 后面加入 display:talbe。

(5) 浏览器兼容问题五：图片默认有间距

问题症状：几个 img 标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。

碰到几率：20%

解决方案：使用 float 属性为 img 布局

备注：因为 img 标签是行内属性标签，所以只要不超出容器宽度，img 标签都会排在一行里，但是部分浏览器的 img 标签之间会有个间距。去掉这个间距使用float 是正道。（我的一个学生使用负 margin，虽然能解决，但负 margin 本身就是容易引起浏览器兼容问题的用法，所以我禁止他们使用）

(6) 浏览器兼容问题六：标签最低高度设置 min-height 不兼容

问题症状：因为 min-height 本身就是一个不兼容的 CSS 属性，所以设置min-height 时不能很好的被各个浏览器兼容

碰到几率：5%

解决方案：如果我们要设置一个标签的最小高度 200px，需要进行的设置为：

{min-height:200px; height:auto !important; height:200px; overflow:visible;}

备注：在 B/S 系统前端开时，有很多情况下我们又这种需求。当内容小于一个值

（如 300px）时。容器的高度为 300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。

(7) 浏览器兼容问题七：透明度的兼容 CSS 设置

一般在ie 中用的是filter:alpha(opacity=0);这个属性来设置div 或者是块级元素的透明度，而在 firefox 中，一般就是直接使用 opacity:0,对于兼容的， 一般的做法就是在书写 css 样式的将 2 个都写上就行，就能实现兼容

6. 列出 display 的值并说明他们的作用？

display： none | inline | block | list-item

| inline-block | table | inline-table | table-caption | table-cell

| table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box | flexbox | inline-flexbox | flex | inline-flex

默认值：inline

none： 隐藏对象。与 visibility 属性的 hidden 值不同，其不为被隐藏的对象保留其物理空间

inline： 指定对象为内联元素。block：     指定对象为块元素。

list-item： 指定对象为列表项目。

inline-block： 指定对象为内联块元素。（CSS2）

table： 指定对象作为块元素级的表格。类同于 html 标签<table>（CSS2） inline-table： 指定对象作为内联元素级的表格。类同于 html 标签<table>

（CSS2）

table-caption： 指定对象作为表格标题。类同于 html 标签<caption>（CSS2） table-cell： 指定对象作为表格单元格。类同于 html 标签<td>（CSS2） table-row： 指定对象作为表格行。类同于 html 标签<tr>（CSS2）

table-row-group： 指定对象作为表格行组。类同于 html 标签<tbody>（CSS2） table-column： 指定对象作为表格列。类同于 html 标签<col>（CSS2） table-column-group： 指定对象作为表格列组显示。类同于 html 标签

<colgroup>（CSS2）

table-header-group： 指定对象作为表格标题组。类同于 html 标签<thead>

（CSS2）

table-footer-group： 指定对象作为表格脚注组。类同于 html 标签<tfoot>



（CSS2）

run-in： 根据上下文决定对象是内联对象还是块级对象。（CSS3） box： 将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）

inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3） flexbox： 将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）

inline-flexbox： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）

（CSS3）

flex： 将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）

inline-flex： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）

7. 如何居中 div, 如何居中一个浮动元素?

参考答案：

(1) 非浮动元素居中：可以设置 margin:0 auto 令其居中, 定位 ,父级元素text-align:center 等等

(2) 浮动元素居中:

方法一:设置当前 div 的宽度，然后设置 margin-left:50%; position:relative; left:-250px;其中的 left 是宽度的一半。

方法二:父元素和子元素同时左浮动，然后父元素相对左移动 50%，再然后子元素相对左移动-50%。

方法三:position 定位等等。

8. CSS 中 link 和@import 的区别是？

参考答案：

（1） link 属于 HTML 标签，而@import 是 CSS 提供的;

（2） 页面被加载的时，link 会同时被加载，而@import 引用的 CSS 会等到页面被加载完再加载;

（3） import 只在 IE5 以上才能识别，而 link 是 HTML 标签，无兼容问题;

（4） link 方式的样式的权重 高于@import 的权重.

9. 请列举几种清除浮动的方法(至少两种)?

参考答案：

（1） 父级 div 定义 height

原理：父级 div 手动定义 height，就解决了父级 div 无法自动获取到高度的问题。

优点：简单、代码少、容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级 div 不一样时，会产生问题

建议：不推荐使用，只建议高度固定的布局时使用

（2） 结尾处加空 div 标签 clear:both

原理：添加一个空 div，利用 css 提高的 clear:both 清除浮动，让父级 div 能自动获取到高度

优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空 div，让人感觉很不好

建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

（3） 父级 div 定义 伪类:after 和 zoom

原理：IE8 以上和非 IE 浏览器才支持:after，原理和方法 2 有点类似，zoom(IE 转有属性)可解决 ie6,ie7 浮动问题

优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅， 网易，新浪等等）

缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。

建议：推荐使用，建议定义公共类，以减少 CSS 代码。

（4） 父级 div 定义 overflow:hidden

原理：必须定义 width 或 zoom:1，同时不能定义 height，使用 overflow:hidden 时，浏览器会自动检查浮动区域的高度

优点：简单、代码少、浏览器支持好

缺点：不能和 position 配合使用，因为超出的尺寸的会被隐藏。

建议：只推荐没有使用 position 或对 overflow:hidden 理解比较深的朋友使用。

（5） 父级 div 定义 overflow:auto

原理：必须定义 width 或 zoom:1，同时不能定义 height，使用 overflow:auto 时，浏览器会自动检查浮动区域的高度

优点：简单、代码少、浏览器支持好

缺点：内部宽高超过父级 div 时，会出现滚动条。

建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

10. block，inline 和 inlinke-block 细节对比？

参考答案：

• display:block

a、block 元素会独占一行，多个 block 元素会各自新起一行。默认情况下，block 元素宽度自动填满其父元素宽度。

b、block 元素可以设置 width,height 属性。块级元素即使设置了宽度,仍然是独占一行。

c、block 元素可以设置 margin 和 padding 属性。

• display:inline

a、inline 元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。

b、inline 元素设置 width,height 属性无效。

c、inline 元素的 margin 和 padding 属性，水平方向的 padding-left, padding-right, margin-left, margin-right 都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom 不会产生边距效果。

• display:inline-block

a、简单来说就是将对象呈现为 inline 对象，但是对象的内容作为 block 对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个 link（a 元素） inline-block 属性值，使其既具有 block 的宽度高度特性又具有 inline 的同行特性。

补充说明

a、一般我们会用 display:block，display:inline 或者 display:inline-block 来调整元素的布局级别，其实 display 的参数远远不止这三种，仅仅是比较常用而已。

b、IE（低版本 IE）本来是不支持 inline-block 的，所以在 IE 中对内联元素使用display:inline-block，理论上IE 是不识别的，但使用display:inline-block在 IE 下会触发 layout，从而使内联元素拥有了 display:inline-block 属性的表象。

11. 什么叫优雅降级和渐进增强？

参考答案：

优雅降级：Web 站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于 IE 独特的盒模型布局问题，针对不同版本的 IE 的 hack 实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.

渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

12. 说说浮动元素会引起的问题和你的解决办法

参考答案： 问题：

（1） 父元素的高度无法被撑开，影响与父元素同级的元素

（2） 与浮动元素同级的非浮动元素会跟随其后

（3） 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

解决方法：

使用 CSS 中的 clear:both;属性来清除元素的浮动可解决问题(2)、(3)，对于问题(1)，添加如下样式，给父元素添加 clearfix 样式：

.clearfix:after{ content: "."; display: block; height: 0; clear: both;

visibility: hidden;

}

.clearfix{

display: inline-block;

} /* for IE/Mac */ 清除浮动的几种方法：

（1） 额外标签法，

<div style="clear:both;"></div>

（缺点：不过这个办***增加额外的标签使 HTML 结构看起来不够简洁。）

（2） 使用 after 伪类

#parent:after{

  content:" ";

  height:0;

  visibility:hidden;

  display:block;

  clear:both;

}

（3） 浮动外部元素

（4） 设置overflow为hidden或者 auto

13. 你有哪些性能优化的方法？

参考答案： 回答一：

（1） 减少 http 请求次数：CSS Sprites,JS、CSS 源码压缩、图片大小控制合适；网页 Gzip，CDN 托管，data 缓存，图片服务器。

（2） 前端模板 JS+数据，减少由于 HTML 标签导致的带宽浪费，前端用变量保存 AJAX 请求结果，每次操作本地变量，不用请求，减少请求次数

（3） 用 innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能。

（4） 当需要设置的样式很多时设置 className 而不是直接操作 style。

（5） 少用全局变量、缓存 DOM 节点查找的结果。减少 IO 读取操作。

（6） 避免使用 CSS Expression（css 表达式)又称 Dynamic properties(动态属性)。

（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。

回答二：

(1) 减少 HTTP 请求次数

(2) 使用 CDN

(3) 避免空的 src 和 href

(4) 为文件头指定 Expires

(5) 使用 gzip 压缩内容

(6) 把 CSS 放到顶部

(7) 把 JS 放到底部

(8) 避 免使用 CSS 表达式

(9) 将 CSS 和 JS 放到外部文件中

(10) 避免跳转

(11) 可缓存的 AJAX

(12) 使用 GET 来完成 AJAX 请求

14. 为什么要初始化 CSS 样式？

参考答案：

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS 初始化往往会出现浏览器之间的页面显示差异。

当然，初始化样式会对 SEO 有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

最简单的初始化方法就是：

* { padding: 0;

margin: 0;

} （不建议）

15. 解释下浮动和它的工作原理？清除浮动的技巧？

参考答案：

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

(1) 使用空标签清除浮动。

这种方法是在所有浮动标签后面添加一个空标签定义 css clear:both.弊端就是增加了无意义标签。

(2) 使用 overflow。

给包含浮动元素的父标签添加 css 属性 overflow:auto; zoom:1; zoom:1 用于兼容 IE6。

(3) 使用 after 伪对象清除浮动。

该方法只适用于非 IE 浏览器。具体写法可参照以下示例。使用中需注意以下几点。该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；

16. CSS 样式表根据所在网页的位置，可分为哪几种样式表？

参考答案：

行内样式表，内嵌样式表，外部样式表

17. 谈谈你对 CSS 中刻度的认识？

参考答案：

在 CSS 中刻度是用于设置元素尺寸的单位。

a、特殊值 0 可以省略单位。例如：margin:0px 可以写成 margin:0

b、一些属性可能允许有负长度值，或者有一定的范围限制。如果不支持负长度值，那应该变换到能够被支持的最近的一个长度值。

c、长度单位包括：相对单位和绝对单位。

相对长度单位有：em,ex,ch,rem,vw,vh,vmax,vmin 绝对长度单位有：cm,mm,q,in,pt,pc,px

绝对长度单位：1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px 文本相对长度单位：em

相对长度单位是相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(相对父元素的字体大小倍数)

body { font-size: 14px; } h1 { font-size: 16px; }

.size1 p { font-size: 1em; }

.size2 p { font-size: 2em; }

.size3 p { font-size: 3em; } 文本相对长度单位：rem

rem 是 CSS3 新增的一个相对单位（root em，根 em），相对于根元素(即 html 元素)font-size 计算值的倍数

只相对于根元素的大小

浏览器的默认字体大小为 16 像素，浏览器默认样式也称为 user agent stylesheet，就是所有浏览器内置的默认样式，多数是可以被修改的，但 chrome 不能直接修改，可以被用户样式覆盖。

18. 请你说说 em 与 rem 的区别？

参考答案： rem ：

rem 是 CSS3 新增的一个相对单位（root em，根 em），相对于根元素(即 html 元素)font-size 计算值的倍数

只相对于根元素的大小

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。

作用：利用 rem 可以实现简单的响应式布局，可以利用 html 元素中字体的大小与屏幕间的比值设置 font-size 的值实现当屏幕分辨率变化时让元素也变化，以前的天猫 tmall 就使用这种办法。

em ：

文本相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(默认 16px)。(相对父元素的字体大小倍数)

em（font size of the element）是指相对于父元素的字体大小的单位。它与rem 之间其实很相似，区别在。（相对是的 HTML 元素的字体大，默认 16px） em 与 rem 的重要区别： 它们计算的规则一个是依赖父元素另一个是依赖根元素计算。

19. 请你说说 box-sizing 属性的的用法？

参考答案：

设置或检索对象的盒模型组成模式

a、box-sizing:content-box：padding 和 border 不被包含在定义的 width 和height 之内。对象的实际宽度等于设置的 width 值和 border、padding 之和， 即 ( Element width = width + border + padding，但占有页面位置还要加上margin ) 此属性表现为标准模式下的盒模型。

b、box-sizing:border-box：padding 和border 被包含在定义的width 和height 之内。对象的实际宽度就等于设置的 width 值，即使定义有 border 和 padding 也不会改变对象的实际宽度，即 ( Element width = width ) 此属性表现为怪异模式下的盒模型。

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

参考答案：

所谓的标准模式是指，浏览器按 W3C 标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。浏览器解析时到底使用标准模式还是怪异模式，与你网页中的DTD 声明直接相关，DTD 声明定义了标准文档的类型（标准模式解析）文档类型， 会使浏览器使用相应的方式加载网页并显示，忽略 DTD 声明,将使网页进入怪异模式(quirks mode)。

21. 怪异 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 模式下却会失效。

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

22. 说说你对边距折叠的理解?

参考答案：

外边距折叠：相邻的两个或多个外边距(margin)在垂直方向会合并成一个外边距

（margin）

相邻：没有被非空内容、padding、border 或 clear 分隔开的 margin 特性. 非空内容就是说这元素之间要么是兄弟关系或者父子关系

垂直方向外边距合并计算:

a、参加折叠的 margin 都是正值：取其中 margin 较大的值为最终 margin 值。

b、参与折叠的 margin 都是负值：取的是其中绝对值较大的，然后，从 0 位置， 负向位移。

c、参与折叠的 margin 中有正值，有负值：先取出负 margin 中绝对值中最大的， 然后，和正 margin 值中最大的 margin 相加。

23. 内联与块级标签有何区别？

参考答案：

Html 中的标签默认主要分为两大类型，一类为块级元素，另一类是行内元素， 许多人也把行内称为内联，所以叫内联元素，其实就是一个意思。为了很好的布局，必须理解它们间的区别。

24. 说说隐藏元素的方式有哪些？

参考答案：

a、使用 CSS 的 display:none，不会占有原来的位置

b、使用 CSS 的 visibility:hidden，会占有原来的位置

c、使用 HTML5 中的新增属性 hidden="hidden"，不会占有原来的位置

25. 为什么重置浏览器默认样式，如何重置默浏览器认样 式？

参考答案：

每种浏览器都有一套默认的样式表，即 user agent stylesheet，网页在没有指定的样式时，按浏览器内置的样式表来渲染。这是合理的，像 word 中也有一些预留样式，可以让我们的排版更美观整齐。不同浏览器甚至同一浏览器不同版本的默认样式是不同的。但这样会有很多兼容问题。

a、最简单的办法：（不推荐使用）*{margin: 0;padding: 0;}。b、使用 CSSReset 可以将所有浏览器默认样式设置成一样。

c、normalize：也许有些 cssreset 过于简单粗暴，有点伤及无辜，normalize 是另一个选择。bootstrap 已经引用该 css 来重置浏览器默认样式，比普通的cssreset 要精细一些，保留浏览器有用的默认样式，支持包括手机浏览器在内的超多浏览器，同时对 HTML5 元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。

天猫 使用的 css reset 重置浏览器默认样式：

@charset "gb2312";

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0;

padding: 0

}

body, button, input, select, textarea { font: 12px "microsoft yahei";

line-height: 1.5;

-ms-overflow-style: scrollbar

}

h1, h2, h3, h4, h5, h6 { font-size: 100%

}

ul, ol {

list-style: none

}

a {

text-decoration: none; cursor:pointer



}

a:hover {

text-decoration: underline

}

img { border: 0

}

button, input, select, textarea { font-size: 100%

}

table {

border-collapse: collapse; border-spacing: 0

}

.clear { clear:both

}

.fr { float:right

}

.fl { float:left

}

.block { display:block; text-indent:-999em

}

26. 谈谈你对 BFC 与 IFC 的理解？(是什么，如何产生，作用)

参考答案：

(1) 、什么是 BFC 与 IFC

a、BFC（Block Formatting Context）即“块级格式化上下文”，IFC（Inline Formatting Context）即行内格式化上下文。常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态。一个框在常规流中必须属于一个格式化上下文，你可以把 BFC 想象成一个大箱子，箱子外边的元素将不与箱子内的元素产生作用。

b、BFC 是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context 提供了一个环境，HTML 元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。也可以说 BFC 就是一个作用范围。

c、在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ，类型可以是 block，或者是 inline，但不能同时属于这两者。并且，Block boxes(块框) 在 block formatting context(块格式化上下文) 里格式化，Inline boxes(块内框) 则在 Inline Formatting Context(行内格式化上下文) 里格式化。

(2) 、如何产生 BFC

当一个 HTML 元素满足下面条件的任何一点，都可以产生 Block Formatting Context：

a、float 的值不为 none

b、overflow 的值不为 visible

c、display 的值为 table-cell, table-caption, inline-block 中的任何一个d、position 的值不为 relative 和 static

CSS3 触发 BFC 方式则可以简单描述为：在元素定位非 static，relative 的情况下触发，float 也是一种定位方式。

(3) 、BFC 的作用与特点

a、不和浮动元素重叠，清除外部浮动，阻止浮动元素覆盖；

如果一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个重叠的现象。常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态，当float 不为 none 时，position 为 absolute、fixed 时元素将脱离标准流。

27. 说说你对页面中使用定位(position)的理解？

参考答案：

使用 css 布局 position 非常重要，语法如下：

position：static | relative | absolute | fixed | center | page | sticky 默认值：static，center、page、sticky 是 CSS3 中新增加的值。

(1) 、static

可以认为静态的，默认元素都是静态的定位，对象遵循常规流。此时 4 个定位偏移属性不会被应用，也就是使用 left，right，bottom，top 将不会生效。

(2) 、relative

相对定位，对象遵循常规流，并且参照自身在常规流中的位置通过 top，right， bottom，left 这 4 个定位偏移属性进行偏移时不会影响常规流中的任何元素。(3)、absolute

a、绝对定位，对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到 body 元素。盒子的偏移位置不影响常规流中的任何元素，其 margin 不与其他任何 margin 折叠。

b、元素定位参考的是离自身最近的定位祖先元素，要满足两个条件，第一个是自己的祖先元素，可以是父元素也可以是父元素的父元素，一直找，如果没有则选择 body 为对照对象。第二个条件是要求祖先元素必须定位，通俗说就是position 的属性值为非 static 都行。

(4) 、fixed

固定定位，与 absolute 一致，但偏移定位是以窗口为参考。当出现滚动条时， 对象不会随着滚动。

(5) 、center

与 absolute 一致，但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。（CSS3）

(6) 、page

与 absolute 一致。元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个 absolute 模式。（CSS3）

(7) 、sticky

对象在常态时遵循常规流。它就像是 relative 和 fixed 的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如 fixed。该属性的表现是现实中你见到的吸附效果。（CSS3）

28. 如何解决多个元素重叠问题？

参考答案：

使用 z-index 属性可以设置元素的层叠顺序z-index 属性

语法：z-index: auto | <integer> 默认值：auto</integer>

适用于：定位元素。即定义了 position 为非 static 的元素取值：

auto： 元素在当前层叠上下文中的层叠级别是 0。元素不会创建新的局部层叠上下文，除非它是根元素。

整数： 用整数值来定义堆叠级别。可以为负值。 说明： 检索或设置对象的层叠顺序。

z-index 用于确定元素在当前层叠上下文中的层叠级别，并确定该元素是否创建新的局部层叠上下文。

当多个元素层叠在一起时，数字大者将显示在上面。

29. 页面布局的方式有哪些？

参考答案：

方式：双飞翼、多栏、弹性、流式、瀑布流、响应式布局

（1）、双飞翼布局

经典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是 Kevin Cornell 在 2006 年提出的一个布局模型概念，在国内最早是由淘宝 UED 的工程师传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点：

a、三列布局，中间宽度自适应，两边定宽； b、中间栏要在浏览器中优先展示渲染；

c、允许任意列的高度最高；

d、要求只用一个额外的 DIV 标签；

e、要求用最简单的 CSS、最少的 HACK 语句；

在不增加额外标签的情况下，圣杯布局已经非常完美，圣杯布局使用了相对定位， 以后布局是有局限性的，而且宽度控制要改的地方也多。在淘宝 UED（User Experience Design）探讨下，增加多一个 div 就可以不用相对布局了，只用到了浮动和负边距，这就是我们所说的双飞翼布局。

(2) 、多栏布局

a、栏栅格系统：就是利用浮动实现的多栏布局，在 bootstrap 中用的非常多。b、多列布局：栅格系统并没有真正实现分栏效果（如 word 中的分栏），CSS3 为了满足这个要求增加了多列布局模块

(3) 、弹性布局（Flexbox）

CSS3 引入了一种新的布局模式——Flexbox 布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局， 即使它们的大小是未知或者动态的，这里简称为 Flex。

Flexbox 布局常用于设计比较复杂的页面，可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。

Flexbox 布局在定义伸缩项目大小时伸缩容器会预留一些可用空间，让你可以调节伸缩项目的相对大小和位置。例如，你可以确保伸缩容器中的多余空间平均分配多个伸缩项目，当然，如果你的伸缩容器没有足够大的空间放置伸缩项目时， 浏览器会根据一定的比例减少伸缩项目的大小，使其不溢出伸缩容器。

综合而言，Flexbox 布局功能主要具有以下几点：

a、屏幕和浏览器窗口大小发生改变也可以灵活调整布局；

b、可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；

c、可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；

d、可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围； e、可以控制元素在页面上的布局方向；

f、可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。

(4) 、瀑布流布局

瀑布流布局是流式布局的一种。是当下比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据

块并附加至当前尾部。最早采用此布局的网站是 Pinterest，逐渐在国内流行开来。

优点：

a、有效的降低了界面复杂度，节省了空间：我们不再需要臃肿复杂的页码导航链接或按钮了。

b、对触屏设备来说，交互方式更符合直觉：在移动应用的交互环境当中，通过向上滑动进行滚屏的操作已经成为最基本的用户习惯，而且所需要的操作精准程度远远低于点击链接或按钮。

c、更高的参与度：以上两点所带来的交互便捷性可以使用户将注意力更多的集中在内容而不是操作上，从而让他们更乐于沉浸在探索与浏览当中。

缺点：

a、有限的用例：

无限滚动的方式只适用于某些特定类型产品当中一部分特定类型的内容。

例如，在电商网站当中，用户时常需要在商品列表与详情页面之间切换，这种情况下，传统的、带有页码导航的方式可以帮助用户更稳妥和准确的回到某个特定的列表页面当中。

b、额外的复杂度：

那些用来打造无限滚动的 JS 库虽然都自称很容易使用，但你总会需要在自己的产品中进行不同程度的定制化处理，以满足你们自己的需求;另外这些 JS 库在浏览器和设备兼容性等方面的表现也参差不齐，你必须做好充分的测试与调整工作。

c、再见了，页脚：

如果使用了比较典型的无限滚动加载模式，这就意味着你可以和页脚说拜拜了。最好考虑一下页脚对于你的网站，特别是用户的重要性;如果其中确实有比较重要的内容或链接，那么最好换一种更传统和稳妥的方式。

千万不要耍弄你的用户，当他们一次次的浏览到页面底部，看到页脚，却因为自动加载的内容突然出现而无论如何都无法点击页脚中的链接时，他们会变的越发愤怒。

d、集中在一页当中动态加载数据，与一页一页的输出相比，究竟那种方式更利于 SEO，这是你必须考虑的问题。对于某些以类型网站来说，在这方面进行冒险是很不划算的。

e、关于页面数量的印象：

其实站在用户的角度来看，这一点并非负面;不过，如果对于你的网站来说，通过更多的内容页面展示更多的相关信息(包括广告)是很重要的策略，那么单页无限滚动的方式对你并不适用。

(5) 、流式布局（Fluid）

固定布局和流式布局在网页设计中最常用的两种布局方式。固定布局能呈现网页的原始设计效果，流式布局则不受窗口宽度影响，流式布局使用百分比宽度来限定布局元素，这样可以根据客户端分辨率的大小来进行合理的显示。

(6) 、响应式布局

响应式布局是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。优点：

a、面对不同分辨率设备灵活性强

b、能够快捷解决多设备显示适应问题缺点：

a、兼容各种设备工作量大，效率低下

b、代码累赘，会出现隐藏无用的元素，加载时间加长

c、其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果d、一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

30. overflow :hidden 是否形成新的块级格式化上下文？

参考答案：

会形成，触发 BFC 的条件有：

- float 的值不为 none。

- overflow 的值不为 visible。

- display 的值为 table-cell, table-caption, inline-block 中的任何一个。

- position 的值不为 relative 和 static。