前端基础知识进修纪录（三）

1.CSS 选择器的运用：

(1):before与:after选择器的简介：

:before选择器，即为在被选元素的内容前面插进去内容，运用 content 属性来指定要插进去的内容。
:after选择器，即为在被选元素的内容背面插进去内容，一样运用 content 属性来指定要插进去的内容。

(2):before与:after选择器的用法：

p:before{content:"Hello";}
p:after{content:"World!";}

(3):before与:after选择器的浏览器支撑局限：

一切主流浏览器都支撑:before与:after选择器，关于IE8及更早版本中的:before与:after选择器，需声明 <!DOCTYPE>。

(4):before与:after选择器运用实例（单选按钮的优化）:

.write_help_msg{
    position: absolute;
    top: 55px;
    left: -265px;
    z-index: 100;
    padding: 2px 10px;
    box-sizing: border-box;
    width: 740px;
    background-color: #FFFFFF;
    border: 1px solid #cccccc;
}
.write_help_msg:before{
    width: 0px;
    height: 0px;
    position: absolute;
    top: -12px;
    right: 117px;
    padding: 0;
    border-bottom: 6px solid #FFFFFF;
    border-top: 6px solid transparent;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    display: block;
    content: "";
    z-index: 12;
}
.write_help_msg:after{
    width: 0px;
    height: 0px;
    position: absolute;
    top: -14px;
    right: 116px;
    padding: 0;
    border-bottom: 7px solid #cccccc;
    border-top: 7px solid transparent;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    display: block;
    content: "";
    z-index: 10;
}

2.CSS IE8 background-size 兼容：

.background_size_ie8{
    background: url(background_size_ie8.png) no-repeat
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    filter: progid: DXImageTransform.Microsoft.AlphaImageLoader( src='background_size_ie8.png', sizingMethod='scale');
    -ms-filter: progid: DXImageTransform.Microsoft.AlphaImageLoader( src='background_size_ie8.png', sizingMethod='scale');
}

3.CSS3 box-sizing属性：

(1)定义和用法：

box-sizing属性许可以特定的体式格局定义婚配某个地区的特定元素。
比方，假如要并排安排两个带边框的框，可通过将box-sizing设置为”border-box”，如许浏览器就会呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

(2)语法：

box-sizing:content-box;//宽度和高度离别应用到元素的内容框，在宽度和高度以外绘制元素的内边距和边框。
box-sizing:border-box;//为元素设定的宽度和高度决议了元素的边框盒，即为元素指定的任何内边距和边框都将在已设定的宽度和高度内举行绘制。也可理解为通过从已设定的宽度和高度离别减去边框和内边距才获得内容的宽度和高度。
box-sizing:inherit;//划定应从父元素继续box-sizing属性的值。

(3)优点：

css设定的宽度平常是内容区的宽度，一旦设置padding或许border值时可能会致使计划好的盒子发作错位或变形，如许的话就须要提早计算好减去padding和border的宽度值，运用box-sizing这个属性即可免除此贫苦。

(4)浏览器兼容性：

IE8及以上版本均支撑该属性；
Firefox须要加上前缀-moz-；
关于低版本的IOS和Android浏览器须要加上前缀-webkit-；

4.IE浏览器推断js代码完成：

(1)不推断IE11：

function isIE(){
    return window.ActiveXObject ? true : false;
}

(2)推断IE11：

 function isIE(){
    if (!!window.ActiveXObject || "ActiveXObject" inwindow) 
       return true; 
    else 
       return false;
}