年轻即出发
年轻即出发

史上最全面试题（CSS）

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

2.如何居中div？

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

div{

  width:200px;

  margin:0 auto;

}

3.前端页面由哪三层构成，分别是什么？作用是什么？

结构层 Html 表示层 CSS 行为层 js

4.清除浮动的几种方式，各自的优缺点

1.使用空标签清除浮动clear:both（缺点，增加无意义的标签,让人感觉很不爽）
2.使用overflow:auto（使用zoom:1用于兼容IE，缺点：内部宽高超过父级div时，会出现滚动条）
3.是用afert伪元素清除浮动(IE8以上和非IE浏览器才支持，目前：大型网站都有使用，如：腾迅，网易，新浪等等)

5.如何居中一个浮动元素？

1.确定容器的宽高 宽500 高 300 的层
2.设置层的外边距

 .div {

  Width:500px ;

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

  Margin: -150px 0 0 -250px;

  position:relative;相对定位

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

  left:50%;

  top:50%;

}

6.列出display的值，说明他们的作用。

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

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

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

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

7.position的值， relative和absolute定位原点是？

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

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

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

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

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

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

8.CSS3有哪些新特性？

CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器 多背景 rgba

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

position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

他们之间优先级的关系

综上所述，1、可以把它看作是一个类似优先级的机制， "position:absolute" 和 "position:fixed" 优先级最高，有它存在的时候，浮动不起作用，'display' 的值也需要调整； 2、元素的 'float' 特性的值不是 "none" 的时候或者它是根元素的时候，调整 'display' 的值； 3、非根元素，并且非浮动元素，并且非绝对定位的元素，'display' 特性值同设置值。

这从另一个侧面说明了一个问题：浮动或绝对定位的元素，只能是块元素或表格。

10.使用 CSS 预处理器吗？喜欢那个？

SASS、LESS

11.display:inline-block 什么时候会显示间隙？(携程)

移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing

12.display:none和visibility:hidden的区别？

display:none  隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，

就当他从来不存在。

visibility:hidden  隐藏对应的元素，但是在文档布局中仍保留原来的空间。

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

A：(1) link属于HTML标签，而@import是CSS提供的; (2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题; (4) link方式的样式的权重 高于@import的权重.

14.position的absolute与fixed共同点与不同点

A：共同点：

1.改变行内元素的呈现方式，display被置为block；2.让元素脱离普通流，不占据空间；3.默认会覆盖到非定位元素上

B不同点：

absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

15.介绍一下CSS的盒子模型？

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

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

CSS盒子模型

16.列出display的值，说明他们的作用。position的值， relative和absolute分别是相对于谁进行定位的？

1.block 象块类型元素一样显示。
  inline 缺省值。象行内元素类型一样显示。
  inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
  list-item 象块类型元素一样显示，并添加样式列表标记。
  2.*absolute生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。
  *fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。
  *relative生成相对定位的元素，相对于其在普通流中的位置进行定位。
  * static  默认值。没有定位，元素出现在正常的流中
  *（忽略 top, bottom, left, right z-index 声明）。
  * inherit 规定从父元素继承 position 属性的值。

17.CSS3有哪些新特性？

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

18.对BFC规范的理解？

      BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。
    （W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。）

19.解释下 CSS sprites，以及你要如何在页面或网站中使用它。

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限制，一般浏览器都是6个。对于未来而言，就不需要这样做了，因为有了`http2`。

20.介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？ 

（1）有两种， IE 盒子模型、W3C 盒子模型； 
（2）盒模型内容(content)、填充(padding)、边界(margin)、边框(border)； 
（3）区 别： IE的content部分把 border 和 pading计算了进去;

21.CSS选择符有哪些？哪些属性可以继承？ 
* 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 ;

22.如何居中div？如何居中一个浮动元素？如何让绝对定位的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%;

 }

让绝对定位的div居中

 position: absolute;

  width: 1200px;

  background: none;

  margin: 0 auto;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;

23.display有哪些值？说明他们的作用。 
block 象块类型元素一样显示。 
none 缺省值。象行内元素类型一样显示。 
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。 
list-item 象块类型元素一样显示，并添加样式列表标记。 
table 此元素会作为块级表格来显示 
inherit 规定应该从父元素继承 display 属性的值

24.position的值relative和absolute定位原点是？

absolute 
生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。 
fixed （老IE不支持） 
生成绝对定位的元素，相对于浏览器窗口进行定位。 
relative 
生成相对定位的元素，相对于其正常位置进行定位。 
static 
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。 
inherit 
规定从父元素继承 position 属性的值。

25.CSS3有哪些新特性？ 
新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点） 
圆角 （border-radius:8px） 
多列布局 （multi-column layout） 
阴影和反射 （Shadow\Reflect） 
文字特效 （text-shadow、） 
文字渲染 （Text-decoration） 
线性渐变 （gradient） 
旋转（transform） 
增加了旋转,缩放,定位,倾斜,动画，多背景 
transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

26.请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

27.用纯CSS创建一个三角形的原理是什么？

把上、左、右三条边隐藏掉（颜色设为 transparent）

#demo {

  width: 0;

  height: 0;

  border-width: 20px;

  border-style: solid;

  border-color: transparent transparent red transparent;

}

27.一个满屏 品 字布局 如何设计? 
简单的方式： 
上面的div宽100%， 
下面的两个div分别宽50%， 
然后用float或者inline使其不换行即可

28.经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？ 
* png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8. 
* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。 
* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。 
浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}

这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——display:inline;将其转化为行内属性。(这个符号只有ie6会识别)

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

首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。 
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

css

      .bb{

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

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

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

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

      }

IE下,可以使用获取常规属性的方法来获取自定义属性, 
也可以使用getAttribute()获取自定义属性; 
Firefox下,只能使用getAttribute()获取自定义属性。 
解决方法:统一通过getAttribute()获取自定义属性。

IE下,even对象有x,y属性,但是没有pageX,pageY属性; 
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。

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

Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序: 
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {} 
27.li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。

28.为什么要初始化CSS样式。

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

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

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

淘宝的样式初始化代码：

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/1.5tahoma, arial, \5b8b\4f53; }

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

address, cite, dfn, em, var { font-style:normal; }

code, kbd, pre, samp { font-family:couriernew, courier, monospace; }

small{ font-size:12px; }

ul, ol { list-style:none; }

a { text-decoration:none; }

a:hover { text-decoration:underline; }

sup { vertical-align:text-top; }

sub{ vertical-align:text-bottom; }

legend { color:#000; }

fieldset, img { border:0; }

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

table { border-collapse:collapse; border-spacing:0; }

29.absolute的containing block(容器块)计算方式跟正常流有什么不同？ 
无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断： 
1、若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形； 
2、否则,则由这个祖先元素的 padding box 构成。 
如果都找不到，则为 initial containing block。

补充： 
1. static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分） 
2. absolute: 向上找最近的定位为absolute/relative的元素 
3. fixed: 它的containing block一律为根元素(html/body)，根元素也是initial containing block

30.CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？ 
31.position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

32.对BFC规范(块级格式化上下文：block formatting context)的理解？

（W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。） 
一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。 
不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。

css定义的权重

以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：

/*权重为1*/

div{

}

/*权重为10*/

.class1{

}

/*权重为100*/

#id1{

}

/*权重为100+1=101*/

#id1 div{

}

/*权重为10+1=11*/

.class1 div{

}

/*权重为10+10+1=21*/

.class1 .class2 div{

}

如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现 
请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式 
移动端的布局用过媒体查询吗？ 
33.使用 CSS 预处理器吗？喜欢那个？ 
SASS (SASS、LESS没有本质区别，只因为团队前端都是用的SASS)

34.如何修改chrome记住密码后自动填充表单的黄色背景 ？

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {

  background-color: rgb(250, 255, 189); /* #FAFFBD; */

  background-image: none;

  color: rgb(0, 0, 0);

}

35.设置元素浮动后，该元素的display值是多少？（自动变成display:block）

怎么让Chrome支持小于12px 的文字？ 

用图片：如果是内容固定不变情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观

使用12px及12px以上字体大小：为了兼容各大主流浏览器，建议设计美工图时候设置大于或等于12px的字体大小，如果是接单的这个时候就需要给客户讲解小于12px浏览器不兼容等事宜

继续使用小于12px字体大小样式设置：如果不考虑chrome可以不用考虑兼容，同时在设置小于12px对象设置-webkit-text-size-adjust:none，做到最大兼容考虑

使用12px以上字体：为了兼容、为了代码更简单 从新考虑权重下兼容性。

36.font-style属性可以让它赋值为“oblique” oblique是什么意思？(倾斜的字体样式)

37.position:fixed;在android下无效怎么处理？

fixed的元素是相对整个页面固定位置的，你在屏幕上滑动只是在移动这个所谓的viewport，原来的网页还好好的在那，fixed的内容也没有变过位置，

所以说并不是iOS不支持fixed，只是fixed的元素不是相对手机屏幕固定的

38.png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）

如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量，所以不如隔离开。

因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的

同时这种方式不会将cookie传入Web Server，也减少了Web Server对cookie的处理分析环节，提高了webserver的http请求的解析速度。

39.Style标签写在body后与body前有什么区别？

40.什么是CSS 预处理器 / 后处理器？

预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。

后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

41.css多列等高如何实现？

