前端基础概念
2015年10月06日

基本概念

JSON和JSONP的区别

优先级顺序

下列是一份优先级逐级增加的选择器列表：

通用选择器（*）

元素(类型)选择器

类选择器

属性选择器

伪类

ID 选择器

内联样式

css3常用新特性

新添加的选择器：

E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:last-child
E:first-of-type
E:only-child
E:only-of-type
E:empty
E:checked
E:enabled
E:disabled
E::selection
E:not(s)

@Font-face 特性

Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

	@font-face {
	 font-family: BorderWeb;
	 src:url(BORDERW0.eot);
	}
 @font-face {
 	font-family: Runic;
 	src:url(RUNICMT0.eot);
 }

Word-wrap & Text-overflow 样式

边框和颜色（color, border）

	color: rgba(255, 0, 0, 0.75);
	background: rgba(0, 0, 255, 0.75);

CSS3 的阴影（Shadow）和反射（Reflect）效果

CSS3 的背景效果

CSS3 的 Transitions, Transforms 和 Animation

css选择器

  • 后代选择器X Y

    li a { text-decoration: none;} 后代选择器 (descendant selector)，选取 X 元素内的所有 Y 元素，比如上面这段代码将选取 li 标签内的所有链接。

  • 子选择器X > Y

    div#container > ul { border: 1px solid black;} 后代选择器 X Y 选取父层 X 内的所有 Y 元素；子选择器 X > Y 则只选取直接出现在父层 X 内的 Y 元素。

  • 临近选择器X + Y

    ul + p { color: red;} 临近选择器 (adjacent selector)，选取紧邻在 X 元素后面出现的第一个元素，比如上面这段代码将选取 ul 元素后出现的第一个元素，也就是 p 元素。

  • 临近选择器X ~ Y

    ul ~ p { color: red;} 同样也是临近选择器，前面 X + Y 选取紧邻在 X 后出现的第一个元素，而 X ~ Y 将选取 X 元素后出现的所有同级元素。上面这段代码将选取 ul 元素后出现的所有同级 p 元素，而不是像 ul + p 这样选取第一个出现的 p 元素。

  • 属性选择器

    The term SCUBA is an acronym rather than an abbreviation􏰀 as it is pronounced as a word.

    acronym[title] { border-bottom: 1px dotted #999; }

    a[rel=”nofollow”] { background: url(nofollow.gif) no-repeat right center; padding-right: 20px; }

####选择器其他

  • 多用组合

    如果不确定模块的上下margin特别稳定，最好不要将它写在模块里，而是使用类的组合、单独为上下margin挂用于边距的原子类（例如mt10、mb20）。模块最好不要混用margin-top、margin-bottom，统一使用margin-top或margin-bottom.

  • 权重规则 html标签的权重是1、class的权重10，id的权重是100，例如p的权重是1、“div em”的权重是1+1=2，“strong.demo”的权重是10+1=11

  • !important

对于常见隐藏元素的方法有如下五种：

  • display:none; //不占空间
  • height:0px;
  • opacity:0;
  • position:absolute;left:-11111111px;
  • visibility:hidden; //占据空间

display:table-cell

table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了。

支持性：IE8+以及其他现代浏览器都支持此属性;

用途

1、display:table-cell与大小不固定元素的垂直居中

基本概念

度量 viewport：window.innerWith(实际大小) 布局 viewport：document.body.clientWidth （viewport的宽度）

常用设备尺寸大小

  • iPhone5 320pt
  • iphone6 375pt;
  • iphone6 plus 414pt;

缩放比：inital-scale=1

关于rem

rem相对于根html元素的字体大小，根html元素大小默认继承自浏览器，除非显示的覆盖使用 rem 单位的主要目的应该是确保无论用户如何设置自己的浏览器，我们的布局都能调整到合适大小。

什么时候使用rem

根据浏览器字体大小设置缩放的情况下使用rem。（模块外使用rem）width、height、margin-top padding.

关于em

em相对于使用em的元素字体大小进行转换，em单位具有继承效果。当 em 单位设置在 html 元素上时，它将转换为em值乘以浏览器字体大小的设置。

什么时候使用em

根据某个元素的字体大小做缩放而不是根元素的字体大小。比如padding、 margin，line-height.设计组件比如按钮，菜单和标题可能会有自己明确的字体大小。当你修改字体大小的时候，你希望整个组件都适当缩放。(模块内使用em)

不要使用 em 或 rem

  • 多列布局 布局中的列宽通常应该是 %，因此他们可以流畅适应无法预知大小的视区。然而单一列一般仍然应使用 rem 值来设置最大宽度。

  • 当元素应该是严格不可缩放的时候

没人告诉你关于z-index的一些事

堆叠顺序（Stacking Order）

  • 如果没有涉及z-index和position属性的话，那规则很简单，堆叠顺序就是元素在HTML中出现的顺序。(当然如果你对行内元素使用负margin的话，可能情况会复杂一些。)

  • 加上position属性的话，就是所有定位了得元素在没有被定位的元素前面。（一个元素被定位的意思这里指的是它有一个position属性，但是不是static，而是relative,absolute等）

  • 再加上z-index属性，事情就变得有点诡异。首先z-index值越大，越靠前。但是z-index属性只作用在被定位了的元素上。所以如果你在一个没被定位的元素上使用z-index的话，是不会有效果的。还有就是z-index会创建一个堆叠的上下文（Stacking Contexts），我们可以理解为一个层。

堆叠上下文

同一个父元素下面的元素会受父元素的堆叠顺序影响，所以堆叠上下文是我们理解z-index和堆叠顺序的关键。（下面为了简化，我们称堆叠上下文为层。）

参考文档

Dom回流和重绘

  • 回流：当页面中Dom结构发生变化时（增加、删除、移动位置），浏览器都要重新计算DOM结构。减少DOM回流是js优化的重点。

  • 重绘：当某个元素的样式发生变化时，浏览器需要重新渲染这个元素

  • 文档碎片处理createDocumentFragment（）

Table布局的优缺点

Tables的缺点

1、Table要比其它html标记占更多的字节。(延迟下载时间，占用服务器更多的流量资源。)

2、Tablle会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度，让用户等待更久的时间。)

