国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端基礎(chǔ)知識學(xué)習(xí)記錄（三）

NickZhou / 1463人閱讀

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

前端基礎(chǔ)知識學(xué)習(xí)記錄（三）

1.CSS 選擇器的使用：

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

:before選擇器，即為在被選元素的內(nèi)容前面插入內(nèi)容，使用 content 屬性來指定要插入的內(nèi)容。
:after選擇器，即為在被選元素的內(nèi)容后面插入內(nèi)容，同樣使用 content 屬性來指定要插入的內(nèi)容。

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

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

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

所有主流瀏覽器都支持:before與:after選擇器，對于IE8及更早版本中的:before與:after選擇器，需聲明 。

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

.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屬性允許以特定的方式定義匹配某個區(qū)域的特定元素。
例如，假如要并排放置兩個帶邊框的框，可通過將box-sizing設(shè)置為"border-box"，這樣瀏覽器就會呈現(xiàn)出帶有指定寬度和高度的框，并把邊框和內(nèi)邊距放入框中。

(2)語法：

box-sizing:content-box;//寬度和高度分別應(yīng)用到元素的內(nèi)容框，在寬度和高度之外繪制元素的內(nèi)邊距和邊框。
box-sizing:border-box;//為元素設(shè)定的寬度和高度決定了元素的邊框盒，即為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進行繪制。也可理解為通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。
box-sizing:inherit;//規(guī)定應(yīng)從父元素繼承box-sizing屬性的值。

(3)好處：

css設(shè)定的寬度一般是內(nèi)容區(qū)的寬度，一旦設(shè)置padding或者border值時可能會導(dǎo)致規(guī)劃好的盒子發(fā)生錯位或變形，這樣的話就需要提前計算好減去padding和border的寬度值，使用box-sizing這個屬性即可免去此麻煩。

(4)瀏覽器兼容性：

IE8及以上版本均支持該屬性；
Firefox需要加上前綴-moz-；
對于低版本的IOS和Android瀏覽器需要加上前綴-webkit-；

4.IE瀏覽器判斷js代碼實現(xiàn)：

(1)不判斷IE11：

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

(2)判斷IE11：

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/93362.html

相關(guān)文章

  • 前端基礎(chǔ)知識學(xué)習(xí)記錄（三）

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

    shixinzhang 評論0 收藏0

  • 深入理解js

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

    caikeal 評論0 收藏0

  • ES6零基礎(chǔ)教學(xué)_解析彩票項目-學(xué)習(xí)筆記（一）

    摘要：彩票項目實戰(zhàn)學(xué)習(xí)記錄一完整走了一遍課程，覺得還不錯。支持正版人人有責(zé)零基礎(chǔ)教學(xué)解析彩票項目下面是項目課程的目錄路線一個項目分為三部分業(yè)務(wù)邏輯，自動構(gòu)建系統(tǒng)，模擬數(shù)據(jù)和真實數(shù)據(jù)接口處理。 彩票項目實戰(zhàn)學(xué)習(xí)記錄（一） 完整走了一遍課程，覺得還不錯。 總結(jié): es6的知識點說得還算清楚，主要是為了了解和使用，不是深究，所以淺嘗即止即可，所以覺得還不錯。 完整還原了項目開發(fā)的代碼設(shè)計和開發(fā)過...

    blastz 評論0 收藏0

  • 前端知識歸納

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

    sixleaves 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<