weixin_30709635
weixin_30709635

【干货分享】前端面试知识点锦集02（CSS篇）——附答案

二、CSS部分

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

回答一：
a、标准的css盒子模型：宽度=内容的宽度+边框的宽度+加上内边具的宽度
b、网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。
c、这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
回答二：
盒子模型也有人称为框模型，HTML中的多数元素都会在浏览器中生成一个矩形的区域，每个区域包含四个组成部分，从外向内依次是：外边距（Margin）、边框（Border）、内边距（Padding）和内容（Content），其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型，加上了doctype声明，让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子。

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

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

2.1、基础的选择器

2.2、组合选择器

2.3、属性选择器

2.4、伪类

2.5、伪元素

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，按位比较，从左到右，只要一位高于则立即胜出，否则继续比较。

【干货分享】前端面试知识点锦集02（CSS篇）——附答案_第1张图片

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标签

（CSS2） 
inline-table： 指定对象作为内联元素级的表格。类同于html标签
（CSS2） 
table-caption： 指定对象作为表格标题。类同于html标签（CSS2） 
table-row-group： 指定对象作为表格行组。类同于html标签（CSS2） 
table-column： 指定对象作为表格列。类同于html标签（CSS2） 
table-column-group： 指定对象作为表格列组显示。类同于html标签（CSS2） 
table-header-group： 指定对象作为表格标题组。类同于html标签（CSS2） 
table-footer-group： 指定对象作为表格脚注组。类同于html标签（CSS2） 
run-in： 根据上下文决定对象是内联对象还是块级对象。（CSS3） 
box： 将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3） 
inline-box： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3） 
flexbox： 将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3） 
inline-flexbox： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3） 
flex： 将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3） 
inline-flex： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）

注：红色加粗字体为display常用的取值

  • 如果display设置为none， float及 position属性定义将不生效；
  • 如果 position既不是static也不是relative或者 float不是none或者元素是根元素，当display:inline-table时，display的计算值为table；当display:inline | inline-block | run-in | table-* 系时，display的计算值为block，其它情况为指定值；

  • IE6,7支持inline元素转换成inline-block，但不支持block元素转换成inline-block，所以非inline元素在IE6,7下要转换成inline-block，需先转换成inline，然后触发hasLayout，以此来获得和inline-block类似的效果；你可以这样：

  • 全兼容的inline-block：

    div {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    }

Basic Support包含值：none | inline | block | list-item | inline-block 
table系包含值：table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group 
IE6,7只支持inline元素设置为inline-block，其它类型元素均不可以

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

(1)、非浮动元素居中：可以设置 margin:0 auto 令其居中, 定位 ,父级元素text-algin: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)、额外标签法，

（缺点：不过这个办法会增加额外的标签使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不能直接修改，可以被用户样式覆盖。

【干货分享】前端面试知识点锦集02（CSS篇）——附答案_第2张图片

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、浏览器标准模式和怪异模式之间的区别是什么？

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

强烈建议阅读加深理解：[怪异模式（Quirks Mode）对 HTML 页面的影响](http://www.ibm.com/developerworks/cn/web/1310_shatao_quirks/)，这里列下浏览器标准模式和怪异模式的区别：
（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）`

（CSS2） 
table-cell： 指定对象作为表格单元格。类同于html标签
（CSS2） 
table-row： 指定对象作为表格行。类同于html标签
`元素中的字体:
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`来对待，即元素的大小由其内容决定，溢出不会被裁剪，元素框自动调整，包含溢出内容。
另外可参考阅读：https://www.cs.tut.fi/~jkorpela/quirks-mode.html

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

【干货分享】前端面试知识点锦集02（CSS篇）——附答案_第3张图片

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 |
默认值：auto
适用于：定位元素。即定义了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、overfloa:hidden是否形成新的块级格式化上下文？

会形成，触发BFC的条件有：
- float的值不为none。
- overflow的值不为visible。
- display的值为table-cell, table-caption, inline-block 中的任何一个。
- position的值不为relative 和static。

31、解释下 CSS sprites，以及你要如何在页面或网站中使用它？

CSS Sprites就是把网页中一些小图片整合到一张图片文件中，再利用CSS的`background-image`，`background- repeat`，`background-position`的组合进行背景定位，`background-position`可以用数字能精确的定位出背景图片的位置。可以减少http请求。

32、书写高效 CSS 时会有哪些问题需要考虑？

a、样式是：从右向左的解析一个选择器
b、ID最快，Universal最慢 有四种类型的key selector，解析速度由快到慢依次是：ID、class、tag和universal
c、不要tag-qualify （永远不要这样做 ul#main-navigation { } ID已经是唯一的，不需要Tag来标识，这样做会让选择器变慢。）
d、后代选择器最糟糕（换句话说，下面这个选择器是很低效的： html body ul li a { }）
e、想清楚你为什么这样写
f、CSS3的效率问题（CSS3选择器（比如 :nth-child）能够漂亮的定位我们想要的元素，又能保证我们的CSS整洁易读。但是这些神奇的选择器会浪费很多的浏览器资源。）
g、我们知道#ID速度是最快的，那么我们都用ID，是不是很快。但是我们不应该为了效率而牺牲可读性和可维护性`
注：Universal：普通，tag:标签
可参考： http://blog.jobbole.com/55067/

33、css sprite是什么,有什么优缺点？

回答一

CSS Sprites也就是通常说的CSS精灵，也有人称为雪碧图，是对网页中加载的图片的处理技术。在一个网页中可能有多张小的图片，如图标等，会向服务器发送多个请请求，请求数越多，服务器的压力就越大，精灵技术就是先将多张小的图片合并成一张图片，然后在CSS中分开为多张小图片的一种技术。如下图所示：

【干货分享】前端面试知识点锦集02（CSS篇）——附答案_第4张图片

优点：
a、利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
b、CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
c、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
d、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
缺点：
a、在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；
b、CSS Sprites在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置。
c、CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。
回答二
(1)、概念：将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。
(2)、优点：
a、 减少HTTP请求数，极大地提高页面加载速度
b、增加图片信息重复度，提高压缩比，减少图片大小
c、更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现
(3)、缺点：
a、图片合并麻烦
b、维护麻烦，修改一个图片可能需要从新布局整个图片样式

34、CSS 属性是否区分大小写？

不区分，HTML，CSS都对大小写不敏感，但为了更好的可读性和团队协作一般都小写，而在XHTML 中元素名称和属性是必须小写的。

35、display: none与visibility: hidden的区别？

联系：它们都能让元素隐藏
区别：
a、display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
b、display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility: hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式
c、修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。
d、读屏器不会读取display: none;元素内容；会读取visibility: hidden;元素内容

36、PNG,GIF,JPG的区别及如何选择?

GIF
a、8位像素，256色
b、无损压缩
c、支持简单动画
d、支持boolean透明
e、适合简单动画
JPEG
a、颜色限于256
b、有损压缩
c、可控制压缩质量
d、不支持透明
3、适合照片
PNG
a、有PNG8和truecolor PNG
b、PNG8类似GIF颜色上限为256，文件小，支持alpha透明度，无动画
c、适合图标、背景、按钮
参考资料： [选择正确的图片格式]：http://www.yuiblog.com/blog/2008/11/04/imageopt-2/

37、如何水平居中一个元素?

(1)、如果需要居中的元素为"常规流中inline元素"
为父元素设置text-align: center;即可实现
(2)、如果需要居中的元素为"常规流中block元素"
a、为元素设置宽度
b、设置左右margin为auto
c、IE6下需在父元素上设置text-align: center;再给子元素恢复需要的值
(3)、如果需要居中的元素为"浮动元素"
a、为元素设置宽度
b、position: relative
c、浮动方向偏移量（left或者right）设置为50%
d、浮动方向上的margin设置为元素宽度一半乘以-1，变成负数如：margin-left: -250px;
(4)、如果需要居中的元素为"绝对定位元素"
a、为元素设置宽度
b、偏移量设置为50%
c、偏移方向外边距设置为元素宽度一半乘以-1

38、position:absolute和float属性的异同 ?

A：共同点：对内联元素设置`float`和`absolute`属性，可以让元素脱离文档流，并且可以设置其宽高。
B：不同点：float仍会占据位置，position会覆盖文档流中的其他元素。

39、介绍一下box-sizing属性？

box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。
a、content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高
b、border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content

标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。

40、CSS3有哪些新特性？

CSS3实现
a、圆角（border-radius）
b、阴影（box-shadow），
c、对文字加特效（text-shadow、）
d、线性渐变（gradient）
e、变换（transform）
f、transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)--旋转,缩放,定位,倾斜
g、增加了更多的CSS选择器 、多背景、 rgba
h、在CSS3中唯一引入的伪元素是::selection.
i、媒体查询，多栏布局
j、border-image