利用padding-bottom|margin-bottom正负值相抵；

设置父容器设置超出隐藏（overflow:hidden），这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度

当它里面的任 一列高度增加了，则父容器的高度被撑到里面最高那列的高度

其他比这列矮的列会用它们的padding-bottom补偿这部分高度差

团队前端都是用的SASS)

（包裹）元素之间有一段

42.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素

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

块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

常见的空元素：

***行内元素***：

a - 锚点，em - 强调，strong - 粗体强调，span - 定义文本内区块，i - 斜体,img - 图片,b - 粗体，label - 表格标签，select - 项目选择，textarea - 多行文本输入框，sub - 下标，

sup - 上标，q - 短引用；

***块元素***：

div - 常用块级，dl - 定义列表，dt，dd，ul- 非排序列表，li，ol-排序表单，p-段落，h1，h2，h3，h4，h5-标题，table-表格，fieldset - form控制组，form - 表单，

***空元素***：

br-换行，hr-水平分割线；

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

（1）web标准规范要求，书写标签必须闭合、标签小写、不乱嵌套，可提高搜索机器人对网页内容的搜索几率；

（2）建议使用外链css和js脚本，从而达到结构与行为、结构与表现的

分离，提高页面的渲染速度，能更快地显示页面的内容；

（3）样式与标签的分离，更合理的语义化标签，使内容能被更多的用户

所访问、内容能被更广泛的设备所访问、更少的代码和组件， 从而降低

维护成本、改版更方便；

（4）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高

网站易用性；遵循w3c制定的web标准，能够使用户浏览者更方便的阅读，使网页开发者之间更好的交流。

44.xhtml和html有什么区别?

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言；

最主要的不同：

XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。

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

用于声明文档使用那种规范（html/Xhtml）一般为 严格 过度 基于框架的html文档

加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug

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

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

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

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

47.CSS引入的方式有哪些? link和@import的区别是?

内联 内嵌 外链 导入

区别 ：同时加载

前者无兼容性，后者CSS2.1以下浏览器不支持

Link 支持使用javascript改变样式，后者不可

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

结构层 Html 表示层 CSS 行为层 js

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

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

50..你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

Ie(Ie内核) 火狐（Gecko） 谷歌（webkit） opear(Presto)

51.写出几种IE6 BUG的解决方法

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

2.像素问题 使用float引起的 使用dislpay:inline -3px 或者

margin-right:-3px

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

active；

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

5.Png 透明 使用js代码改；

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

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

53.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）；

54.标签上title与alt属性的区别是什么?

alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方；

title属性是在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了，有点类似jQuery的hover，你可以自己试试，另外，HTML的绝大多数标签都支持title属性，title属性就是专门做提示信息的；

55.描述css reset的作用和用途？

Reset重置浏览器的css默认属性，浏览器的品种不同，样式不同，然后重置，让他们统一。例如（有最简单的*{margin:0 ; padding:0}）；

56.解释css sprites，如何使用。

Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量；

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

所谓的标准模式是指，浏览器按W3C标准解析执行代码；

怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。

浏览器解析时到底使用标准模式还是怪异模式，与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声明,将使网页进入怪异模式(quirks mode)。

盒子模型 渲染模式的不同

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

58.你如何对网站的文件和资源进行优化?期待的解决方案包括：

文件合并

文件最小化/文件压缩

使用CDN托管

缓存的使用

59.什么是语义化的HTML?

语义化的HTML就是写出的HTML代码，符合内容的结构化（内容语义化），选择合适的标签（代码语义化），能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

1.语义化有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。

2.在没有CSS的时候能够清晰的看出网页的结构，增强可读性。

3.便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。

4.支持多终端设备的浏览器渲染。（总结：直观的认识标签 对于搜索引擎的抓取有好处）

60.清除浮动的几种方式，各自的优缺点

1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，增加无意义的标签）

2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）

3.是用afert伪元素清除浮动(用于非IE浏览器)

61、CSS 中类 (classes) 和 ID 的区别

对于CSS而言，id和class都是选择器，唯一不同的地方在于权重不同。

对于html而言，id和class都是dom元素的属性值。不同的地方在于id属性的值是唯一的，而class属性值可以重复。

id还一个老特性是锚点功能，当浏览器地址栏有一个#xxx，页面会自动滚动到id=xxx的元素上面。

62、请问 “resetting” 和 “normalizing” CSS 之间的区别？你会如何选择，为什么？

Normalize.css 是一个可定制的 CSS 文件，使浏览器呈现的所有元素，更一致和符合现代标准；是在现代浏览器环境下对于CSS reset的替代。 它正是针对只需要统一的元素样式。该项目依赖于研究浏览器默认元素风格之间的差异，精确定位需要重置的样式。

normalizing： 保护有用的浏览器默认样式而不是完全去掉它们 
一般化的样式：为大部分HTML元素提供 修复浏览器自身的bug并保证各浏览器的一致性 
优化CSS可用性：用一些小技巧 
解释代码：用注释和详细的文档来

Normalize.css 保护了有价值的默认值： Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。相比之下，Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。

63、请解释浮动 (Floats) 及其工作原理。

float被归类于CSS 定位属性（Positioning） 描述：规定框是否应该浮动。 定义和用法：float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

64、描述z-index和叠加上下文是如何形成的。

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 
注释：元素可拥有负的 z-index 属性值。 
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

而凡是拥有层叠上下文的元素，将离用户最近，也就是越靠在Z轴前面。默认情况下只有根元素HTML会产生一个层叠上下文，并且元素一旦使用了一些属性也将会产生一个层叠上下文，如我们常用的定位属性。如两个层叠上下文相遇时，总是后一个层叠前一个，除非使用z-index来改变。

65、列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。

1、对父级设置适合CSS高度 
2、clear:both清除浮动，但是需要新增一个空的div 
3、父级div定义 overflow:hidden 
4、父级div也一起浮动 
5、父级div定义 display:table

66、请描述伪元素 (pseudo-elements) 及其用途。

伪元素例如： :first-line / :first-letter / :befort / :after 

67、请解释 inline 和 inline-block 的区别？

display:block 
block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。 
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。 
block元素可以设置margin和padding属性。

display:inline 
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。 
inline元素设置width,height属性无效。 
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

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

68、你用过媒体查询，或针对移动端的布局/CSS 吗？

@media 

69、如果设计中使用了非标准的字体，你该如何去实现？

@font-face 

70、请解释 relative、fixed、absolute 和 static 元素的区别

static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。 

定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在。 

relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式

absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。 
定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不再存在。 
对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。

fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。

注：使用static 定位或无position定位的元素z-index属性是无效的。

71、请罗列出你所知道的 display 属性的全部值

常见的包括： 
none、block、inline、inline-block、list-item、run-in、table、inline-table、table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column、table-cell、table-caption、inherit

72、请解释你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。

盒子模型分为两类：W3C标准盒子模型和IE盒子模型。这两者的关键差别就在于： 
W3C盒子模型——属性高（height）和属性宽（width）这两个值不包含 填充（padding）和边框（border） 
IE盒子模型——属性高（height）和属性宽（width）这两个值包含 填充（padding）和边框（border） 
我们在编写页面代码的时候应该尽量使用标准的W3C盒子模型（需要在页面中声明DOCTYPE类型）。

css中可使用hack或者wrapper。【CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的】

73、请解释 * { box-sizing: border-box; } 的作用, 并且说明使用它有什么好处？

大致就是说，在盒模型中，元素的高和宽包括了边框和内边距，详见： 

74、你熟悉 SVG 样式的书写吗？

SVG为可缩放矢量图形

75、CSS 中字母 ‘C’ 的意思是叠层 (Cascading)。请问在确定样式的过程中优先级是如何决定的 (请举例)？如何有效使用此系统？

样式的优先级 
多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。 
一般情况下，优先级如下： 
（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style 
有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

选择器的优先权： 
1. 内联样式表的权值最高 1000； 
2. ID 选择器的权值为 100 
3. Class 类选择器的权值为 10 
4. HTML 标签选择器的权值为 1

CSS 优先级法则： 
1. 选择器都有一个权值，权值越大越优先； 
2. 当权值相等时，后出现的样式表设置要优于先出现的样式表设置； 
3. 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式； 
4. 继承的CSS 样式不如后来指定的CSS 样式； 
5. 在同一组属性设置中标有“!important”规则的优先级最大；

76、为什么响应式设计 (responsive design) 和自适应设计 (adaptive design) 不同？

自适应是为了解决如何在不同大小的设备上呈现同样的网页（网页的主题和内容不改变） 
响应式的概念覆盖了自适应，而且涵盖的内容更多。 
自适应暴露的一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，但是会感觉在小屏幕上查看内容太过拥挤。响应式正是针对这个问题衍生出的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计、布局和展示的内容可能会有所改变。

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