3、Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。(增加设计的复杂度，增加页面加载时间，增加HTTP会话数。)

4、在某些浏览器中Table里的文字的拷贝会出现问题。(这会让用户不悦。)

5、Table会影响其内部的某些布局属性的生效(比如<td>里的元素的height:100%)(这会限制你页面设计的自由性。)

6、一旦学了CSS知识，你会发现使用table做页面布局会变得更麻烦。(先花时间学一些CSS知识，会省去你以后大量的时间。)

7、table对对于页面布局来说，从语义上看是不正确的。(它描述的是表现，而不是内容。)

8、table代码会让阅读者抓狂。(不但无法利用CSS，而且会你不知所云)

9、table一旦设计完成就变成死的，很难通过CSS让它展现新的面貌。

Tables的优点

在某些场合，使用Table是100%的适合、恰当和正确。比如，用table做表格统计和分析是完全正确的。

###常见问题汇集

  • js，jquery获取页面的高度宽带

    console.log(“浏览器当前窗口文档的高度:”+$(document).height()); == document.documentElement.scrollHeight; console.log(“浏览器当前窗口文档对象宽度:”+$(document).width()); == document.documentElement.scrollWidth; console.log(“浏览器当前窗口文档body的高度:”+$(document.body).height());

    $(window).width(); == document.documentElement.clientWidth; $(window).height(); == document.documentElement.clientHeight; 获取元素的宽带width(),不含padding、border；outerWidth()含border、padding；

