成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

NickZhou / 1481人閱讀

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

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

1.CSS 選擇器的使用：

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

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

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

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

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

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

(4):before與:after選擇器使用實(shí)例（單選按鈕的優(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屬性允許以特定的方式定義匹配某個(gè)區(qū)域的特定元素。
例如，假如要并排放置兩個(gè)帶邊框的框，可通過(guò)將box-sizing設(shè)置為"border-box"，這樣瀏覽器就會(huì)呈現(xiàn)出帶有指定寬度和高度的框，并把邊框和內(nèi)邊距放入框中。

(2)語(yǔ)法：

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

(3)好處：

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

(4)瀏覽器兼容性：

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

4.IE瀏覽器判斷js代碼實(shí)現(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93362.html

相關(guān)文章

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

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

    shixinzhang 評(píng)論0 收藏0

  • 深入理解js

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

    caikeal 評(píng)論0 收藏0

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

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

    blastz 評(píng)論0 收藏0

  • 前端知識(shí)歸納

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

    sixleaves 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<