（1）避免使用全局样式 
既然是全局的定义，那么他会吧所有标签都处理一遍，增加了浏览器解析的时间。有些标签其实没有必要处理。 
允许一个元素去继承它的祖先，或者使用一个class去应用复杂的元素。 
（2）将规则写的越精确越好 
偏向使用class ，id，少使用tag 
另外定义class时使用一些有代表意义的单词，比如在模块化开发的过程中，一般用mod-xxx，很利于维护，代码也很漂亮， 
（3）移除一些无用的限定 
下面的这些限定是多余的 
1.id选择器被class 或者tag选择器限定，也就是不要在id前面添加任何限定符，包括class tag 或者其他的选择符。 
2.class被tag选择器进行限定（如果一个class只被用于一个tag，这也是很好的实践） 
（4）避免使用后代选择器，特别是包含了一些无用的祖先元素 
eg：body ul li a{…} 制定了一个无用的body限定，因为所有的元素都是在body中。 
（5）使用class选择器取代后代选择器，CSS 的层级选择器不要超过3个 。eg：如果你需要两个不同的样式（一个无序列表，一个有序列表） 
不要使用下面的样式 
ul li {color:blue} ol li {color:red} 
应该这样的使用 .unordered-list-item {color: blue;} .ordered-list-item {color: red;} 
如果你一定要用后代选择器，建议你使用子选择器 
（6）display与visibility的差异 
他们用于设置或检索是否显示对象。display隐藏对象不保留物理空间，visibility为隐藏对象保留占据的物理空间。当浏览器渲染被占据的物理空间时，会有所消耗资源。所以不赞成用visibility:hidden; 
（7）border:none;与border:0;的区别 
有些同学肯定没注意过这两个代码的区别，在HTML显示肯定是一样的，但是从基本上来说他们不一样 用border:0虽然现实上和none没什么区别，但是它会保留color、style 这两个属性。所以不赞成用border:0; 
（8）不宜过小的背景图片平铺 
（9）代码缩写

78、使用 CSS 预处理器的优缺点有哪些？

缺点：简单来说CSS预处理器语言较CSS玩法变得更高级了，但同时降低了自己对最终代码的控制力。更致命的是提高了门槛，首先是上手门槛，其次是维护门槛，再来是团队整体水平和规范的门槛。这也造成了初学学习成本的昂贵。另外，预编译CSS步骤的加入，让我们开发工作流中多了一个环节，调试也变得更麻烦了。 

优点：用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

其他问题：

你会如何解决特定浏览器的样式问题？ 
如何为有功能限制的浏览器提供网页？ 
你会使用哪些技术和处理方法？ 
有哪些的隐藏内容的方法 (如果同时还要保证屏幕阅读器可用呢)？ 
你用过栅格系统 (grid system) 吗？如果使用过，你最喜欢哪种？ 
如何优化网页的打印样式？ 
请描述你曾经使用过的 CSS 预处理器的优缺点。 
你在开发或生产环境中使用过哪些 CSS 框架？你觉得应该如何改善他们？ 
请问你有尝试过 CSS Flexbox 或者 Grid 标准规格吗？ 
你有兼容 retina 屏幕的经历吗？如果有，在什么地方使用了何种技术？ 
请问为何要使用 translate() 而非 absolute positioning，或反之的理由？为什么？

78.超链接访问过后hover样式就不出现的问题?

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

79.IE6的双倍边距BUG

例如:

浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline

79.为什么FF下文本无法撑开容器的高度?

标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉he ight设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义：

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

80.为什么web标准中IE无法设置滚动条颜色了?

原来样式设置：

解决办法是将body换成html

81.为什么无法定义1px左右高度的容器?

IE6下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px

6.怎么样才能让层显示在FLASH之上呢?

解决的办法是给FLASH设置透明:

7.怎样使一个层垂直居中于浏览器中?

这里使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二

8、firefox嵌套div标签的居中问题的解决方法

假定有如下情况：



如果要实现b在a中居中放置，一般只需用CSS设置a的text-align属性为center。这样的方法在IE里看起来一切正常；但是在Firefox中b却会是居左的。

解决办法就是设置b的横向margin为auto。例如设置b的CSS样式为：margin: 0 auto;。

 

一些网页设计师面试试题及参考答案

 

1. ASP.NET Web应用程序的模板有哪些?它们之间的区别是什么?

　　【解答】

　　模板有：ASP.NET网站、ASP.NET Web服务、个人网站初学者工具包、空网站四类。

　　ASP.NET网站_即通常说的Web 应用程序，它包括有文件系统站点、本地IIS站点、FTP站点和远程站点四类。通过第11章的图11-1中的“位置”来选择不同的站点类型。

　　ASP.NET Web服务_是一个服务器端提供的服务，该服务器端提供了一些方法，这些方法可以在Internet上被其他客户在任何操作平台上直接调用，而且不需要考虑这些方法是用哪种语言写的。

　　个人网站初学者工具包_是一个已经创建好了的个人网站，其中包括主页、摘要和相册等。可以在此基础上添加自己的内容或者是页面。

　　空网站_创建时仅仅建立一个空白的项目，不包含任何文件或页面。可以向其中添加所需要的各种资源文件。

　　2. 什么是同步网站?上机完成例11-2，体会其含义。

　　【解答】

　　在本地网站和远程网站间通过复制网站工具复制每一个文件的最新版本，以致两个网站拥有所有文件的同一副本，这样的过程就是同步网站。

　　3. HTML的含义是什么?其主体部分由什么标记构成?

　　【解答】

　　HTML即Hyper Text Markup Language超文本标记语言，是构成网页最基本的元素。标记和之间的内容构成了HTML的主体部分，网页中的所有内容，包括文字、图形、链接以及其他页面元素都包含在该标记符内。

　　4. 标记br和p有什么区别?

　　【解答】

　　标记br和p都可以用来换行，但是二者是有区别的。
标记使当前行强行中断而另起一行，但是新行与原来的行保持相同的属性，即新行与原来的行属于同一段落，而

标记在换行的时候另起了一新的段落；
标记无对应的结束标记
，而

标记必须和

配合使用，不能省略

。

　　5. URL指的是什么?有何作用?分为几种?有什么区别?

　　【解答】

　　URL是统一资源定位符，用于定位Web上的文件信息。

　　URL有绝对和相对之分。绝对URL就是指完整的资源地址，具体形式为：协议名称://计算机域名/路径和文件名。一般情况下，在指定外部 Internet资源时应使用绝对URL。相对URL指资源相对于当前页面的路径。使用相对URL时，一般使用点“.”和双点“..”表示当前目录和上一级目录(父目录)。在制作网站的时候，只要站点各资源的相对位置不变，就使用相对URL。

　　6. 试画出代码如下的表格。

　　【解答】

网页设计师面试试题及参考答案 src="http://images3.mx111.com/UploadPic/2007-2/200722713386951.jpg">

第6题 得到的表格

　　7 说明在网页设计中层的作用。

　　【解答】

　　层，也就是DIV标记，是一个区块级的HTML标记，在该标记之间可以添加段落、表格、图片等内容，使同一个DIV标记中的元素具有相同的样式，并可在页面显示时同时出现、移动以及隐藏。

　　它的主要作用有以下两点：(1) 将一些标记元素组织起来，应用DIV的属性为这些标记元素定义统一的样式;(2) 利用其z-index属性，实现页面内各元素的重叠显示效果;(3) 使页面上显示更多的特效功能。

　　8. 母版页的作用是什么?

　　【解答】

　　母版页(Master Page)的扩展名为“.master”，它相当于网页的模板。在其他网页中，只要引用了母版页，母版页的页面就可以自动显示出来，设计者可以修改引用的母版页中预留的部分，其它部分保持不变，这样就可以使多个页面的风格保持一致，给网页设计带来了很大的方便。

　　9. CSS指的是什么?在网页制作中为什么要使用CSS技术?

　　【解答】

　 　CSS(Cascading Style Sheets)也叫层叠样式表，它是用来控制网页中一个或多个元素的外观。在网页制作中，使用样式表可以减少很多具有相同外观元素的重复设置工作，从而给网页的设计和维护带来了很大的方便;具体应用是：改变样式表中元素显示样式的定义，则在使用该样式表的所有网页中相应元素的显示样式都会自动发生改变。

　　10. 网页制作中有哪几种样式设置方法?各有何特点?

　　【解答】

　　网页制作中有：内联式样式设置、直接嵌入式样式设置和外部链接式样式设置三种方式。

　　1) 内联式样式设置：

　　设置方法：直接在要设置样式的各标记元素中修改style属性;

　　优点：直观、方便;

　　缺点：不易于维护和修改;

　　适用于：网页中个别需要修改的元素的样式定义;

　　2) 直接嵌入式样式设置：

　　设置方法：在HTML文档的之间添加定义， 部分是所有需要设置样式的元素的属性定义。

　　优点：对当前页面内的所有元素的样式修改、维护比较方便;

　　缺点：对于网站建设，要采用相同的样式设置则比较麻烦;

　　适用于：单独网页的样式定义;

　　3) 外部链接式样式设置：

　　设置方法：把所有样式定义放在一个独立的文件中，凡是需要使用该文件中规定样式的网页，只要在其与之间添加一个对该样式文件的链接：即可;

　　适用于：需要统一显示样式的网站建设。

　　11. 用户自定义的类和ID在定义和使用时有什么区别?

　　【解答】

　　定义时，类以英文形式的句点“.”为起始标志，ID以“#”为起始标志;使用时，类可以在一个页面中被多个不同的元素引用，而ID在一个页面中只能被引用一次。

　　12. 样式定义如下，试说明显示结果，并做相应解释。

样式表文件StyleExercise.css：

body
　　{
　　background-color:#ccccff;
　　}
　　p
　　{
　　color:Blue;
　　font-size:30px;
　　}
　　h1
　　{
　　color:Yellow;
　　font-size:medium;
　　}
　　p a
　　{
　　color :Orange;
　　font-size:40px;
　　}

