前端基礎知識學習記錄（三）

前端基礎知識學習記錄（三）

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