前端开发中的问题集锦
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
【伪类选择器】
常用伪类选择器：
: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：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
- 区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
- 区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
- 区别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发生重叠了
