前端基础知识学习记录

Posted 2020-12-08 10manongit

前端基础知识学习记录（三）

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;
}