41、请你说一下你对Web Font的认识?

web font是应用在web中的一种字体技术，在CSS中使用font-face定义新的字体
font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中。
@font-face 能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体，可以实现矢量图标。如下所示：

【干货分享】前端面试知识点锦集02（CSS篇）——附答案_第5张图片

font-face优点
(1)、可缩放性（Scalability）
基于字体的icon是与分辨率无关并能缩放到任何想要程度的技术。你的图标看起来毫不关心retina,HDPI,XHDPI等等屏幕，但渲染时会根据目标设备自动调整，你将有能力应对任何当下，未来，或大多数任意规格的设备
(2)、尺寸（Size）
裁剪到正确的比例，icon font的文件的大小要比起位图小到难以置信的程度，使用icon font时，你不需要根据不同设备准备不同的图片，你的APP只需要在启动时加载一次icon font文件即可。
(3)、可维护性（Maintainability）
自你的icon打包进一个字体文件，在项目自始至终你仅需要维护这个单一的字体文件。
通过管理字体文件你可以很自然的组织你的icon集合，任意的进行修改或扩展
(4)、可推广性（Adoption）
然而，应用这样的icon fonts可能会影响你和你同事之间的工作流程，但说服让他们采用这样的技术也非常简单，有数款免费或收费的工具帮你轻松达到目的并能看到很好的应用结果，在几乎任意（手机）移动平台、浏览器或操作系统
(5)、灵活性（Flexibility）
应用icon fonts技术中最有意义的一项能力是可以操纵icon fonts， 改变颜色，大小，仅仅几行代码就可以在瞬间改变外观
可交互性(Interactivity)：
由于灵活性以及能够通过代码方便的操纵，icon fonts 是独一无二的在运行时被操纵，通过应用icon fonts技术， 你能轻松的在不同状态显示对应的不同效果，创建动画。

42、请简要说说CSS 预处理器与 CSS 后处理器？

广义上说，目标格式为CSS的预处理器是CSS预处理器，但本文特指以最终生成 CSS为目的的领域特定语言。
Sass、LESS、Stylus 是目前最主流的 CSS 预处理器。
优点：语言级逻辑处理，动态特性，改善项目结构
缺点：采用特殊语法，框架耦合度高，复杂度高

CSS 后处理器是对CSS进行处理，并最终生成CSS的预处理器，它属于广义上的CSS 预处理器。
我们很久以前就在用CSS后处理器 了，最典型的例子是CSS压缩工具（如 clean-css），只不过以前没单独拿出来说过。
还有最近比较火的 Autoprefixer，以 Can I Use上的浏览器支持数据 为基础，自动处理兼容性问题。
优点：使用CSS语法，容易进行模块化，贴近 CSS 的未来标准
缺点：逻辑处理能力有限。

43、浏览器兼容包括哪些方面？兼容的一般标准是什么?

方面
(1)、CSS兼容
(2)、JavaScript兼容
(3)、HTML兼容
这三类也是前端的主要组成部分，都存在一定的兼容性问题。
兼容的一般标准
(1)、在不同的主流的浏览器上表现效果一致
(2)、能适应不同的屏幕大小
(3)、能适应不同的分辨率与色彩深度

44、说说你对CSS Hack的理解?