Basically, $(window).height() give you the maximum height inside of the browser window (viewport), and$(document).height() gives you the height of the document inside of the browser. Most of the time, they will be exactly the same, even with scrollbars.

  • 给子元素添加外边距正常情况下，外边距是会跑到父元素的外面去。通过通过给父元素添加clearfix来实现子元素的margin生效。

    我是子元素，我加了30px的外边距，通过给父元素添加clearfix属性来实现距离父元素30px的效果。

CSS布局奇淫巧计之-强大的负边距

子元素如何在父元素容器内垂直居中；

一像素边框问题

多行文本溢出

移动设备终端交互优化

一般来说，我们需要关注的是：字体、高宽间距、图像（图标、图片）。

浏览器渲染展示网页的过程

1、解析HTML(HTML Parser) 2、构建DOM树(DOM Tree) 3、渲染树构建(Render tree) 4、绘制渲染树(Painting) http://www.cnblogs.com/coco1s/p/5439619.html

浅谈域名发散与域名收敛

http 请求过程 首先要知道，使用一个 http 请求去请求一个资源时，会经历些什么。简单而言：

1、DNS 域名解析 –>

2、发起 TCP 的 3 次握手 –>

3、建立 TCP 连接后发起 http 请求 –>

4、服务器响应 http 请求

5、……略

DNS 解析 Step1: 首先拿到 URL 后，浏览器会寻找本地的 DNS 缓存，看看是否有对应的 IP 地址，如果缓存中存在那就好了，如果没有，那就得向 DNS Server 发送一个请求，找到你想要的 IP 地址。

Step2: 首先他会向你的 ISP(互联网服务提供商) 相关的 DNS servers 发送 DNS query。然后这些 DNS 进行递归查询(recursive)。所谓的递归查询，就是能够直接返回对应的IP地址，而不是其他的 DNS server 地址。

Step3: 如果上述的 DNS Servers 没有你要的域名地址，则就会发送迭代查询，即会先从 root nameservers 找起。 即是假如你要查询 www.example.com ，会先从包含根结点的 13 台最高级域名服务器开始。

Step4: 接着，以从右向左的方式递进，找到 com. 然后向包含 com 的 TLD(顶级域名) nameservers 发送 DNS 请求。接着找到包含 example 的 DNS server。

Step5: 现在进入到了example.com 部分，即是现在正在询问的是权威服务器，该服务器里面包含了你想要的域名信息，也就是拿到了最后的结果 record 。

Step6: 递归查询的 DNS Server 接受到这 record 之后, 会将该record 保存一份到本地。 如果下一次你再请求这个 domain 时，我就可以直接返回给你了。由于每条记录都会存在 TLL ，所以 server 每隔一段时间都会发送一次请求，获取新的 record，

Step7: 最后，再经由最近的 DNS Server 将该条 record 返回。 同样，你的设备也会存一份该 record 的副本。 之后，就是 TCP 的事了，下面是一张萌萌的简化图：

流程: . => com. => .exampl.com. => www.example.com. => IP adress

http://www.cnblogs.com/coco1s/p/5365179.html

MobileWeb 适配总结

固定高度，宽度自适应

这是目前最通用的一种做法，属于自适应布局，viewport width 设置为 device-width，以较小宽度（如 320px）的视觉稿作为参照进行布局。垂直方向的高度和间距使用定值，水平方向混合使用定值和百分比或者利用弹性布局，最终达到“当手机屏幕变化时，横向拉伸或者填充空白的效果”。图像元素根据容器情况，使用定值或者 background-size 缩放。

固定宽度，viewport 缩放

视觉稿、页面宽度、viewport width 使用统一宽度，利用浏览器自身缩放完成适配。页面样式（包括图像元素）完全按照视觉稿的尺寸，使用定值单位 （px、em）即可完成。

不过自从Retina这中妖艳的屏幕推出，分辨率已经不能代表世界的真相了。小小的Note3的分辨率比一些17“显示的分辨率还高。 所以还有必要判断一下设备的像素密度-device-pixel-ratio。

@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) 比如上面的