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

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

1.css 選擇器的使用：

(1):before與:after選擇器的簡介：

:before選擇器，即為在被選元素的內容前面插入內容，使用 content 屬性來指定要插入的內容。

:after選擇器，即為在被選元素的內容後面插入內容，同樣使用 content 屬性來指定要插入的內容。

(2):before與:after選擇器的用法：

p:before

p:after

(3):before與:after選擇器的瀏覽器支援範圍：

所有主流瀏覽器都支援:before與:after選擇器，對於ie8及更早版本中的:before與:after選擇器，需宣告。

(4):before與:after選擇器使用例項（單選按鈕的優化）:

.write_help_msg .write_help_msg:before

.write_help_msg:after

2.css ie8 background-size 相容：

.background_size_ie8

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()

(2)判斷ie11：

function isie()