HTML文件：


</span><span style="color:#333333;">样式作业练习</span><span style="color:#333333;">




标题1


标题2


文本


这是一个链接演示。


另一个链接

 

　　1) 第一次使用的P、H1~H6标记均以红色的“40px”大小的字体显示;

　　2) 超链接未选中时，以蓝色字体显示;当鼠标移动到上方时，以原字体大小的1.5倍的橙色字体显示;当超链接被点击之后，以暗红色字体显示;

　　3) 所有P标记的内容都以列表的形式显示;

　　4) 所插入图片的左右两侧都允许有文字出现;

　　5) 使用背景图片，并使其在整个页面的两个方向平铺。

　　【解答】

　　该HTML页面与样式表文件建立了链接，显示时以“#ccccff”色为背景色;

　　“标题1”：三种样式定义方式都使用了，最终按照就近原则，以内联式样式定义的颜色“brown”、外部链接的样式表文件定义的字体大小“medium”显示;

 

1 IE/Win的 HasLayout
2 浮动 float 的定义。float后元素的display属性会发生改变吗？
3 CSS 3.0、CSS2.1 中被现代浏览器应用了的规则有哪些？
4 父元素定义了一个初始高度，如果里面的img 元素的高度超过了父元素的高度，如何自适应？
5 IE的3px bug 问题
6 清除浮动有几种方法？你知道几种说几种？
7 CSS hack 了解吗？说说。。。
8 IE 5.5及IE5的表现与IE6有什么不同
补充：
9 用过 Opera 吗？谈谈Opera 的表现。。

  • 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

display有哪些值？说明他们的作用。

position的值relative和absolute定位原点是？

请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

  • 经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？
  • absolute的containing block计算方式跟正常流有什么不同？
  • CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？
  • position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？
  • CSS权重优先级是如何计算的？
  • 请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式
  • 移动端的布局用过媒体查询吗？
  • 设置元素浮动后，该元素的display值是多少？（自动变成display:block）
  • overflow: scroll时不能平滑滚动的问题怎么处理？
  • 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。
  • png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
  • style标签写在body后与body前有什么区别？
  • 如何理解CSS的盒子模型？

每个HTML元素都是长方形盒子。

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

（2）标准W3C盒模型包含：内容(content)、填充(padding)、边界(margin)、边框(border)。

  • link和@import的区别？

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

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

（3）import只在IE 5以上才能识别，而link是XHTML标签，无兼容问题。

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

（5）使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

如何居中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）png24为的图片在IE6浏览器上出现背景，解决方案是做成PNG8。

（2）浏览器默认的margin和padding不同，解决方案是加一个全局的*{margin:0;padding:0;}来统一。

（3）IE6双边距bug:块属性标签float后，又有横行的margin情况下，在IE 6显示margin比设置的大。

（4）浮动ie产生的双边距问题：块级元素就加display：inline；行内元素转块级元素display：inline后面再加display：table。

          .bb{

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

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

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

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

          }

常用Hack的技巧：

（1）IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性；

（2）Firefox下，只能使用getAttribute()获取自定义属性。解决方法：统一通过getAttribute()获取自定义属性。

（3）IE下，even对象有x,y属性，但是没有pageX,pageY属性；

（4）Firefox下，event对象有pageX,pageY属性，但是没有x,y属性。解决方法是条件注释，缺点是在IE浏览器下可能会增加额外的HTTP请求数。

（5）Chrome 中文界面下默认会将小于12px的文本强制按照12px显示，可通过加入 CSS属性-webkit-text-size-adjust: none;来解决。

（6）超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不再具有hover和active了，解决方法是改变CSS属性的排列顺序：

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

列出display的值，说明它们的作用。position的值里，relative和absolute定位原点是？

display的值：

block 像块类型元素一样显示。

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

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

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

relative和absolute定位原点：

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

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

CSS是怎样定义权重规则的？

以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：

/*权重为1*/

div{

}

/*权重为10*/

.class1{

}

/*权重为100*/

#id1{

}

/*权重为100+1=101*/

#id1 div{

}

/*权重为10+1=11*/

.class1 div{

}

/*权重为10+10+1=21*/

.class1 .class2 div{

}

如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现。

如何理解表现与内容相分离？

表现与结构相分离简单的说就是HTML中只有标签元素 表现完全是由CSS文件控制的。

如何定义高度为1px的容器？

div{

heigh：1px;

width:10px;

background:#000;

overflow:hidden

}

IE 6下这个问题是默认行高造成的，overflow:hidden | zoom:0.08 | line- height:1px这样也可以解决。

如何解决IE 6的3px问题？

_zoom:1;  margin-left: value; _margin-left: value-3px;

Firefox下文本无法撑开容器的高度，如何解决？

清除浮动 .clear{ clear:both; height:0px; overflow:hidden;}

怎么样才能让层显示在Flash之上呢?

解决的办法是给Flash设置透明属性

或者

cursor:hand在FF下不显示小手，如何解决？

cursor; pointer;

在IE中内容会自适应高度，而FF不会自适应高度，怎么办？

在要自适应高度的层中加一个层，样式为

.clear{clear:both;font-size:0px;height:1px}，

这样解决有一个小小的问题，高度会多一个像素。还有一种解决方法，给当前层加上一个伪类。

#test:after {

    content: ".";

    display: block;

    height: 0;

    clear: both;

    visibility: hidden;

}

如何设计一个满屏“品”字布局？

简单的方式：

  上面的div宽100%，

  下面的两个div分别宽50%，

  用float或inline使其不换行。

怎么让Chrome支持小于12px 的文字？

body{-webkit-text-size-adjust:none}

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

最准确的网页设计思路是把网页分成三个层次，即：结构层、表示层、行为层。

网页的结构层（structural layer）由HTML或XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”

网页的表示层（presentation layer）由CSS负责创建。 CSS对“如何显示有关内容”的问题做出了回答。

网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是JavaScript语言和DOM主宰的领域。

::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

伪元素由双冒号和伪元素名称组成。双冒号是在css3规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。

对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。

提醒，如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全。

现在HTML5中css3可以写出一个旋转的立方体，请写出要用到的CSS属性。

-webkit-transform-style: preserve-3d;

-webkit-transform: rotateY(30deg) rotateX(10deg);

-webkit-animation:  rot 4s linear infinite;

介绍一下 Sass 和 Less 是什么？它们有何区别？

Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，语法跟css一样(但多了些功能)，比css好写，而且更容易阅读。Sass语法类似与Haml，属于缩排语法（makeup），用意就是为了快速写Html和Css。

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

区别：

(1))Sass是基于Ruby的，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出Css到浏览器，也可以在开发环节使用Less，然后编译成Css文件，直接放到项目中，也有Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。

(2)变量符不一样，less是@，而Scss是$，而且变量的作用域也不一样，后面会讲到。

(3)输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。

(4)Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。

21.解释下浮动和它的工作原理。

关于浮动我们需要了解，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。要想使元素浮动，必须为元素设置一个宽度（width）。虽然浮动元素不是文档流之中，但是它浮动后所处的位置依然是在浮动之前的水平方向上。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样，下面的元素填补原来的位置。有些元素会在浮动元素的下方，但是这些元素的内容并不一定会被浮动的元素所遮盖，对内联元素进行定位时，这些元素会考虑浮动元素的边界，会围绕着浮动元素放置。也可以把浮动元素想象成是被块元素忽略的元素，而内联元素会关注浮动元素的。  

22.列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。

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

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

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

4.浮动外部元素

此三种方法各有利弊，使用时应择优选择，比较之下第二种方法更为可取。

23.解释下CSS sprites，以及你要如何在页面或网站中使用它。

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

24.你最喜欢的图片替换方法是什么，你如何选择使用。

1

图片丢这里>Hello World

把span背景设成文字内容，这样又可以保证seo，也有图片的效果在上面。一般都是：alt，title，onerror。

25.讨论CSS hacks，条件引用或者其他。

各个浏览器都认识，这里给firefox用；

\9所有的ie浏览器可识别；

background-color:yellow\0;\0是留给ie8的+background-color:pink;+ie7定了；

__专门留给神奇的ie6；:root#test{background-color:purple\9;}:root是给ie9的，

