前端开发中的问题集锦

H5新标签的兼容

主流浏览器都兼容 HTML5 的新标签，对于 IE8 及如下版本不认识 HTML5的新元素，可使用 JavaScript 建立一个没用的元素来解决，例如：
<script>
document.createElement("header");
</script>
也可使用 shiv 来解决兼容性问题，详情可参考 HTML5 Shiv

 

浏览器私有属性

• Google Chrome, Safari ( -webkit )
• Firefox ( -moz- )
• IE ( -ms- )
• Opera ( -o- )

.pic {
-webkit-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}

 

文字末尾省略号的CSS实现方法：

text-overflow:ellipsis;

overflow:hidden;

white-space:nowrap;

 

继承 inherit

文本类的属性基本上能默认继承父类  ：

        font  line-height color text white-space word-wrap word-break

不继承的属性有：

        float position width display transform animation padding

 

CSS 选择器的优先级

计算方法：
a = 行内样式
b = id 选择器的数量
c = 类、伪类的属性选择器的数量  
d = 标签选择器和伪元素选择器的数量
NOTE：从上到下优先级一次下降，且优先级高的样式会将优先级低的样式覆盖。
大体公式（并不许确）以下。
value = a * 1000 + b * 100 + c * 10 + d

已知这样一段HTML：

<div class="a b"><em>Hello World</em></div>

应用了这样一段CSS：

A em{ color:red; } B .a{ color:blue; } C .b{ color:green; } D .a.b{ color:yellow; }

请问，文字“Hello World”的颜色是（回答颜色的英文名称便可）_A_

还有一条，选择器的优先级会根据描述最清楚的来定义，在这个html里面，em定义的属性是最直接的指法，其余的类选择器的指法都算是父类继承过来的颜色属性，因此要选择em。

 

 

已知HTML：<div class="a"><div class="b"></div></div>，若是应用了以下CSS：

.a{ width : 200px; height : 100px;}

.b{ padding : 20%; background-color : red; }

那么红色区域的大小是

 

A.宽：80px，高：80px

B.宽：200px，高：40px

C.宽：200px，高：80px

D.宽：80px，高：40px

 

为啥选择C？

 

【伪类选择器】
经常使用伪类选择器：
:link IE6+
:visited IE7+
:hover IE6中仅可用于连接
:active IE6/7中仅可用于连接
:enabled IE9+
:disabled IE9+
:checked IE9+
:first-child IE8+
:last-child IE9+
:nth-child(even) 可为 odd even 或数字 IE9+
:nth-last-child(n) n 从 0 开始计算 IE9+
:only-child 仅选择惟一的元素 IE9+
:only-of-type IE9+
:first-of-type IE9+
:last-of-type IE9+
:nth-of-type(even) IE9+
:nth-last-of-type(2n) IE9+
不经常使用伪类选择器：
:empty 选中页面中无子元素的标签 IE9+
:root 选择 HTML 根标签 IE9+
:not() 参数为通常选择器 IE9+
:target 被锚点选中的目标元素 IE9+
:lang() 选中语言值为某类特殊值的元素 IE7+

【伪元素选择器】
注意与伪类学则器的区分。
::first-letter IE6+
::first-line IE6+
::before{content: "before"} 需与 content 一同使用 IE8+
::after{content: "after"} 需与 content 一同使用 IE8+
::selection 被用户选中的内容（鼠标选择高亮属性）IE9+ Firefox需用 -moz 前缀

 

link和@import的区别

页面中使用CSS的方式主要有3种：行内添加定义style属性值，页面头部内嵌调用和外面连接调用，其中外面引用有两种：link和@import。外部引用CSS两种方式link和@import的方式分别是：

XML/HTML代码
          <link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />  
XML/HTML代码
          <style type="text/css" media="screen">  
             @import url("CSS文件");  
          </style>  

二者都是外部引用CSS的方式，可是存在必定的区别：

1. 区别1：link是XHTML标签，除了加载CSS外，还能够定义RSS等其余事务；@import属于CSS范畴，只能加载CSS。
2. 区别2：link引用CSS时，在页面载入时同时加载；@import须要页面网页彻底载入之后加载。
3. 区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
4. 区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

补充：@import最优写法
@import的写法通常有下列几种：

@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别
@import url(style.css) //Windows NS4, Macintosh NS4不识别
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import url("style.css") //Windows NS4, Macintosh NS4不识别
由上分析知道，@import url(style.css) 和@import url("style.css")是最优的选择，兼容的浏览器最多。从字节优化的角度来看@import url(style.css)最值得推荐。

 

BFC的定义

是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其余元素的关系和相互做用。在建立了 Block Formatting Context 【块级格式化上下文】的元素中，其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。在 Block Formatting Context 中相邻的块级元素的垂直边距会折叠（collapse）。

在 Block Formatting Context 中，每个元素左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边）， 即便存在浮动也是如此（尽管一个元素的内容区域会因为浮动而压缩），除非这个元素也建立了一个新的 Block Formatting Context 。

BFC究竟是什么？

当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照必定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。好比浮动元素会造成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点相似一个BFC就是一个独立的行政单位的意思。

怎样才能造成BFC

• float的值不为none。
• overflow的值不为visible。
• display的值为table-cell, table-caption, inline-block中的任何一个。
• position的值不为relative和static。

BFC的做用

1.不和浮动元素重叠

若是一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个覆盖的现象，不少自适应的两栏布局就是这么作的。好比下图的效果，参考例子

<div style="float:left; border: 2px solid red"> 123</div>
<p style="border: 2px solid blue;display:block;overflow:hidden;*zoom:1">
The quick brown fox jumped over the  4seohunt.com lazy  dog‘s back.
The quick brown fox jumped over the lazy dog‘s back.
The quick brown fox jumped over the lazy dog‘s back.
The quick brown fox jumped over the lazy dog‘s back.
The quick brown fox jumped over the lazy dog‘s back.
</p>

2.清除元素内部浮动

只要把父元素设为BFC就能够清理子元素的浮动了，最多见的用法就是在父元素上设置overflow: hidden样式，对于IE6加上zoom:1就能够了(IE Haslayout)。

3.嵌套元素Margin边距折叠问题的解决

按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。

所以要解决margin重叠问题，只要让它们不在同一个BFC就好了，可是对于两个相邻元素来讲，意义不大，没有必要给它们加个外壳，可是对于嵌套元素来讲就颇有必要了，只要把父元素设为BFC就能够了。这样子元素的margin就不会和父元素的margin发生重叠了

 

常见的浏览器端的存储技术有哪些？

浏览器端：

cookie

WebStorage(localStorage、sessionStorage)

userData

indexedDB

服务器端：

session

 

格栅系统理解：

http://www.cnblogs.com/JerryTao/p/5476027.html