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

NickZhou 發布于2019-08-22 15:19 / 1455人閱讀

摘要：前端基礎知識學習記錄三選擇器的使用與選擇器的簡介選擇器，即為在被選元素的內容前面插入內容，使用屬性來指定要插入的內容。也可理解為通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。

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

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選擇器，需聲明。

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

云服務器 GPU云服務器前端開發基礎知識前端知識前端基礎前端基礎教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93362.html

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

摘要：前端基礎知識學習記錄三選擇器的使用與選擇器的簡介選擇器，即為在被選元素的內容前面插入內容，使用屬性來指定要插入的內容。也可理解為通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。前端基礎知識學習記錄（三） 1.CSS 選擇器的使用： (1):before與:after選擇器的簡介： :before選擇器，即為在被選元素的內容前面插入內容，使用 content 屬性...

shixinzhang 2019-08-30 14:08 評論0 收藏0
深入理解js

摘要：詳解十大常用設計模式力薦深度好文深入理解大設計模式收集各種疑難雜癥的問題集錦關于，工作和學習過程中遇到過許多問題，也解答過許多別人的問題。介紹了的內存管理。延遲加載 (Lazyload) 三種實現方式延遲加載也稱為惰性加載，即在長網頁中延遲加載圖像。用戶滾動到它們之前，視口外的圖像不會加載。本文詳細介紹了三種延遲加載的實現方式。詳解 Javascript十大常用設計模式力薦~ ...

caikeal 2019-08-26 11:39 評論0 收藏0
ES6零基礎教學_解析彩票項目-學習筆記（一）

摘要：彩票項目實戰學習記錄一完整走了一遍課程，覺得還不錯。支持正版人人有責零基礎教學解析彩票項目下面是項目課程的目錄路線一個項目分為三部分業務邏輯，自動構建系統，模擬數據和真實數據接口處理。彩票項目實戰學習記錄（一）完整走了一遍課程，覺得還不錯。總結: es6的知識點說得還算清楚，主要是為了了解和使用，不是深究，所以淺嘗即止即可，所以覺得還不錯。完整還原了項目開發的代碼設計和開發過...

blastz 2019-08-22 13:52 評論0 收藏0
前端知識歸納

摘要：繼承性子標簽會繼承父標簽樣式優先級行內樣式選擇器類選擇器標簽選擇器通配符繼承機制創建了的元素中，在垂直方向上的會發生重疊。技能考察：一、關于Html 1、html語義化標簽的理解; 結構化的理解; 能否寫出簡潔的html結構; SEO優化 a、理解：根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化）便于開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和...

sixleaves 2019-08-02 16:13 評論0 收藏0