CSS Hack就是针对不同的浏览器或不同版本浏览器写特定的CSS样式达到让浏览器兼容的过程。
a、条件注释法
IE条件注释（Conditional comments）是IE浏览器私有的代码，在其它浏览器中被视为
注释。代码如下所示：










用于非 IE

b、样式内属性标记法
在CSS样式的属性名前或值后面添加特殊的字符让不同的浏览器解析。

【干货分享】前端面试知识点锦集02（CSS篇）——附答案_第6张图片

c、选择器前缀法

*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

45、请简要说说什么是文档模式 （X-UA-Compatible） ?

文档模式是IE8浏览器以后的一种独有技术，他可以通过meta指定当前文档的渲染模式，如可以把IE8降级成IE6、IE7使用。文档模式的主要作用是影响浏览器显示网页HTML的方式，用于指定IE的页面排版引擎（Trident）以哪个版本的方式来解析并渲染网页代码。



最新IE
“X-UA-Compatible”的值有两种方式：Emulate+IE版本号，单纯版本号
EmulateIE8：如果声明了文档类型，则以IE8标准模式渲染页面，否则将文档模式设置为IE5
9：强制以IE9标准模式渲染页面，忽略文档类型声明
x-ua-compatible 头标签大小写不敏感，必须用在 head 中，必须在除 title 外的其他 meta 之前使用。


Google Chrome Frame(谷歌内嵌浏览器框架GCF)
插件可以让用户的IE浏览器外不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核

46、请说说javascript兼容的含义？

这里有两层意思，第一可以使用javascript操作样式与标签，强制浏览器兼容，比如先使用javascript判断浏览器类型，再操作样式与标签。
第二指javascript存在兼容问题，如一个对象在某些浏览器下没有办法使用，要让javascript更加兼容，可以采取如下办法：
(1)、使用第三方提代的javascript库，如jQuery，Zepto， Prototype，dojo、YUI、ExtJS
像jQuery这种成熟的javascript库经过多次的版本迭代，已经变得非常成熟，世界上的网站到现在近60%都使用到了jQuery，他的兼容性不错。
(2)、浏览器检测、重新封装
使用javascript判断浏览器类型，对一些特点的方法或对象重新封装后使用屏蔽浏览的不兼容性。可以使用User-Agent、或特定对象。

47、谈谈你对前端性能优化的认识?

【干货分享】前端面试知识点锦集02（CSS篇）——附答案_第7张图片

在保证功能的前提下，性能也非常关键。从上图可以看出如果性能太差，响应速度慢将带非常差的用户体验，会失去大量用户。
好的性能要依托如下几个方面：
(1)、服务器端
(2)、网络速度，客户端与服务器之间的每个网络环节
(3)、客户端软件与硬件配置
(4)、前端的性能，资源的数量，大小，javascript的时间与空间复杂度等
要提高前端的性能可以从如下几个方面入手：
(1)、尽量减少HTTP请求数量
(2)、压缩
(3)、缓存
(4)、使用内容发布网络（CDN的使用）
(5)、DNS Prefetch
(6)、将CSS样式表放在顶部
(7)、将javascript脚本放在底部
(8)、使用外部javascript和CSS
(9)、避免重定向

48、什么是内容分发网络（CDN）?

CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定，它是一个经策略性部署的整体系统，包括分布式存储、负载均衡、网络请求的重定向和内容管理4个要件。
比如我们在项目中使用jQuery ,加载本地服务器的jQuery可能不如资源公共库中做过CDN优化的资源快。

49、请简要说说CoffeeScript、TypeScript是什么?

javascript变得日益重要，但有很多明显的缺点，借助一种中间语言转译出优雅的javascript是解决这些问题的方法。如CoffeeScript，TypeScript。
Coffee Script是JavaScript的转译语言。了解JavaScript的发展历程：https://news.cnblogs.com/n/558565/
CoffeeScript的特点：
a、CoffeeScript语法类似 Ruby ，可以被编译成 JavaScript
b、CoffeeScript取JavaScript之精华，而抛弃了诸如全局变量声明、with等容易出错的部分
c、CoffeeScript是JavaScript与程序员之间的桥梁，程序员看到的是优雅的CoffeeScript接口，使得编程更简洁，写法更随意
d、更少，更紧凑，和更清晰的代码
e、通过规避和改变对JavaScript中不良部分的使用，只留下精华，让代码减少出错率，更容易维护
f、在很多常用模式的实现上采用了JavaScript中的最佳实践
g、CoffeeScript生成的JavaScript代码都可以完全通过JSLint的检测

TypeScript是一种由微软开发的自由和开源的编程语言，它是JavaScript的一个超集，扩展了JavaScript的语法，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。安德斯·海尔斯伯格，C#的首席架构师，工作于TypeScript的开发。

50、谈谈你对before、after伪元素的认识?

伪元素不是真的元素是通过CSS虚拟出的一个元素，CSS3的语法为了区分伪元素与伪类，使用"::"表示，但是前期为了兼容":"仍然可以使用。
before
在应用样式的元素内的前部虚拟一个元素可以指定元素的内容与样式。
after
after也是一个与before类似的伪元素，不同的是他的位置是在内部的尾部。
注意：
a、本质上并不支持伪元素的双冒号(::)写法，而是忽略掉了其中的一个冒号，仍以单冒号来解析，所以等同变相支持了E::after。
b、不支持设置属性position, float, list-style-*和一些display值，Firefox3.5开始取消这些限制。
c、IE10在使用伪元素动画有一个问题：
.test:hover {}
.test:hover::after { /* 这时animation和transition才生效 */ }需要使用一个空的:hover来激活

51、内容还会不断补充。。。