@media all and(min-width:0px){#test{background-color:black\0;}}这个是老是跟ie抢着认\0的神奇的opera，必须加个\0,不然firefox，chrome，safari也都认识。

@media screen and(-webkit-min-device-pixel-ratio:0){#test{}}最后这个是浏览器新贵chrome和safari的。

校招：

怎样写出更好的CSS，如层级不宜过深，如何时用ID和何时用class，如怎么拆分组织CSS代码等

盒模型

非常常用的CSS3知识，比如CSS3动画，比如弹性布局

css盒子模型概念

css弹性布局概念

 

 

如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

display有哪些值？说明他们的作用。

position的值relative和absolute定位原点是？

请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

常见兼容性问题？

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

CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？

position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

CSS权重优先级是如何计算的？

请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式

移动端的布局用过媒体查询吗？

设置元素浮动后，该元素的display值是多少？（自动变成display:block）

让页面里的字体变清晰，变细用CSS怎么做？（-webkit-font-smoothing: antialiased;）

png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

style标签写在body后与body前有什么区别？

20、CSS居中（包括水平居中和垂直居中）

答:

水平居中设置:

1.行内元素

设置 text-align:center；

2.Flex布局

设置display:flex;justify-content:center; (灵活运用,支持Chroime，Firefox，IE9+)

3block元素可使用margin：auto；

.container {

text-align: center;

}

.item {

width: 1000px;

margin: auto;

}

4绝对定位元素可结合left和margin实现，但必须知道宽度

.container {

    position: relative;

    width: 500px;

}

.item {

    width: 300px;

    height: 100px;

    position: absolute;

    left: 50%;

    margin: -150px;

}

 

垂直居中设置：

1.父元素高度确定的单行文本（内联元素）

设置 height = line-height；

2.父元素高度确定的多行文本（内联元素）

a:插入 table （插入方法和水平居中一样），然后设置 vertical-align:middle；

b:先设置 display:table-cell 再设置 vertical-align:middle；

c: 绝对定位元素，可结合left和margin实现，但是必须知道尺寸。

  • 优点：兼容性好
  • 缺点：需要提前知道尺寸

.container {

    position: relative;

    height: 200px;

}

.item {

    width: 80px;

    height: 40px;

    position: absolute;

    left: 50%;

    top: 50%;

    margin-top: -20px;

    margin-left: -40px;

}

 

d: 绝对定位可结合transform实现居中。

  • 优点：不需要提前知道尺寸
  • 缺点：兼容性不好

.container {

    position: relative;

    height: 200px;

}

.item {

    width: 80px;

    height: 40px;

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    background: blue;

}

e: 绝对定位结合margin: auto，不需要提前知道尺寸，兼容性好。

.container {

    position: relative;

    height: 300px;

}

.item {

    width: 100px;

    height: 50px;

    position: absolute;

    left: 0;

    top: 0;

    right: 0;

    bottom: 0;

    margin: auto;

}

 

块级元素居中方案

水平居中设置：

1.定宽块状元素

设置 左右 margin 值为 auto；

2.不定宽块状元素

a:在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 auto；

b:给该元素设置 displa:inine 方法；

c:父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%；

垂直居中设置：

使用position:absolute（fixed） ,设置left、top、margin-left、margin-top的属性;

利用position:fixed（absolute）属性，margin:auto这个必须不要忘记了;

利用display:table-cell属性使内容垂直居中;

使用css3的新属性transform:translate(x,y)属性;

使用:before元素;

  • 21、CSS3有哪些新特性？

答:

CSS3实现圆角（border-radius: 8px），阴影（box-shadow: 10px），

对文字加特效（text-shadow），线性渐变（gradient），变换（transform）

?

1

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

还增加了更多的CSS选择器，多背景，rgba等

 

 

 

 

display: none; 与 visibility: hidden; 的区别

联系：它们都能让元素不可见

区别：

display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见

display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility:hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式

修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘

读屏器不会读取display: none;元素内容；会读取visibility: hidden元素内容

css hack原理及常用hack

原理：利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式。

常见的hack有

属性hack

选择器hack

IE条件注释

link 与 @import 的区别

link 是HTML方式， @import 是CSS方式

link最大限度支持并行下载，@import 过多嵌套导致串行下载，出现FOUC

link 可以通过 rel="alternate stylesheet" 指定候选样式

浏览器对 link 支持早于@import ，可以使用 @import 对老浏览器隐藏样式

@import 必须在样式规则之前，可以在css文件中引用其他文件

总体来说：link优于@import

CSS有哪些继承属性

关于文字排版的属性如：

font

word-break

letter-spacing

text-align

text-rendering

word-spacing

white-space

text-indent

text-transform

text-shadow

line-height

color

visibility

cursor

display,float,position的关系

如果 display 为none，那么position和float都不起作用，这种情况下元素不产生框

否则，如果position值为absolute或者fixed，框就是绝对定位的，float的计算值为none，display根据下面的表格进行调整

否则，如果float不是none，框是浮动的，display根据下表进行调整

否则，如果元素是根元素，display根据下表进行调整

其他情况下display的值为指定值 总结起来：绝对定位、浮动、根元素都需要调整 display

外边距折叠(collapsing margins)

毗邻的两个或多个 margin 会合并成一个margin，叫做外边距折叠。规则如下：

两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠

浮动元素或inline-block元素或绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠

创建了块级格式化上下文的元素，不会和它的子元素发生margin折叠

元素自身的margin-bottom和margin-top相邻时也会折

如何居中div？如何居中一个浮动元素？如何让绝对定位的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%;

 }

让绝对定位的div居中

  position: absolute;

  width: 1200px;

  background: none;

  margin: 0 auto;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;

display有哪些值？说明他们的作用

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

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

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

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

table 此元素会作为块级表格来显示

inherit 规定应该从父元素继承 display 属性的值

position的值relative和absolute定位原点是？

absolute

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

fixed （老IE不支持）

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

relative

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

static

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right - z-index 声明）。

inherit

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

CSS3有哪些新特性？

新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）

圆角 （border-radius:8px）

多列布局 （multi-column layout）

阴影和反射 （Shadow\Reflect）

文字特效 （text-shadow、）

文字渲染 （Text-decoration）

线性渐变 （gradient）

旋转 （transform）

增加了旋转,缩放,定位,倾斜,动画，多背景

  • transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

一个满屏品字布局 如何设计?

简单的方式：

上面的div宽100%，

下面的两个div分别宽50%，

然后用float或者inline使其不换行即可

经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？

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

浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一

IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;

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

解决方法:统一通过getAttribute()获取自定义属性

IE下,even对象有x,y属性,但是没有pageX,pageY属性

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

css定义的权重

// 以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下/// 例子是演示各种定义的权重值：

 

/*权重为1*/

div{

}

/*权重为10*/

.class1{

}

/*权重为100*/

#id1{

}

/*权重为100+1=101*/

#id1 div{

}

/*权重为10+1=11*/

.class1 div{

}

/*权重为10+10+1=21*/

.class1 .class2 div{

}

 

// 如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现

display:inline-block 什么时候会显示间隙？(携程)

移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing

谈谈浮动和清除浮动

浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上

介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

盒子模型构成：内容(content)、内填充(padding)、 边框(border)、外边距(margin)

IE8及其以下版本浏览器，未声明 DOCTYPE，内容宽高会包含内填充和边框，称为怪异盒模型(IE盒模型)

标准(W3C)盒模型：元素宽度 = width + padding + border + margin

怪异(IE)盒模型：元素宽度 = width + margin

标准浏览器通过设置 css3 的 box-sizing: border-box 属性，触发“怪异模式”解析计算宽高

box-sizing 常用的属性有哪些？分别有什么作用？

box-sizing: content-box; // 默认的标准(W3C)盒模型元素效果

box-sizing: border-box; // 触发怪异(IE)盒模型元素的效果

box-sizing: inherit; // 继承父元素 box-sizing 属性的值

CSS选择器有哪些？

id选择器 #id

类选择器 .class

标签选择器 div, h1, p

相邻选择器 h1 + p

子选择器 ul > li

后代选择器 li a

通配符选择器 *

属性选择器 a[rel='external']

伪类选择器 a:hover, li:nth-child

CSS哪些属性可以继承？哪些属性不可以继承？

可以继承的样式：font-size、font-family、color、list-style、cursor

不可继承的样式：width、height、border、padding、margin、background

CSS如何计算选择器优先？

相同权重，定义最近者为准：行内样式 > 内部样式 > 外部样式

含外部载入样式时，后载入样式覆盖其前面的载入的样式和内部样式

选择器优先级: 行内样式[1000] > id[100] > class[10] > Tag[1]

在同一组属性设置中，!important 优先级最高，高于行内样式

CSS3新增伪类有哪些？

:root 选择文档的根元素，等同于 html 元素

:empty 选择没有子元素的元素

:target 选取当前活动的目标元素

:not(selector) 选择除 selector 元素意外的元素

:enabled 选择可用的表单元素

:disabled 选择禁用的表单元素

:checked 选择被选中的表单元素

:after 在元素内部最前添加内容

:before 在元素内部最后添加内容

:nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n

:nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数

:nth-child(odd)

:nth-child(even)

:nth-child(3n+1)

:first-child

:last-child

:only-child

:nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n

:nth-last-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数

:nth-of-type(odd)

:nth-of-type(even)

:nth-of-type(3n+1)

:first-of-type

:last-of-type

:only-of-type

::selection 选择被用户选取的元素部分

:first-line 选择元素中的第一行

:first-letter 选择元素中的第一个字符

请列举几种隐藏元素的方法

visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在

opacity: 0; CSS3属性，设置0可以使一个元素完全透明

position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外

display: none; 元素会变得不可见，并且不会再占用文档的空间。

transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留

