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

参考答案

(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个都写上就行，就能实现兼容

列出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）

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

参考答案

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

(2)、浮动元素居中:

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

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

方法三:position定位等等。

CSS中link 和@import 的区别是？

参考答案

(1)、link属于HTML标签，而@import是CSS提供的;

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

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

(4)、link方式的样式的权重高于@import的权重.

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

参考答案

(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时，会出现滚动条。

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

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属性的表象。

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

参考答案

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

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

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

参考答案

问题：

（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

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

参考答案

回答一：

（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请求

为什么要初始化CSS样式？

参考答案

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

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

最简单的初始化方法就是： {padding: 0; margin: 0;} （不建议）

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

参考答案

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

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

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

(2)、使用overflow。

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

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

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

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

参考答案

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

谈谈你对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不能直接修改，可以被用户样式覆盖。

请你说说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的重要区别： 它们计算的规则一个是依赖父元素另一个是依赖根元素计算

请你说说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 ) 此属性表现为怪异模式下的盒模型。

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

参考答案

在“标准模式”(Standards Mode) 页面按照 HTML 与 CSS 的定义渲染，而在“怪异模式”(Quirks Mode)就是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循W3C 标准的网页而产生的一种页面渲染模式。浏览器基于页面中文件类型描述的存在以决定采用哪种渲染模式；如果存在一个完整的DOCTYPE则浏览器将会采用标准模式，而如果它缺失则浏览器将会采用怪异模式。

强烈建议阅读加深理解：怪异模式（Quirks Mode）对 HTML 页面的影响，这里列下浏览器标准模式和怪异模式的区别：

（1）盒模型：

在怪异模式下，盒模型为IE盒模型而非标准模式下的W3C 盒模型：在 IE 盒模型中，

box width=content width + padding left + padding right + border left + border

right，

box height=content height + padding top + padding bottom + border top +

border bottom。

而在 W3C 标准的盒模型中，box 的大小就是 content 的大小。

（2）图片元素的垂直对齐方式:

对于inline元素和table-cell元素，在 IE Standards Mode 下 vertical-align 属性默认取值为baseline。而当inline元素的内容只有图片时，如table的单元格table-cell。在 IE Quirks Mode 下，table单元格中的图片的 vertical-align 属性默认为bottom，因此，在图片底部会有几像素的空间。

（3）<table>元素中的字体:

CSS 中，描述font的属性有font-family，font-size，font-style，font-weigh,上述属性都是可以继承的。而在IE Quirks Mode 下，对于table 元素，字体的某些属性将不会从body或其他封闭元素继承到table中，特别是 font-size属性。

（4）

内联元素的尺寸:

在 IE Standards Mode 下，non-replaced inline 元素无法自定义大小，而在IE Quirks Mode 下，定义这些元素的width和height 属性，能够影响该元素显示的大小尺寸。

（5）

元素的百分比高度:

a、CSS 中对于元素的百分比高度规定如下，百分比为元素包含块的高度，不可为负值。如果包含块的高度没有显式给出，该值等同于“auto”（即取决于内容的高度）。所以百分比的高度必须在父元素有声明高度时使用。

b、当一个元素使用百分比高度时，在IE Standards Mode 下，高度取决于内容的变化，而在Quirks Mode 下，百分比高度则被正确应用。

（6）

元素溢出的处理：

在 IE Standard Mode 下，overflow取默认值 visible，即溢出可见，这种情况下，溢出内容不会被裁剪，呈现在元素框外。而在Quirks Mode 下，该溢出被当做扩展box来对待，即元素的大小由其内容决定，溢出不会被裁剪，元素框自动调整，包含溢出内容。

怪异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模式下，给<span>等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。

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

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

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

参考答案

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

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

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

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

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

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

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

参考答案

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

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

参考答案

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

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

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

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

参考答案

每种浏览器都有一套默认的样式表，即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}

谈谈你对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时元素将脱离标准流。