博客数据来源声明：
本博客大部分数据来源于各大网站的收集整理改编，主要有GitHub(https://github.com)、题来了(http://www.tilaile.com)、牛客网(https://www.nowcoder.com)、一些英文网站，还有一些论坛、博客、IT招聘等网站。还有少部分数据时来源于本人自己整理添加，添加的内容主要是本人认为比较重要知识点，面试时可能会问到的题目，自己整理题目以及参考答案，答案仅供参考，答案可能存有错误或不足，欢迎大家批评指正或补充更好的答案。好让我及时更正，以免误导其他人。本博客仅提供参考作用。

转载于:https://www.cnblogs.com/SeeYouBug/p/6189115.html

你可能感兴趣的:(【干货分享】前端面试知识点锦集02（CSS篇）——附答案)

  • 2021-05-25 张辣鸡 爬虫记录python爬虫
    解决12306抢票系统弹出来的弹窗问题应为疫情原因进入12306网站登陆界面弹出来这样一个界面进入登陆界面的网站，把鼠标放在确定的位置右键点击检查，找到#我把它放在另一个函数中，这样调用就可以了defclick_ok1(self):bounce_button=driver.find_element_by_css_selector(".btn.btn-primary.ok")bounce_butto
  • C++内存管理——unique_ptr HIT_055 c++c++11
    1.概述本想将unique_ptr,shared_ptr和weak_ptr写在同一篇文章中，无奈越（废）写（话）越（连）长（篇），本着不给自己和读者太大压力的原则，最终决定分为三篇去描述它们（不是恶意凑文章数哦）。本篇文章主要描述了unique_ptr，在此之前先给出了auto_ptr的介绍，废话不说，直入正题。2.auto_ptrauto_ptr是在C++98中引入的，在C++17中被移除掉。它
  • 【实验五 一维数组】7-2 sdut-C语言实验-整数位 卡西莫多~ SDUT的PTA练习算法开发语言c语言
    7-2sdut-C语言实验-整数位输入一个不多于5位的正整数，要求：（1）求出它是几位数；//一个计数循环（2）分别输出每一位数字；//正序输出各位数字（3）按逆序输出各位数字。//逆序输出各位数字输入格式:输入一个不多于5位的正整数。输出格式:输出数据有3行，第一行为正整数位数，第二行为各位数字，第三行为逆序的各位数字。输入样例:123输出样例:3123321答案示例1（无注释）#include
  • “深入浅出”系列之杂谈篇：（3）Qt5和Qt6该学哪个？ 我真不会起名字啊 qt开发语言
    建议qt5且版本为qt5.14.2(百度搜qtarchieve获取)，更高版本的坚决不碰。建议这个版本的核心原因是之后的qt版本全部没有离线安装包，只有在线安装器，这个在线安装器经常会偷偷改掉你可以安装的qt版本以及该版本内部可安装的模块，比如(做个假设)你今天装了qt6.2.1然后安装时少安了几个模块，过一段时间你突然需要想安装，会发线在线安装器找不到这个版本了于是你只能把这个版本卸载了装更高的
  • 深度学习处理时间序列（2） yyc_audio 深度学习笔记深度学习人工智能
    在数据中寻找周期性在多个时间尺度上的周期性，是时间序列数据非常重要且常见的属性。无论是天气、商场停车位使用率、网站流量、杂货店销售额，还是健身追踪器记录的步数，你都会看到每日周期性和年度周期性（人类生成的数据通常还有每周的周期性）。探索数据时，一定要注意寻找这些模式。（让人想到波，想到傅里叶变换）对于这个数据集，如果你想根据前几个月的数据来预测下个月的平均温度，那么问题很简单，因为数据具有可靠的年
  • 青少年编程与数学 02-010 C++程序设计基础 46课题、链接库 明月看潮生 编程与数学第02阶段青少年编程c++编程与数学开发语言
    青少年编程与数学02-010C++程序设计基础46课题、链接库一、链接库（LinkLibrary）1.静态链接库（StaticLibrary）特点：示例：创建和使用静态链接库2.动态链接库（DynamicLibrary）特点：示例：创建和使用动态链接库1.2创建动态链接库2.编写使用链接库的程序3.编译和链接程序3.1编译和链接静态链接库3.2编译和链接动态链接库4.使用第三方链接库4.1下载和安
  • 1997-2022年 上市公司海外直接投资OFDI 资产剥离置换吸收合并债务重组要约收购股权转让-社科数据 泡芙萝莉酱 大数据社科数据人工智能大数据数据分析深度学习数据挖掘数据统计毕业论文
    上市公司海外直接投资OFDI1997-2022资产剥离置换吸收合并债务重组要约收购股权转让-社科数据https://download.csdn.net/download/paofuluolijiang/90027743https://download.csdn.net/download/paofuluolijiang/90027743包括交易信息、涉及方明细、公司基本信息三张表。1、公司基本信息表
  • 智慧医疗蛀牙检测数据集VOC+YOLO格式2792张3类别 FL1623863129 数据集深度学习机器学习人工智能
    数据集格式：PascalVOC格式+YOLO格式(不包含分割路径的txt文件，仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件)图片数量(jpg文件个数)：2792标注数量(xml文件个数)：2792标注数量(txt文件个数)：2792标注类别数：3标注类别名称(注意yolo格式类别顺序不和这个对应，而以labels文件夹classes.txt为准):["decaycavi
  • Java中DDD概念之四理解仓储模式：领域与数据层的优雅桥梁 以恒1 java开发语言
    Java，DDD概念之四理解仓储模式：领域与数据层的优雅桥梁一、仓储模式是什么？仓储（Repository）就像一个智能的业务数据管家。想象你经营一家图书馆，书籍的存放、检索、上架工作交给专业管理员，你只需告诉管理员：“我需要2023年出版的所有编程书籍”。仓储就是这样的管理员，把繁琐的数据操作封装起来，让业务代码专注处理核心逻辑。二、为什么需要仓储模式？1.传统开发的问题假设有一个用户管理系统：
  • VSCode 接入DeepSeek V3大模型，附使用说明 猫猫姐 大模型vscodeidedeepseek
    VSCode接入DeepSeekV3大模型，附使用说明由于近期DeepSeek使用人数激增，服务器压力较大，官网已暂停充值入口，且接口响应也开始不稳定，建议使用第三方部署的DeepSeek，如硅基流动或者使用其他模型/插件，如豆包免费AI插件MarsCode、阿里免费AI插件TONGYILingma或者一步到位，使用完全体的AI编辑器Cursor(收费，每月$20，2周试用)/Trae(完全免费，
  • MyBatis 从入门到精通：详解基础与实战（完整版） 以恒1 mybatis
    MyBatis从入门到精通：详解基础与实战（完整版）（新手入门篇在主页）一、MyBatis基础概念1.1什么是ORM？ORM（Object-RelationalMapping）即对象关系映射，是一种将数据库表与程序对象自动映射的技术。MyBatis作为半自动化的ORM框架，允许开发者直接编写SQL，同时自动处理对象与数据库结果的映射。1.2MyBatis核心功能SQL映射：将Java方法与SQL语
  • 深度好文 图解 RocketMQ 的系统架构 橘野禾 系统架构kafkajava分布式后端
    今天给大家分享一篇学习RocketMQ系统架构核心知识点的梳理和总结,在讲解时力求精简、通俗易懂，通过图解来给正在学习RocketMQ的小伙伴带来帮助。RocketMQ是阿里巴巴的分布式消息中间件，在2012年开源，在2017年成为Apache顶级项目。1集群架构RocketMQ的集群架构如下图：从上图可以看到，整个集群中有四个角色：NameServer集群、Broker主从集群、Producer
  • AI编程篇-python基础篇 cv工程师(ctrl+c\v) AI编程python
    转型AI算法后的总结-python基础篇python基础AI算法工程师的日常开发工作离不开python这门语言。python的优点：开源免费、简单易学、丰富的库。以下是我总结的python的一些基础：1.python及IDE工具安装对于初学者来说，python的安装是必不可少的，但是为了方便代码编辑和查看结果及debug，可以安装pycharm社区版暂时用来前期学习：python安装及注意事项：下
  • 计算机组成与设计：硬件软件接口（RISC-V版） 忧· risc-v
    第二章总结本篇主要总结RSIC-V的指令集，分别介绍不同类型的指令功能以及指令的使用示例。RISC-V指令集采用模块化设计，以书中介绍的为例，大体可将指令类型分为六种基本格式，分别为R型指令、I型指令、S型指令、B型指令、U型指令、J型指令。下面对每一种指令进行逐一介绍。R型指令（寄存器-寄存器操作）R型指令用于寄存器间的算术/逻辑运算，所有操作数均来自寄存器。下面是R型指令格式：funct7rs
  • 大规模语言模型从理论到实践 开源指令数据集 AI天才研究院 DeepSeekR1&大数据AI人工智能大模型AI大模型企业级应用开发实战AI大模型应用入门实战与进阶计算科学神经计算深度学习神经网络大数据人工智能大型语言模型AIAGILLMJavaPython架构设计AgentRPA
    大规模语言模型从理论到实践开源指令数据集1.背景介绍大规模语言模型（LargeLanguageModels,LLMs）近年来在自然语言处理（NLP）领域取得了显著的进展。诸如GPT-3、BERT等模型在各种任务中表现出色，从文本生成到翻译，再到问答系统，几乎无所不能。这些模型的成功离不开庞大的训练数据集和复杂的算法架构。然而，如何有效地构建和利用开源指令数据集，仍然是一个值得深入探讨的话题。2.核
  • 第四章：高级特性与最佳实践 - 第五节 - Tailwind CSS 代码组织和维护技巧
    在大型项目中，良好的代码组织和维护策略对于项目的可持续发展至关重要。本节将介绍如何在使用TailwindCSS的项目中组织和维护代码，以提高开发效率和代码质量。目录结构规范推荐的项目结构src/├──styles/│├──base/││├──typography.css││├──colors.css││└──reset.css│├──components/││├──button.css││├──c
  • RISC-V架构 vs ARM架构：硬件工程师的深度对比 ICGOODFIND1 risc-v架构arm开发
    引言在嵌入式系统和处理器设计领域，RISC-V和ARM架构是两大热门选择。作为硬件工程师，了解这两种架构的优缺点以及适用场景，对于选择合适的处理器至关重要。本文将从技术特性、生态系统、开发成本和未来趋势等方面，深入对比RISC-V和ARM架构，帮助你在项目中做出更明智的决策。1.架构设计：精简vs成熟RISC-V：开源与模块化RISC-V是一种基于精简指令集计算（RISC）原则的开源指令集架构（I
  • 第四章：高级特性与最佳实践 - 第三节 - Tailwind CSS 性能优化策略
    在使用TailwindCSS开发大型项目时，性能优化是一个不可忽视的话题。本节将从构建性能、运行时性能、文件体积等多个维度，详细介绍TailwindCSS的性能优化策略。构建优化优化扫描范围//tailwind.config.jsmodule.exports={content:[//只扫描实际使用的文件'./src/pages/**/*.{js,jsx,ts,tsx}','./src/compon
  • 黑客攻防从入门到精通（第一篇：认识黑客） 晓生夜梦 #黑客攻防书籍学习笔记信息安全
    1.黑客：白帽，灰帽，黑帽（骇客）2.黑客术语：肉鸡（可以随意被黑客控制的计算机），木马（伪装成正常程序），网页木马（有人访问时，利用对方系统或者浏览器的漏洞自动将配置好木马的服务下载到访问者的计算机上自动执行），挂马，后门（重新控制计算机）IPC$，shell，webshell，溢出，注入，注入点免杀（用一些技术修改程序，让它逃过杀毒软件查杀），加壳花指令（让汇编语言进行一些跳转——就比如杀毒软
  • 《黑客攻防从入门到精通：工具篇》全15章万字深度总结——从工具解析到实战攻防，构建完整网络安全知识体系 予安灵 黑客技术web安全安全系统安全网络安全安全架构网络攻击模型黑客工具链
    目录一、书籍核心逻辑与学习路径二、核心模块与工具深度解析模块1：信息收集与网络扫描模块2：渗透测试与漏洞利用模块3：密码攻防与身份认证模块4：恶意程序攻防模块5：网络追踪与反追踪模块6：系统加固与数据防护三、工具链实战方法论第一章：黑客必备小工具第二章：扫描与嗅探工具第三章：注入工具（诸如工具）第四章：密码攻防工具第五章：病毒攻防常用工具第六章：木马攻防常用工具第七章：网游与网吧攻防工具第八章：黑
  • 第四章：高级特性与最佳实践 - 第五节 - Tailwind CSS 代码组织和维护技巧
    在大型项目中，良好的代码组织和维护策略对于项目的可持续发展至关重要。本节将介绍如何在使用TailwindCSS的项目中组织和维护代码，以提高开发效率和代码质量。目录结构规范推荐的项目结构src/├──styles/│├──base/││├──typography.css││├──colors.css││└──reset.css│├──components/││├──button.css││├──c
  • 第四章：高级特性与最佳实践 - 第四节 - Tailwind CSS CSS 提取和打包优化
    在现代前端工程中，CSS的提取和打包优化对于项目性能至关重要。本节将详细介绍如何在使用TailwindCSS的项目中实现CSS的高效提取和打包优化。CSS提取策略MiniCssExtractPlugin配置//webpack.config.jsconstMiniCssExtractPlugin=require('mini-css-extract-plugin')module.exports={mo
  • 2025年移动端技术探索-DeepSeek这么说 轻口味 移动端移动端AndroidHarmonyOSHarmonyOSNextiOSAIDeepSeek
    随着移动互联网的逐步成熟，从增量市场向存量市场过度，对于开发的需求量大减，技术层面和业务层面的的需求量都很乏力。而且随着AI的发展，知识门槛基本消失，技能门槛也在缩短，从移动互联网向AI时代过度期间，更加比拼业务比拼创意，希望用AI重新改造某个行业。移动端方向整个24年最大的需求量是鸿蒙，2024年被称为“原生鸿蒙关键年”，华为联合头部企业（如中国移动、美团、百度等）加速构建独立生态，预计2024
  • kaggle-ISIC 2024 - 使用 3D-TBP 检测皮肤癌-学习笔记 supernova121 学习笔记
    问题描述：通过从3D全身照片(TBP)中裁剪出单个病变来识别经组织学确诊的皮肤癌病例数据集描述：图像+临床文本信息评价指标：pAUC，用于保证敏感性高于指定阈值下的AUC主流方法分析（文本）基于CatBoost、LGBM和XGBoost三者的组合，为每个算法创建了XX个变体，总共XX个模型，进行集成学习。CatBoost在传统梯度提升决策树（GBDT）基础上，引入了一系列关键技术创新，以提升处理类
  • 【Docker compose】基于宿主机的Neo4j自动备份 roman_日积跬步-终至千里 neo4jDockerdockerneo4j容器
    文章目录1、开启自动备份2、恢复1、开启自动备份在宿主机执行：bash#{lakehouse_home}/neo4j_cron.sh自动备份开启如下日志：FriMar701:59:53UTC2025-Checkingifcronjobalreadyexists.FriMar701:59:53UTC2025-Addingnewcronjob.FriMar701:59:53UTC2025-Cronjo
  • MobileMamba（2024 CV） 刘若里 论文阅读学习笔记网络计算机视觉人工智能
    论文标题MobileMamba:LightweightMulti-ReceptiveVisualMambaNetwork论文作者HaoyangHe,JiangningZhang,YuxuanCai,HongxuChen,XiaobinHu,ZhenyeGan,YabiaoWang,ChengjieWang,YunshengWu,LeiXie发表日期2024年11月01日GB引用>HaoyangHe
  • RISC-V与ARM IT_Beijing_BIT ARM系列小知识嵌入式
    RISC-V与ARMRISC-V架构RISC-V架构特点ARM架构RISC-V与ARM指令集架构(ISA)基本上是汇编级程序员，或编译器编写者可见的机器部分。ISA是软件与硬件相遇的地方。ISA定义了机器及其微架构本身可以理解的命令/指令，它还定义了如何存储、访问和实施指令。我们使用计算机可以理解的语言向计算机的硬件发出指令。计算机语言由称为指令的词组成，词汇表称为指令集。指令集告诉我们每条指令的
  • TRAE与Cursor最佳实践指南（截至2025年3月） xinxiyinhe AI编程人工智能pythonAI编程人工智能python
    一、核心能力适配策略TRAE的Builder模式开发流程需求拆解：将复杂需求分解为可执行子任务（如先搭建项目框架，再分模块实现功能），通过多轮对话逐步生成代码。多模态输入：上传设计草图或错误截图，结合自然语言描述需求，提升代码生成精准度（例如电商页面开发可直接上传原型图）。版本控制：利用“历史会话回溯”功能快速回退到指定版本，避免代码修改失控。Cursor的高效协作模式插件生态整合：复用VSCod
  • TRAE与Cursor AI编程工具综合对比（截至2025年3月） xinxiyinhe AI编程AI编程python
    一、核心定位与差异化Trae（字节跳动）本土化优先：专为中文开发者设计，提供全中文界面、中文代码注释及语义优化，例如可直接用中文描述需求（如“实现带登录功能的网页”）生成完整代码框架。免费策略：完全免费，集成Claude3.5和GPT-4o双模型，支持私有化部署及企业级数据隔离。开发环境：构建完整的AI原生IDE，注重项目全流程管理，支持从需求到部署的端到端开发。Cursor（Anysphere）
  • 基于AT89C52单片机的多功能万年历温度计设计 七月小卖铺 单片机单片机嵌入式硬件
    点击链接获取Keil源码与ProjectBackups仿真图：https://download.csdn.net/download/qq_64505944/89452374?spm=1001.2014.3001.5503C源码+仿真图+毕业设计+实物制作步骤+08AT89C52（与AT89S52、AT89C52通用，可任选）单片机、LCD液晶显示，DS1302时钟芯片、DS18B20温度传感器，蜂
  • ios内付费 374016526 ios内付费
    近年来写了很多IOS的程序，内付费也用到不少，使用IOS的内付费实现起来比较麻烦，这里我写了一个简单的内付费包，希望对大家有帮助。   具体使用如下: 这里的sender其实就是调用者，这里主要是为了回调使用。 [KuroStoreApi kuroStoreProductId:@"产品ID" storeSender:self storeFinishCallBa
  • 20 款优秀的 Linux 终端仿真器 brotherlamp linuxlinux视频linux资料linux自学linux教程
      终端仿真器是一款用其它显示架构重现可视终端的计算机程序。换句话说就是终端仿真器能使哑终端看似像一台连接上了服务器的客户机。终端仿真器允许最终用户用文本用户界面和命令行来访问控制台和应用程序。（LCTT 译注：终端仿真器原意指对大型机-哑终端方式的模拟，不过在当今的 Linux 环境中，常指通过远程或本地方式连接的伪终端，俗称“终端”。） 你能从开源世界中找到大量的终端仿真器，它们
  • Solr Deep Paging(solr 深分页) eksliang solr深分页solr分页性能问题
    转载请出自出处：http://eksliang.iteye.com/blog/2148370 作者：eksliang(ickes) blg:http://eksliang.iteye.com/ 概述 长期以来，我们一直有一个深分页问题。如果直接跳到很靠后的页数，查询速度会比较慢。这是因为Solr的需要为查询从开始遍历所有数据。直到Solr的4.7这个问题一直没有一个很好的解决方案。直到solr
  • 数据库面试题 18289753290 面试题 数据库
    1.union ,union all 网络搜索出的最佳答案： union和union all的区别是,union会自动压缩多个结果集合中的重复结果，而union all则将所有的结果全部显示出来，不管是不是重复。 Union：对两个结果集进行并集操作，不包括重复行，同时进行默认规则的排序； Union All：对两个结果集进行并集操作，包括重复行，不进行排序； 2.索引有哪些分类？作用是
  • Android TV屏幕适配 酷的飞上天空 android
    先说下现在市面上TV分辨率的大概情况 两种分辨率为主 1.720标清，分辨率为1280x720. 屏幕尺寸以32寸为主，部分电视为42寸 2.1080p全高清，分辨率为1920x1080 屏幕尺寸以42寸为主，此分辨率电视屏幕从32寸到50寸都有   适配遇到问题，已1080p尺寸为例： 分辨率固定不变，屏幕尺寸变化较大。 如：效果图尺寸为1920x1080，如果使用d
  • Timer定时器与ActionListener联合应用 永夜-极光 java
    功能:在控制台每秒输出一次   代码: package Main; import javax.swing.Timer; import java.awt.event.*; public class T { private static int count = 0; public static void main(String[] args){
  • Ubuntu14.04系统Tab键不能自动补全问题解决 随便小屋 Ubuntu 14.04
    Unbuntu 14.4安装之后就在终端中使用Tab键不能自动补全，解决办法如下：   1、利用vi编辑器打开/etc/bash.bashrc文件（需要root权限） sudo vi /etc/bash.bashrc  接下来会提示输入密码 2、找到文件中的下列代码 #enable bash completion in interactive shells #if
  • 学会人际关系三招 轻松走职场 aijuans 职场
    要想成功，仅有专业能力是不够的，处理好与老板、同事及下属的人际关系也是门大学问。如何才能在职场如鱼得水、游刃有余呢？在此，教您简单实用的三个窍门。 　　第一，多汇报 最近，管理学又提出了一个新名词“追随力”。它告诉我们，做下属最关键的就是要多请示汇报，让上司随时了解你的工作进度，有了新想法也要及时建议。不知不觉，你就有了“追随力”，上司会越来越了解和信任你。 　　第二，勤沟通 团队的力
  • 《O2O：移动互联网时代的商业革命》读书笔记 aoyouzi 读书笔记
    移动互联网的未来：碎片化内容+碎片化渠道=各式精准、互动的新型社会化营销。   O2O：Online to OffLine 线上线下活动 O2O就是在移动互联网时代，生活消费领域通过线上和线下互动的一种新型商业模式。   手机二维码本质：O2O商务行为从线下现实世界到线上虚拟世界的入口。   线上虚拟世界创造的本意是打破信息鸿沟，让不同地域、不同需求的人
  • js实现图片随鼠标滚动的效果 百合不是茶 JavaScript滚动属性的获取图片滚动属性获取页面加载
    1,获取样式属性值 top 与顶部的距离 left 与左边的距离 right 与右边的距离 bottom 与下边的距离 zIndex 层叠层次     例子:获取左边的宽度,当css写在body标签中时 <div id="adver" style="position:absolute;top:50px;left:1000p
  • ajax同步异步参数async bijian1013 jqueryAjaxasync
            开发项目开发过程中，需要将ajax的返回值赋到全局变量中，然后在该页面其他地方引用，因为ajax异步的原因一直无法成功，需将async:false，使其变成同步的。         格式： $.ajax({ type: 'POST', ur
  • Webx3框架（1） Bill_chen eclipsespringmaven框架ibatis
    Webx是淘宝开发的一套Web开发框架，Webx3是其第三个升级版本；采用Eclipse的开发环境，现在支持java开发； 采用turbine原型的MVC框架，扩展了Spring容器，利用Maven进行项目的构建管理，灵活的ibatis持久层支持，总的来说，还是一套很不错的Web框架。 Webx3遵循turbine风格，velocity的模板被分为layout/screen/control三部
  • 【MongoDB学习笔记五】MongoDB概述 bit1129 mongodb
    MongoDB是面向文档的NoSQL数据库，尽量业界还对MongoDB存在一些质疑的声音，比如性能尤其是查询性能、数据一致性的支持没有想象的那么好，但是MongoDB用户群确实已经够多。MongoDB的亮点不在于它的性能，而是它处理非结构化数据的能力以及内置对分布式的支持(复制、分片达到的高可用、高可伸缩)，同时它提供的近似于SQL的查询能力，也是在做NoSQL技术选型时，考虑的一个重要因素。Mo
  • spring/hibernate/struts2常见异常总结 白糖_ Hibernate
    Spring ①ClassNotFoundException: org.aspectj.weaver.reflect.ReflectionWorld$ReflectionWorldException 缺少aspectjweaver.jar，该jar包常用于spring aop中   ②java.lang.ClassNotFoundException: org.sprin
  • jquery easyui表单重置(reset)扩展思路 bozch formjquery easyuireset
    在jquery easyui表单中 尚未提供表单重置的功能，这就需要自己对其进行扩展。 扩展的时候要考虑的控件有： combo,combobox,combogrid,combotree,datebox,datetimebox 需要对其添加reset方法，reset方法就是把初始化的值赋值给当前的组件，这就需要在组件的初始化时将值保存下来。 在所有的reset方法添加完毕之后，就需要对fo
  • 编程之美-烙饼排序 bylijinnan 编程之美
    package beautyOfCoding; import java.util.Arrays; /* *《编程之美》的思路是：搜索+剪枝。有点像是写下棋程序：当前情况下，把所有可能的下一步都做一遍；在这每一遍操作里面，计算出如果按这一步走的话，能不能赢（得出最优结果）。 *《编程之美》上代码有很多错误，且每个变量的含义令人费解。因此我按我的理解写了以下代码： */
  • Struts1.X 源码分析之ActionForm赋值原理 chenbowen00 struts
    struts1在处理请求参数之前，首先会根据配置文件action节点的name属性创建对应的ActionForm。如果配置了name属性，却找不到对应的ActionForm类也不会报错，只是不会处理本次请求的请求参数。 如果找到了对应的ActionForm类，则先判断是否已经存在ActionForm的实例，如果不存在则创建实例，并将其存放在对应的作用域中。作用域由配置文件action节点的s
  • [空天防御与经济]在获得充足的外部资源之前,太空投资需有限度 comsci 资源
          这里有一个常识性的问题:       地球的资源,人类的资金是有限的,而太空是无限的.....       就算全人类联合起来,要在太空中修建大型空间站,也不一定能够成功,因为资源和资金,技术有客观的限制.... &
  • ORACLE临时表—ON COMMIT PRESERVE ROWS daizj oracle临时表
    ORACLE临时表 转 临时表：像普通表一样，有结构，但是对数据的管理上不一样，临时表存储事务或会话的中间结果集，临时表中保存的数据只对当前 会话可见，所有会话都看不到其他会话的数据，即使其他会话提交了，也看不到。临时表不存在并发行为，因为他们对于当前会话都是独立的。 创建临时表时，ORACLE只创建了表的结构（在数据字典中定义），并没有初始化内存空间，当某一会话使用临时表时，ORALCE会
  • 基于Nginx XSendfile+SpringMVC进行文件下载 denger 应用服务器Webnginx网络应用lighttpd
        在平常我们实现文件下载通常是通过普通 read-write方式，如下代码所示。 @RequestMapping("/courseware/{id}") public void download(@PathVariable("id") String courseID, HttpServletResp
  • scanf接受char类型的字符 dcj3sjt126com c
    /* 2013年3月11日22:35:54 目的：学习char只接受一个字符 */ # include <stdio.h> int main(void) { int i; char ch; scanf("%d", &i); printf("i = %d\n", i); scanf("%
  • 学编程的价值 dcj3sjt126com 编程
    发一个人会编程, 想想以后可以教儿女, 是多么美好的事啊, 不管儿女将来从事什么样的职业, 教一教, 对他思维的开拓大有帮助   像这位朋友学习:   http://blog.sina.com.cn/s/articlelist_2584320772_0_1.html   VirtualGS教程 (By @林泰前): 几十年的老程序员，资深的
  • 二维数组（矩阵）对角线输出 飞天奔月 二维数组
    今天在BBS里面看到这样的面试题目,   1，二维数组（N*N），沿对角线方向，从右上角打印到左下角如N=4： 4*4二维数组  { 1 2 3 4 } { 5 6 7 8 } { 9 10 11 12 } {13 14 15 16 } 打印顺序  4 3 8 2 7 12 1 6 11 16 5 10 15 9 14 13 要
  • Ehcache（08）——可阻塞的Cache——BlockingCache 234390216 并发ehcacheBlockingCache阻塞
    可阻塞的Cache—BlockingCache          在上一节我们提到了显示使用Ehcache锁的问题，其实我们还可以隐式的来使用Ehcache的锁，那就是通过BlockingCache。BlockingCache是Ehcache的一个封装类，可以让我们对Ehcache进行并发操作。其内部的锁机制是使用的net.
  • mysqldiff对数据库间进行差异比较 jackyrong mysqld
      mysqldiff该工具是官方mysql-utilities工具集的一个脚本，可以用来对比不同数据库之间的表结构，或者同个数据库间的表结构    如果在windows下，直接下载mysql-utilities安装就可以了，然后运行后，会跑到命令行下： 1） 基本用法    mysqldiff --server1=admin:12345
  • spring data jpa 方法中可用的关键字 lawrence.li javaspring
    spring data jpa 支持以方法名进行查询/删除/统计。 查询的关键字为find 删除的关键字为delete/remove (>=1.7.x) 统计的关键字为count (>=1.7.x)   修改需要使用@Modifying注解 @Modifying @Query("update User u set u.firstna
  • Spring的ModelAndView类 nicegege spring
    项目中controller的方法跳转的到ModelAndView类，一直很好奇spring怎么实现的？ /* * Copyright 2002-2010 the original author or authors. * * Licensed under the Apache License, Version 2.0 (the "License"); * yo
  • 搭建 CentOS 6 服务器(13) - rsync、Amanda rensanning centos
    （一）rsync Server端 # yum install rsync # vi /etc/xinetd.d/rsync service rsync { disable = no flags = IPv6 socket_type = stream wait
  • Learn Nodejs 02 toknowme nodejs
    （1）npm是什么 npm is the package manager for node 官方网站：https://www.npmjs.com/ npm上有很多优秀的nodejs包，来解决常见的一些问题，比如用node-mysql，就可以方便通过nodejs链接到mysql，进行数据库的操作 在开发过程往往会需要用到其他的包，使用npm就可以下载这些包来供程序调用 &nb
  • Spring MVC 拦截器 xp9802 spring mvc
    Controller层的拦截器继承于HandlerInterceptorAdapter HandlerInterceptorAdapter.java  1  public   abstract   class  HandlerInterceptorAdapter  implements  HandlerIntercep