你可能感兴趣的:(面试题)

  • python八股文面试题分享及解析(1) Shawn________ python
    #1.'''a=1b=2不用中间变量交换a和b'''#1.a=1b=2a,b=b,aprint(a)print(b)结果：21#2.ll=[]foriinrange(3):ll.append({'num':i})print(11)结果:#[{'num':0},{'num':1},{'num':2}]#3.kk=[]a={'num':0}foriinrange(3):#0,12#可变类型，不仅仅改变
  • 每日算法&面试题，大厂特训二十八天——第二十天（树） 肥学 ⚡算法题⚡面试题每日精进java算法数据结构
    目录标题导读算法特训二十八天面试题点击直接资料领取导读肥友们为了更好的去帮助新同学适应算法和面试题，最近我们开始进行专项突击一步一步来。上一期我们完成了动态规划二十一天现在我们进行下一项对各类算法进行二十八天的一个小总结。还在等什么快来一起肥学进行二十八天挑战吧！！特别介绍小白练手专栏，适合刚入手的新人欢迎订阅编程小白进阶python有趣练手项目里面包括了像《机器人尬聊》《恶搞程序》这样的有趣文章
  • Java企业面试题3 马龙强_ java
    1.break和continue的作用(智*图)break：用于完全退出一个循环（如for,while）或一个switch语句。当在循环体内遇到break语句时，程序会立即跳出当前循环体，继续执行循环之后的代码。continue：用于跳过当前循环体中剩余的部分，并开始下一次循环。如果是在for循环中使用continue，则会直接进行条件判断以决定是否执行下一轮循环。2.if分支语句和switch分
  • Java面试题精选：消息队列(二) 芒果不是芒 Java面试题精选javakafka
    一、Kafka的特性1.消息持久化：消息存储在磁盘，所以消息不会丢失2.高吞吐量：可以轻松实现单机百万级别的并发3.扩展性：扩展性强，还是动态扩展4.多客户端支持：支持多种语言（Java、C、C++、GO、）5.KafkaStreams（一个天生的流处理）:在双十一或者销售大屏就会用到这种流处理。使用KafkaStreams可以快速的把销售额统计出来6.安全机制：Kafka进行生产或者消费的时候会
  • Day_11 ROC_bird.. 算法
    面试题16.15.珠玑妙算-力扣（LeetCode）/***Note:Thereturnedarraymustbemalloced,assumecallercallsfree().*///下标和对应位置的值都一样，answer[0]+1,对应位置的值猜对了，但是下标不对，answer[1]+1int*masterMind(char*solution,char*guess,int*returnSiz
  • 【从问题中去学习k8s】k8s中的常见面试题（夯实理论基础）（二十八） 向往风的男子 k8s学习kubernetes容器
    本站以分享各种运维经验和运维所需要的技能为主《python零基础入门》：python零基础入门学习《python运维脚本》：python运维脚本实践《shell》：shell学习《terraform》持续更新中：terraform_Aws学习零基础入门到最佳实战《k8》从问题中去学习k8s《docker学习》暂未更新《ceph学习》ceph日常问题解决分享《日志收集》ELK+各种中间件《运维日常》
  • 【Kubernetes】常见面试题汇总（十一） summer.335 Kuberneteskubernetes容器云原生
    目录33.简述Kubernetes外部如何访问集群内的服务？34.简述Kubernetesingress？35.简述Kubernetes镜像的下载策略？33.简述Kubernetes外部如何访问集群内的服务？（1）对于Kubernetes，集群外的客户端默认情况，无法通过Pod的IP地址或者Service的虚拟IP地址：虚拟端口号进行访问。（2）通常可以通过以下方式进行访问Kubernetes集群
  • 华雁智科前端面试题 因为奋斗超太帅啦 前端笔试面试问题整理javascript开发语言ecmascript
    1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
  • 音视频知识图谱 2022.04 关键帧Keyframe
    前些时间，我在知识星球上创建了一个音视频技术社群：关键帧的音视频开发圈，在这里群友们会一起做一些打卡任务。比如：周期性地整理音视频相关的面试题，汇集一份音视频面试题集锦，你可以看看《音视频面试题集锦2022.04》。再比如：循序渐进地归纳总结音视频技术知识，绘制一幅音视频知识图谱。下面是2022.04月知识图谱新增的内容节选：1）图谱路径：**采集/音频采集/声音三要素/响度******主观计量响
  • 小米嵌入式面试题目RTOS面试题目 嵌入式面试题目 好家伙VCC 面试杂谈杂谈面试职场和发展
    第一章-非RTOSbootloader工作流程MCU启动流程通信协议，SPIIICMCU怎么选型，STM32F1和F4有什么区别外部RAM和内部RAM区别，怎么分配外部总线和内部总线区别MCU上的固件，数据是怎么分配的MCU启动流程IAP是怎么升级的，突然断电怎么办挑了麦轮项目（因为大疆RM也是麦轮，面试官看样子比较感兴趣）为什么用的CAN总线你说一下spi和i2c和UART的各自的工作方式优缺点
  • 【Java】面试题31：栈的压入，弹出序列 小小核桃 剑指offerjava版
    ~~题目：~~输入两个整数序列，第一个序列表示栈的压入顺序，请判断第二个序列是否为该栈的弹出顺序。假设压入栈的所有数字均不相等。例如，序列{1，2，3，4，5}是某栈的压栈序列，序列{4，5，3，2，1}是该压栈序列对应的一个弹出序列，但{4，3，5，1，2}就不可能是该栈序列的弹出序列。思路：首先借助一个辅助栈，把输入的第一个序列中的数字依次压入该辅助栈，并按照第二个序列的顺序依次从该栈中弹出数
  • 数据库常见笔试面试题及其解析 yxsr_zxx 数据库数据库SqlServerOracle笔试面试
    数据库基础(面试常见题)一、数据库基础1.数据抽象：物理抽象、概念抽象、视图级抽象,内模式、模式、外模式2.SQL语言包括数据定义、数据操纵(DataManipulation),数据控制(DataControl)数据定义：CreateTable,AlterTable,DropTable,Craete/DropIndex等数据操纵：Select,insert,update,delete,数据控制：g
  • 【华为OD机试真题 python】输出指定字母在字符串的中的索引【2022 Q4 | 100分】 无痕de泪 华为OD机试真题python输出指定字母在字符串的中的索引字符串华为odpython
    前言《华为OD笔试真题python》专栏含华为OD机试真题、华为面试题、牛客网华为专栏真题。如果您正在准备华为的面试，或者华为od的机会，有任何想了解的可以私信我进行交流。我会尽可能的给一些建议，和帮您解答！PS：文中答案仅供参考，不能照抄哦■题目描述【输出指定字母在字符串的中的索引】给定一个字符串，把字符串按照大写在前小写在后排序，输出排好后的第K个字母在原来字符串的索引。相同字母输出第一个出现
  • 大数据真实面试题---SQL The博宇 大数据面试题——SQL大数据mysqlsql数据库bigdata
    视频号数据分析组外包招聘笔试题时间限时45分钟完成。题目根据3张表表结构，写出具体求解的SQL代码（搞笑品类定义：视频分类或者视频创建者分类为“搞笑”）1、表创建语句：createtablet_user_video_action_d(dsint,user_idstring,video_idstring,action_typeint,`timestamp`bigint)rowformatdelimi
  • 面试常见题之Spring Cloud 拾光编程 java面试面试springcloud职场和发展
    在Java软件工程师的面试中，关于SpringCloud的题目旨在考察候选人对微服务架构的理解、SpringCloud各组件的掌握程度、以及如何在实际项目中应用这些技术来构建可扩展、可靠和高效的服务。本文将概括性地列出20个关于SpringCloud的面试题目，并为每个题目提供一个简要的回答框架或关键点，以便你根据需要进行扩展。1.SpringCloud是什么？它解决了什么问题？回答框架：Spri
  • 面试题24. 反转链表 阿星啊阿星
    反转链表题目描述定义一个函数，输入一个链表的头节点，反转该链表并输出反转后链表的头节点示例：输入:1->2->3->4->5->NULL输出:5->4->3->2->1->NULL提示：0<=节点个数<=5000转载来源：力扣（LeetCode）题目分析1→2→3→null初始化时h为1，now为2，h的next设置成null，有：null←1（h） 2（now）→3现在将保存一下now的next
  • 互联网 Java 工程师面试题（Java 面试题四） 苹果酱0567 面试题汇总与解析java中间件开发语言springboot后端
    下面列出这份Java面试问题列表包含的主题多线程，并发及线程基础数据类型转换的基本原则垃圾回收（GC）Java集合框架数组字符串GOF设计模式SOLID抽象类与接口Java基础，如equals和hashcode泛型与枚举JavaIO与NIO常用网络协议Java中的数据结构和算法正则表达式JVM底层Java最佳实JDBCDate,Time与CalendarJava处理XMLJUnit编程现在是时候给
  • 面试题篇: 跨域问题如何处理(Java和Nginx处理方式) guicai_guojia javanginx开发语言
    1.服务器端解决方案最常见的解决方案是在服务器端配置CORS头。服务器需要在响应中添加适当的Access-Control-Allow-头来允许跨域请求。1.1NGINX配置在NGINX配置中，你可以通过add_header指令来设置CORS头。配置示例：server{  listen80;  server_nameapi.example.com;  location/{    proxy_pass
  • android进阶之光！Android面试必备的集合源码详解，系列篇 程序员Sunbu 程序员Android
    前言面试：如果不准备充分的面试，完全是浪费时间，更是对自己的不负责。文末会给大家分享下我整理的Android面试专题及答案其中大部分都是大企业面试常问的面试题，可以对照这查漏补缺，当然了，这里所列的肯定不可能覆盖全部方式，不过对大家找工作肯定是有帮助！本月飞机到达上海，到今天第6天了，四家大公司华为，小米，映客，抖音，还有二家中小型公司。有几家已经面了几轮，下周还要面，挂了几家，不过目前已经选择了
  • 【面试】嵌入式面试常见题目收藏(超总结）_嵌入式面试题目及答案 2401_83641314 程序员嵌入式
    16.死锁的4个必要条件答：1、互斥：某种资源一次只允许一个进程访问，即该资源一旦分配给某个进程，其他进程就不能再访问，直到该进程访问结束。2、占有且等待：一个进程本身占有资源（一种或多种），同时还有资源未得到满足，正在等待其他进程释放该资源。3、不可抢占：别人已经占有了某项资源，你不能因为自己也需要该资源，就去把别人的资源抢过来。4、循环等待：存在一个进程链，使得每个进程都占有下一个进程所需的至
  • Ihandy Unity开发 面试题 2024 z2014z 面试职场和发展
    1.当i>10时，调用test是否会出现死锁？原因是什么？voidtest(inti){lock(this){if(i>10){i--;test(i);}}}2.有一个表有n条记录，每条记录有两个字段，weight和id，写出程序保证id出现的概率与权重相同3.从1到n，一共有多少个14.二叉树的层次遍历5.给定两个链表，将对应数值相加6.检查两棵树是否相同
  • 多线程相关面试题（2024大厂高频面试题系列） 小橘子831 后端面试java面试后端
    1、聊一下并行和并发有什么区别？并发是同一时间应对多件事情的能力，多个线程轮流使用一个或多个CPU并行是同一时间动手做多件事情的能力，4核CPU同时执行4个线程2、说一下线程和进程的区别？进程是正在运行程序的实例，进程中包含了线程，每个线程执行不同的任务不同的进程使用不同的内存空间，在当前进程下的所有线程可以共享内存空间3、如果在java中创建线程有哪些方式？在java中一共有四种常见的创建方式，
  • Java多线程相关面试题整理 长河落日袁同学 不积跬步无以至千里java笔记多线程锁面试
    目录1.什么是线程和进程？线程与进程有什么区别？那什么是上下文切换？进程间怎么通信？什么是用户线程和守护线程？2.并行和并发的区别？3.创建线程的几种方式？Runnable接口和Callable接口的区别？run()方法和start()有什么区别？4.Java线程状态和方法？描述线程的生命周期？一个线程两次调用start()方法会出现什么情况？sleep()和wait()方法的区别是什么？5.并发
  • Java面试题--JVM大厂篇之深入解析JVM中的Serial GC：工作原理与代际区别 青云交 Java大厂面试题Java虚拟机（JVM）专栏Java技术栈SerialGC工作原理年轻代垃圾回收MinorGC老年代垃圾回收MajorGCFullGC年轻代和老年代的区别SerialGC垃圾收集器单线程垃圾收集器
    目录引言：正文：一、SerialGC工作原理年轻代垃圾回收（MinorGC）：老年代垃圾回收（MajorGC或FullGC）：二、年轻代和老年代的区别年轻代（YoungGeneration）：老年代（OldGeneration）：结束语：引言：Java虚拟机（JVM）作为Java程序的运行环境，其性能和稳定性在很大程度上依赖于垃圾收集器（GC）的效率。SerialGC是JVM中最古老也是最简单的一
  • golang面试题 001 Jay_hj11 golang面试Golanggolang后端数据结构开发语言面试
    001gochannelclose后读的问题golangchannel关闭后，其中剩余的数据，是可以继续读取的。请看下面的测试例子。创建一个带有缓冲的channel，向channel中发送数据，然后关闭channel，最后，从channel中读取数据，输出结果。packagemainimport"fmt"//gochannelclose后读的问题funcmain(){ch:=make(chanst
  • 前端基础面试题·第三篇——JavaScript（其二） DT—— 前端面试javascript面试
    1.深浅拷贝1.浅拷贝浅拷贝会创建一个新的对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝就是改引用类型的地址。//常见的浅拷贝1.Object.assign({},obj)//对象浅拷贝assign⽅法可以⽤于处理数组，不过会把数组视为对象，⽐如这⾥会把⽬标数组视为是属性为0、1、2的对象，所以源数组的0、1属性的值覆盖了⽬标对
  • 软件测试面试题 爱学习的执念 面试软件测试面试软件测试服务器软件测试面试软件测试面试
    1、测试矿泉水瓶外观界面测试：瓶子外观界面测试主要是测试瓶子的大小、瓶身所体现的各种信息（如字体、颜色）等瓶子的外观特征是否满足公司的最初对瓶子的设计要求。1.瓶身广告和图案的背景颜色是否符合公司设计要求。2.瓶身上所有字体、颜色是否符合公司的设计要求，是否有错别字。3.带广告的图案遇水后是否会掉色或变模糊，广告与图案内容是否合法。4.瓶身是否有防止烫伤、垃圾回收、年龄限制等提示。5.瓶身图标布局
  • 【Kubernetes】常见面试题汇总（十三） summer.335 Kuberneteskubernetes容器云原生
    目录39.简述KubernetesScheduler使用哪两种算法将Pod绑定到worker节点？40.简述Kuberneteskubelet的作用？41.简述Kuberneteskubelet监控Worker节点资源是使用什么组件来实现的？39.简述KubernetesScheduler使用哪两种算法将Pod绑定到worker节点？KubernetesScheduler根据如下两种调度算法将Po
  • Java基础一 十一路客 java开发语言
    哔哩哔哩Java开发工程师面试该如（）何准备？-知乎一.JavaOOP面试题(1)什么是B/S架构?什么是C/S架构Java都有那些开发平台?B/S(Browser/Server)，浏览器/服务器程序C/S(Client/Server)，客户端/服务端，桌面应用程序1、C/S和B/S各有优势，C/S在图形的表现能力上以及运行的速度上肯定是强于B/S模式的，不过缺点就是他需要运行专门的客户端，而且更
  • 如果面试官问你CAS，你还这么答，可能就要回去等通知了 爱玛士 程序员面试Javajava面试开发语言程序员架构
    前言大家好，我是JAVA高级开发之路，一个总在为粉丝解决面试题的程序员。最近有几个粉丝说在面试面试中遇到了CAS的问题，连着几次面试都没有让面试官满意，区区CAS底层源码，怎能难倒咱们这届程序员们呢？都支棱起来，跟我一起来搞定CAS底层源码。什么是CASCAS的全称是Compare-And-Swap，它是CPU并发原语。它的功能是判断内存某个位置的值是否为预期值，如果是则更改为新的值，这个过程是原
  • PHP，安卓，UI，java，linux视频教程合集 cocos2d-x小菜 javaUIlinuxPHPandroid
    ╔-----------------------------------╗┆                           
  • zookeeper admin 笔记 braveCS zookeeper
      Required Software 1) JDK>=1.6 2)推荐使用ensemble的ZooKeeper(至少3台)，并run on separate machines 3)在Yahoo!，zk配置在特定的RHEL boxes里，2个cpu，2G内存，80G硬盘   数据和日志目录 1)数据目录里的文件是zk节点的持久化备份，包括快照和事务日
  • Spring配置多个连接池 easterfly spring
    项目中需要同时连接多个数据库的时候，如何才能在需要用到哪个数据库就连接哪个数据库呢？ Spring中有关于dataSource的配置：     <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource"   &nb
  • Mysql 171815164 mysql
    例如，你想myuser使用mypassword从任何主机连接到mysql服务器的话。 GRANT ALL PRIVILEGES ON *.* TO 'myuser'@'%'IDENTIFIED BY 'mypassword' WI TH GRANT OPTION; 如果你想允许用户myuser从ip为192.168.1.6的主机连接到mysql服务器，并使用mypassword作
  • CommonDAO（公共/基础DAO） g21121 DAO
            好久没有更新博客了，最近一段时间工作比较忙，所以请见谅，无论你是爱看呢还是爱看呢还是爱看呢，总之或许对你有些帮助。         DAO(Data Access Object)是一个数据访问（顾名思义就是与数据库打交道）接口，DAO一般在业
  • 直言有讳 永夜-极光 感悟随笔
      1.转载地址:http://blog.csdn.net/jasonblog/article/details/10813313   精华: “直言有讳”是阿里巴巴提倡的一种观念，而我在此之前并没有很深刻的认识。为什么呢？就好比是读书时候做阅读理解，我喜欢我自己的解读，并不喜欢老师给的意思。在这里也是。我自己坚持的原则是互相尊重，我觉得阿里巴巴很多价值观其实是基本的做人
  • 安装CentOS 7 和Win 7后，Win7 引导丢失 随便小屋 centos
    一般安装双系统的顺序是先装Win7，然后在安装CentOS，这样CentOS可以引导WIN 7启动。但安装CentOS7后，却找不到Win7 的引导，稍微修改一点东西即可。 一、首先具有root 的权限。      即进入Terminal后输入命令su，然后输入密码即可 二、利用vim编辑器打开/boot/grub2/grub.cfg文件进行修改 v
  • Oracle备份与恢复案例 aijuans oracle
    Oracle备份与恢复案例 一. 理解什么是数据库恢复当我们使用一个数据库时，总希望数据库的内容是可靠的、正确的，但由于计算机系统的故障（硬件故障、软件故障、网络故障、进程故障和系统故障）影响数据库系统的操作，影响数据库中数据的正确性，甚至破坏数据库，使数据库中全部或部分数据丢失。因此当发生上述故障后，希望能重构这个完整的数据库，该处理称为数据库恢复。恢复过程大致可以分为复原(Restore)与
  • JavaEE开源快速开发平台G4Studio v5.0发布 無為子
      我非常高兴地宣布,今天我们最新的JavaEE开源快速开发平台G4Studio_V5.0版本已经正式发布。   访问G4Studio网站 http://www.g4it.org   2013-04-06 发布G4Studio_V5.0版本 功能新增 (1). 新增了调用Oracle存储过程返回游标，并将游标映射为Java List集合对象的标
  • Oracle显示根据高考分数模拟录取 百合不是茶 PL/SQL编程oracle例子模拟高考录取学习交流
    题目要求: 1,创建student表和result表 2,pl/sql对学生的成绩数据进行处理 3,处理的逻辑是根据每门专业课的最低分线和总分的最低分数线自动的将录取和落选     1,创建student表,和result表 学生信息表; create table student( student_id number primary key,--学生id
  • 优秀的领导与差劲的领导 bijian1013 领导管理团队
    责任 优秀的领导：优秀的领导总是对他所负责的项目担负起责任。如果项目不幸失败了，那么他知道该受责备的人是他自己，并且敢于承认错误。 差劲的领导：差劲的领导觉得这不是他的问题，因此他会想方设法证明是他的团队不行，或是将责任归咎于团队中他不喜欢的那几个成员身上。 努力工作 优秀的领导：团队领导应该是团队成员的榜样。至少，他应该与团队中的其他成员一样努力工作。这仅仅因为他
  • js函数在浏览器下的兼容 Bill_chen jquery浏览器IEDWRext
      做前端开发的工程师，少不了要用FF进行测试，纯js函数在不同浏览器下，名称也可能不同。对于IE6和FF，取得下一结点的函数就不尽相同：   IE6：node.nextSibling,对于FF是不能识别的；   FF：node.nextElementSibling,对于IE是不能识别的； 兼容解决方式：var Div = node.nextSibl
  • 【JVM四】老年代垃圾回收：吞吐量垃圾收集器(Throughput GC) bit1129 垃圾回收
    吞吐量与用户线程暂停时间   衡量垃圾回收算法优劣的指标有两个： 吞吐量越高，则算法越好 暂停时间越短，则算法越好 首先说明吞吐量和暂停时间的含义。   垃圾回收时，JVM会启动几个特定的GC线程来完成垃圾回收的任务，这些GC线程与应用的用户线程产生竞争关系，共同竞争处理器资源以及CPU的执行时间。GC线程不会对用户带来的任何价值，因此，好的GC应该占
  • J2EE监听器和过滤器基础 白糖_ J2EE
    Servlet程序由Servlet，Filter和Listener组成，其中监听器用来监听Servlet容器上下文。 监听器通常分三类：基于Servlet上下文的ServletContex监听，基于会话的HttpSession监听和基于请求的ServletRequest监听。   ServletContex监听器 ServletContex又叫application
  • 博弈AngularJS讲义(16) - 提供者 boyitech jsAngularJSapiAngularProvider
      Angular框架提供了强大的依赖注入机制，这一切都是有注入器(injector)完成. 注入器会自动实例化服务组件和符合Angular API规则的特殊对象，例如控制器，指令，过滤器动画等。   那注入器怎么知道如何去创建这些特殊的对象呢？ Angular提供了5种方式让注入器创建对象，其中最基础的方式就是提供者(provider), 其余四种方式(Value, Fac
  • java-写一函数f(a,b)，它带有两个字符串参数并返回一串字符，该字符串只包含在两个串中都有的并按照在a中的顺序。 bylijinnan java
    public class CommonSubSequence { /** * 题目：写一函数f(a,b)，它带有两个字符串参数并返回一串字符，该字符串只包含在两个串中都有的并按照在a中的顺序。 * 写一个版本算法复杂度O(N^2)和一个O(N) 。 * * O(N^2)：对于a中的每个字符，遍历b中的每个字符，如果相同，则拷贝到新字符串中。 * O(
  • sqlserver 2000 无法验证产品密钥 Chen.H sqlwindowsSQL ServerMicrosoft
    在 Service Pack 4 (SP 4), 是运行 Microsoft Windows Server 2003、 Microsoft Windows Storage Server 2003 或 Microsoft Windows 2000 服务器上您尝试安装 Microsoft SQL Server 2000 通过卷许可协议 (VLA) 媒体。 这样做, 收到以下错误信息CD KEY的 SQ
  • [新概念武器]气象战争 comsci
           气象战争的发动者必须是拥有发射深空航天器能力的国家或者组织....        原因如下:        地球上的气候变化和大气层中的云层涡旋场有密切的关系,而维持一个在大气层某个层次
  • oracle 中 rollup、cube、grouping 使用详解 daizj oraclegroupingrollupcube
    oracle 中 rollup、cube、grouping 使用详解 -- 使用oracle 样例表演示 转自namesliu -- 使用oracle 的样列库，演示 rollup, cube, grouping 的用法与使用场景    --- ROLLUP ， 为了理解分组的成员数量，我增加了 分组的计数  COUNT(SAL)   
  • 技术资料汇总分享 Dead_knight 技术资料汇总 分享
    本人汇总的技术资料，分享出来，希望对大家有用。 http://pan.baidu.com/s/1jGr56uE 资料主要包含： Workflow->工作流相关理论、框架(OSWorkflow、JBPM、Activiti、fireflow...) Security->java安全相关资料(SSL、SSO、SpringSecurity、Shiro、JAAS...) Ser
  • 初一下学期难记忆单词背诵第一课 dcj3sjt126com englishword
    could 能够 minute 分钟 Tuesday 星期二 February 二月 eighteenth 第十八 listen 听 careful 小心的，仔细的 short 短的 heavy 重的 empty 空的 certainly 当然 carry 携带；搬运 tape 磁带 basket 蓝子 bottle 瓶 juice 汁，果汁 head 头；头部
  • 截取视图的图片, 然后分享出去 dcj3sjt126com OSObjective-C
    OS 7 has a new method that allows you to draw a view hierarchy into the current graphics context. This can be used to get an UIImage very fast. I implemented a category method on UIView to get the vi
  • MySql重置密码 fanxiaolong MySql重置密码
    方法一:  在my.ini的[mysqld]字段加入： skip-grant-tables 重启mysql服务，这时的mysql不需要密码即可登录数据库  然后进入mysql mysql>use mysql;  mysql>更新 user set password=password('新密码') WHERE User='root'; mysq
  • Ehcache（03）——Ehcache中储存缓存的方式 234390216 ehcacheMemoryStoreDiskStore存储驱除策略
    Ehcache中储存缓存的方式   目录 1     堆内存（MemoryStore） 1.1     指定可用内存 1.2     驱除策略 1.3     元素过期 2   &nbs
  • spring mvc中的@propertysource jackyrong spring mvc
      在spring mvc中，在配置文件中的东西，可以在java代码中通过注解进行读取了： @PropertySource  在spring 3.1中开始引入 比如有配置文件 config.properties mongodb.url=1.2.3.4 mongodb.db=hello 则代码中   @PropertySource(&
  • 重学单例模式 lanqiu17 单例Singleton模式
    最近在重新学习设计模式，感觉对模式理解更加深刻。觉得有必要记下来。 第一个学的就是单例模式，单例模式估计是最好理解的模式了。它的作用就是防止外部创建实例，保证只有一个实例。 单例模式的常用实现方式有两种，就人们熟知的饱汉式与饥汉式，具体就不多说了。这里说下其他的实现方式 静态内部类方式: package test.pattern.singleton.statics; publ
  • .NET开源核心运行时，且行且珍惜 netcome java.net开源
    背景 2014年11月12日，ASP.NET之父、微软云计算与企业级产品工程部执行副总裁Scott Guthrie，在Connect全球开发者在线会议上宣布，微软将开源全部.NET核心运行时，并将.NET 扩展为可在 Linux 和 Mac OS 平台上运行。.NET核心运行时将基于MIT开源许可协议发布，其中将包括执行.NET代码所需的一切项目——CLR、JIT编译器、垃圾收集器（GC）和核心
  • 使用oscahe缓存技术减少与数据库的频繁交互 Everyday都不同 Web高并发oscahe缓存
    此前一直不知道缓存的具体实现，只知道是把数据存储在内存中，以便下次直接从内存中读取。对于缓存的使用也没有概念，觉得缓存技术是一个比较”神秘陌生“的领域。但最近要用到缓存技术，发现还是很有必要一探究竟的。   缓存技术使用背景：一般来说，对于web项目，如果我们要什么数据直接jdbc查库好了，但是在遇到高并发的情形下，不可能每一次都是去查数据库，因为这样在高并发的情形下显得不太合理——
  • Spring+Mybatis 手动控制事务 toknowme mybatis
    @Override    public boolean testDelete(String jobCode) throws Exception {       boolean flag = false;  &nbs
  • 菜鸟级的android程序员面试时候需要掌握的知识点 xp9802 android
    熟悉Android开发架构和API调用 掌握APP适应不同型号手机屏幕开发技巧 熟悉Android下的数据存储  熟练Android Debug Bridge Tool 熟练Eclipse/ADT及相关工具  熟悉Android框架原理及Activity生命周期 熟练进行Android UI布局 熟练使用SQLite数据库； 熟悉Android下网络通信机制，S