说说你对页面中使用定位(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）

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

参考答案

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

z-index属性

语法：z-index: auto | <integer>

默认值：auto

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

取值：

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

整数： 用整数值来定义堆叠级别。可以为负值。 说明：

检索或设置对象的层叠顺序。

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

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

arkdown 从诞生之初，就因为其轻量、简便，而被内容创造者所青睐。然而并不是所有的地方都支持直接书写并渲染 Markdown 格式的文档，也并不是所有利用 Markdown 生成内容都是那么方便。接下来，我来介绍下面这几个在线的小工具，来帮助你更方便地排版 Markdown 文章。

Markdown Tables Generator

? 链接：https://www.tablesgenerator.com/markdown_tables

在 Markdown 中新建一个表格确实不是件轻松的事情。这个 Markdown Tables Generator 可以方便的为我们创建 Markdown 格式的表格文本，我们只需要指定表格的内容即可。

要知道，Markdown Tables Generator 是一个「所见即所得」的交互方式，因此我们创建表格的方式就非常直观清晰。同时，Markdown Tables Generator 还能够直接帮我们设置某列的左对齐、居中和右对齐等样式。我们生成成功一个表格之后，直接将下方的 Markdown 纯文本拷贝，就能粘贴到我们所使用的 Markdown 编辑器中了。

不得不再说一下，实际上这个 Tables Generator 这个网站除了支持生成 Markdown 格式的表格，还能帮我们方便的绘制 LaTeX、HTML、纯文本和 MediaWiki 格式的表格。特别是 LaTeX 格式的复杂表格，利用 Tables Generator 这个网站生成的操作过程太人性化了，非常推荐。

Paste to Markdown

链接：https://euangoddard.github.io/clipboard2markdown

Paste to Markdown 是一个能帮我们将复制的富文本转换为 Markdown 格式的纯文本的网站。比方说，如果我们在一个网页上面看到了一篇文章，并希望能够直接保存为 Markdown 格式至本地，我们可以首先通过浏览器的阅读模式将原网页格式化，从而去除没有用的元素并正确排版，之后再通过 Paste to Markdown 将原网页或浏览器阅读模式的富文本内容转换为 Markdown 格式的内容。

通过 Paste to Markdown，我们不仅仅能成功将我们常用的加粗、斜体、删除线、标题和列表等富文本元素全部转换为 Markdown 格式的内容，还可以直接地将我们复制的图片的链接（即「图片外链」）转换为标准 Markdown 图片引用的格式（比如：），这样的格式化处理让我们保存网页文章至本地的操作成本大大降低。

Markdown Here

链接：https://markdown-here.com/

Markdown Here 是一个相对知名的浏览器 Markdown 扩展插件。其最方便的地方就在于：能够将我们在任意位置书写的 Markdown 格式的纯文本转换为相应的富文本内容。这尤其方便了我们在撰写邮件的时候进行排版，简单的 Markdown 让我们高效完成邮件的主体内容，之后通过 Markdown Here 插件一键转换，就能看到已经排版好的邮件内容。

Markdown Here 这个浏览器插件支持 Chrome、Safari、Firefox 等绝大多数浏览器，我们可以直接在 这个页面 下载你所使用的浏览器的插件。同时，Markdown Here 也开源在 GitHub 上面：adam-p/markdown-here

WeChat Format

链接：https://lab.lyric.im/wxformat

WeChat Format 是一个开源的、专为微信公众号排版准备的在线 Markdown 编辑器。相信大家如果有微信公众号排版使用的经验，就一定体验过糟糕的微信公众号后台「所见即所得」编辑器。在秀米、135 等专门为微信公众号排版而生的样式编辑器霸道横行的时代，如果我们能利用 Markdown 直接排版微信公众号，那岂不是又方便又舒服。

传统的 Markdown 编辑器的输出预览其实也是可以直接复制粘贴到微信公众号后台排版工具中的，只是微信公众号并不允许我们添加除了公众号文章以外的链接。WeChat Format 很好的解决了这一问题：文章中的全部链接都以文章尾注的形式加在了文章末尾，这样既方便了我们直接利用 Markdown 排版文章，还能让读者轻松查看相应的链接。

目前 WeChat Format 已经将源代码开源于 lyricat/wechat-format，更加详细的介绍和说明文档位于「花三小时写这个工具，只为一分钟拯救公众号排版」，我们如果希望自定义排版的样式，由于 WeChat Format 已经开源了全部源码，因此我们当然可以直接自己部署整个项目，并通过修改 CSS 来自定义排版样式。

Mermaid JS

?? 链接：https://mermaidjs.github.io/mermaid-live-editor/#/

Mermaid JS 是一个专为流程图、时序图和甘特图等图表的绘制准备的渲染引擎。虽然 Mermaid 渲染引擎的语法相对比较复杂，但是经过简单的学习我们就可以利用 Mermaid 直接在 Markdown 里面绘制流程图、时序图和甘特图等相对专业的图表。

这里我推荐这个 Mermaid JS 在线编辑器，我们可以直接使用 Mermaid 语法绘制相应的流程图、时序图和甘特图等图标，并将渲染出来的图表以 SVG 的格式下载到本地。

在线 Markdown 编辑器

说完了上面这几个 Markdown 相关的网页小工具，接下来我再来推荐两个好用的在线 Markdown 编辑器。

StackEdit

链接： https://stackedit.io/app

StackEdit 是一个非常优质的在线 Markdown 编辑器，其最大的方便之处是能够和 Dropbox、GitHub、GitLab 和 Google Drive 等直接同步，以及 Blogger、WordPress、ZenDesk 等内容发布平台的直接发布功能。要说在线编辑器最大的优势，那肯定就是「随时随地，想写就写」。只要有网络和浏览器，我们就能创造内容。StackEdit 还能够让我们在任何地方、任何设备上面同步修改撰写我们创作的文章，写完文章就可以直接发布。这样的「一条龙服务」是本地的 Markdown 编辑器所几乎无法达到的。

不仅如此，StackEdit 还原生直接支持了 Mermaid 渲染引擎，也就是说我们在 StackEdit 里面能够直接利用 Mermaid 渲染 UML 图表等复杂的内容。很多本地的 Markdown 编辑器都没有做到的功能，StackEdit 全都能胜任。得益于 PWA 技术，StackEdit 网页编辑器实际上离线同样也可以使用，因此我们完全可以直接将 StackEdit 添加到本地，这样没有网络我们照样能够进行创作。

HackMD

链接： https://hackmd.io/

HackMD 和上面 StackEdit 最大的功能升级就是：HackMD 支持多人协作撰写 Markdown 文档。我们可以直接理解 HackMD 就是 Markdown 世界里的 Google Docs（或腾讯文档、石墨文档这种团队协作文档编辑器）。我们可以利用 HackMD 和团队成员共同实时地写作撰写编辑一篇 Markdown 文档，方便高效。

HackMD 原生嵌入了 MathJax 及 UML 模式，我们可以直接快速书写书写公式或流程图，当然也可以利用 Mermaid 渲染引擎制作 UML 图表。

值得注意的是，上面这两款在线的 Markdown 编辑器都是无需登录即可使用的，只有 HackMD 在多人协作时才需要登录。

小结

随着 Web 技术的急速发展，基于 Web 前端的小工具越来越丰富也越来越强大。很多时候一些小功能，桌面客户端往往都没有做很好的处理，这时候 Web 前端的小工具反而能够胜任。不仅如此，我们还可以通过 PWA 技术让这些网页 App 直接变成桌面软件，离线使用，无所不能。

善用在线小工具，我们很多时候会发现原本简洁的工作流程还能更加高效。希望这篇文章中提到的这些工具在你的创作过程中满足你的所有需求。感谢阅读。