摘要:第二等代表選擇器,如,權(quán)值為。接收端收到后,回傳一個帶有標(biāo)志的數(shù)據(jù)包以示傳達確認信息。第四次揮手主動關(guān)閉方收到后,發(fā)送一個給被動關(guān)閉方,確認序號為收到序號,至此,完成四次揮手。
CSS優(yōu)先級算法
參考:http://www.bslxx.com/a/miansh...
http://www.bslxx.com/a/miansh...
http://www.bslxx.com/a/miansh...
http://www.bslxx.com/a/miansh...
優(yōu)先級就近原則,同權(quán)重情況下樣式定義最近者為準(zhǔn)
載入樣式以最后載入的定位為準(zhǔn)
優(yōu)先級為: !important > id > class > tag important 比 內(nèi)聯(lián)優(yōu)先級高
important聲明比js的優(yōu)先級要高
第一等:代表內(nèi)聯(lián)樣式,如: style=””,權(quán)值為1000。 第二等:代表ID選擇器,如:#content,權(quán)值為0100。 第三等:代表類,偽類和屬性選擇器,如.content,權(quán)值為0010。 第四等:代表類型選擇器和偽元素選擇器,如div p,權(quán)值為0001。 通配符、子選擇器、相鄰選擇器等的。如*、>、+,權(quán)值為0000。 繼承的樣式?jīng)]有權(quán)值。css定義的權(quán)重
/ 以下是權(quán)重的規(guī)則:標(biāo)簽的權(quán)重為1,class的權(quán)重為10,id的權(quán)重為100,以下/// 例子是演示各種定義的權(quán)重值: /*權(quán)重為1*/ div{ } /*權(quán)重為10*/ .class1{ } /*權(quán)重為100*/ #id1{ } /*權(quán)重為100+1=101*/ #id1 div{ } /*權(quán)重為10+1=11*/ .class1 div{ } /*權(quán)重為10+10+1=21*/ .class1 .class2 div{ } // 如果權(quán)重相同,則最后定義的樣式會起作用,但是應(yīng)該避免這種情況出現(xiàn)CSS3新增偽類
p:first-of-type 選擇屬于其父元素的首個
元素的每個
元素。
p:last-of-type 選擇屬于其父元素的最后
元素的每個
元素。
p:only-of-type 選擇屬于其父元素唯一的
元素的每個
元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個
元素。
p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個
元素。
:after 在元素之前添加內(nèi)容,也可以用來做清除浮動。
:before 在元素之后添加內(nèi)容
:enabled
:disabled 控制表單控件的禁用狀態(tài)。
:checked 單選框或復(fù)選框被選中
給div設(shè)置一個寬度,然后添加margin:0 auto屬性 div{ width:200px; margin:0 auto; } //確定容器的寬高 寬500 高 300 的層 //設(shè)置層的外邊距 .div { width:500px ; height:300px;//高度可以不設(shè) margin: -150px 0 0 -250px; position:relative; //相對定位 background-color:pink; //方便看效果 left:50%; top:50%; }
讓絕對定位的div居中
position: absolute; width: 1200px; background: none; margin: 0 auto; top: 0; left: 0; bottom: 0; right: 0;CSS3有新特性
新增各種CSS選擇器 (: not(.input):所有 class 不是“input”的節(jié)點)
圓角 (border-radius:8px)
多列布局 (multi-column layout)
陰影和反射 (ShadowReflect)
文字特效 (text-shadow、)
文字渲染 (Text-decoration)
線性漸變 (gradient)
旋轉(zhuǎn) (transform)
增加了旋轉(zhuǎn),縮放,定位,傾斜,動畫,多背景
transform:scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)Animation:
新增選擇器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)} 彈性盒模型 display: flex; 多列布局 column-count: 5; 媒體查詢 @media (max-width: 480px) {.box: {column-count: 1;}} 個性化字體 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);} 顏色透明度 color: rgba(255, 0, 0, 0.75); 圓角 border-radius: 5px; 漸變 background:linear-gradient(red, green, blue); 陰影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3); 倒影 box-reflect: below 2px; 文字裝飾 text-stroke-color: red; 文字溢出 text-overflow:ellipsis; 背景效果 background-size: 100px 100px; 邊框效果 border-image:url(bt_blue.png) 0 10; 轉(zhuǎn)換 旋轉(zhuǎn) transform: rotate(20deg); 傾斜 transform: skew(150deg, -10deg); 位移 transform: translate(20px, 20px); 縮放 transform: scale(.5); 平滑過渡 transition: all .3s ease-in .1s; 動畫 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;用純CSS創(chuàng)建一個三角形
// 把上、左、右三條邊隱藏掉(顏色設(shè)為 transparent) #demo { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent; }瀏覽器的兼容性
png24位的圖片在iE6瀏覽器上出現(xiàn)背景,解決方案是做成PNG8.
瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統(tǒng)一
IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性;Firefox下,只能使用getAttribute()獲取自定義屬性。解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性
IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性.Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性
BFC塊級格式化上下文(內(nèi)部元素不會影響外部元素)
渲染規(guī)則:
1.bfc元素的垂直方向邊距發(fā)生重疊
2.bfc區(qū)域不會與浮動元素重疊
3.獨立容器
4.計算bfc高度時,浮動元素也會參與計算
創(chuàng)建bfc:
1.overflow
2.浮動不為none
3.position不是static
4.display與table有關(guān)
移除空格、使用margin負值、使用font-size:0、letter-spacing、word-spacing
清除浮動.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } 1.可用a標(biāo)簽 設(shè)置display:inline-block;width:100%, 把含浮動元素的div撐起來(div不用設(shè)計高度) 2.overflow:hidden(BFC) 3.可用a標(biāo)簽 設(shè)置display:block;width:100%,clear:both 4.div=》display:table 5.div=》display:table-cell 6.div=》display:flow-root(觸發(fā)BFC) 7.div::after代替a標(biāo)簽=》content:’’ display:block; clear:both;(最下方存在一個沒有高度的元素) 8.使用.clearfix:after{content:’’ display:block; clear:both;} 9.讓div也浮動(BFC)盒子模型
盒子模型構(gòu)成:內(nèi)容(content)、內(nèi)填充(padding)、 邊框(border)、外邊距(margin) IE8及其以下版本瀏覽器,未聲明 DOCTYPE,內(nèi)容寬高會包含內(nèi)填充和邊框,稱為怪異盒模型(IE盒模型) 標(biāo)準(zhǔn)(W3C)盒模型:元素寬度 = width + padding + border + margin 怪異(IE)盒模型:元素寬度 = width + margin 標(biāo)準(zhǔn)瀏覽器通過設(shè)置 css3 的 box-sizing: border-box 屬性,觸發(fā)“怪異模式”解析計算寬高 box-sizing: content-box; // 默認的標(biāo)準(zhǔn)(W3C)盒模型元素效果 box-sizing: border-box; // 觸發(fā)怪異(IE)盒模型元素的效果 box-sizing: inherit; // 繼承父元素 box-sizing 屬性的值繼承
可以繼承的樣式:font-size、font-family、color、list-style、cursor 不可繼承的樣式:width、height、border、padding、margin、background隱藏元素的方法
visibility: hidden; 這個屬性只是簡單的隱藏某個元素,但是元素占用的空間任然存在 opacity: 0; CSS3屬性,設(shè)置0可以使一個元素完全透明 position: absolute; 設(shè)置一個很大的 left 負值定位,使元素定位在可見區(qū)域之外 display: none; 元素會變得不可見,并且不會再占用文檔的空間。 transform: scale(0); 將一個元素設(shè)置為縮放無限小,元素將不可見,元素原來所在的位置將被保留HTML5屬性,效果和display:none;相同,但這個屬性用于記錄一個元素的狀態(tài) height: 0; 將元素高度設(shè)為 0 ,并消除邊框 filter: blur(0); CSS3屬性,將一個元素的模糊度設(shè)置為0,從而使這個元素“消失”在頁面中 rgba() 和 opacityopacity 作用于元素以及元素內(nèi)的所有內(nèi)容(包括文字)的透明度 rgba() 只作用于元素自身的顏色或其背景色,子元素不會繼承透明效果## 瀏覽器的JS兼容性 ##
當(dāng)前樣式:getComputedStyle(el, null) VS el.currentStyle 事件對象:e VS window.event 鼠標(biāo)坐標(biāo):e.pageX, e.pageY VS window.event.x, window.event.y 按鍵碼:e.which VS event.keyCode 文本節(jié)點:el.textContent VS el.innerTextli與li之間有看不見的空白間隔li排列受到中間空白(回車/空格)等的影響,因為空白也屬于字符,會被應(yīng)用樣式占據(jù)空間,產(chǎn)生間隔 解決辦法:在ul設(shè)置設(shè)置font-size=0,在li上設(shè)置需要的文字大小px、empx 相對于顯示器屏幕分辨率,無法用瀏覽器字體放大功能 em 值并不是固定的,會繼承父級的字體大小: em = 像素值 / 父級font-sizeFOUC(Flash of Unstyled Content)當(dāng)使用 @import 導(dǎo)入 CSS 時,會導(dǎo)致某些頁面在 IE 出現(xiàn)奇怪的現(xiàn)象: 沒有樣式的頁面內(nèi)容顯示瞬間閃爍,這種現(xiàn)象稱為“文檔樣式短暫失效”,簡稱為FOUC 產(chǎn)生原因:當(dāng)樣式表晚于結(jié)構(gòu)性html加載時,加載到此樣式表時,頁面將停止之前的渲染。 等待此樣式表被下載和解析后,再重新渲染頁面,期間導(dǎo)致短暫的花屏現(xiàn)象。 解決方法:使用 link 標(biāo)簽將樣式表放在文檔 headCSS優(yōu)化、提高性能多個css合并,盡量減少HTTP請求
全屏滾動
將css文件放在頁面最上面
移除空的css規(guī)則
避免使用CSS表達式
選擇器優(yōu)化嵌套,盡量避免層級過深
充分利用css繼承屬性,減少代碼量
抽象提取公共樣式,減少代碼量
屬性值為0時,不加單位
屬性值為小于1的小數(shù)時,省略小數(shù)點前面的0
css雪碧圖原理類似圖片輪播原理,超出隱藏部分,滾動時顯示
響應(yīng)式設(shè)計ie
可能用到的CSS屬性:overflow:hidden; transform:translate(100%, 100%); display:none;$(window).resize(function () { screenRespond(); }); screenRespond(); function screenRespond(){ var screenWidth = $(window).width(); if(screenWidth <= 1800){ $("body").attr("class", "w1800"); } if(screenWidth <= 1400){ $("body").attr("class", "w1400"); } if(screenWidth > 1800){ $("body").attr("class", ""); } }a標(biāo)簽上四個偽類的執(zhí)行順序link > visited > hover > active
Chrome支持小于12px 的文字.shrink{ -webkit-transform:scale(0.8); -o-transform:scale(1); display:inline-block; }TCP傳輸?shù)娜挝帐炙拇螕]手策略為了準(zhǔn)確無誤地把數(shù)據(jù)送達目標(biāo)處,TCP協(xié)議采用了三次握手策略。用TCP協(xié)議把數(shù)據(jù)包送出去后,TCP不會對傳送 后的情況置之不理,它一定會向?qū)Ψ酱_認是否成功送達。握手過程中使用了TCP的標(biāo)志:SYN和ACK 發(fā)送端首先發(fā)送一個帶SYN標(biāo)志的數(shù)據(jù)包給對方。接收端收到后,回傳一個帶有SYN/ACK標(biāo)志的數(shù)據(jù)包以示傳達確認信息。 最后,發(fā)送端再回傳一個帶ACK標(biāo)志的數(shù)據(jù)包,代表“握手”結(jié)束。 若在握手過程中某個階段莫名中斷,TCP協(xié)議會再次以相同的順序發(fā)送相同的數(shù)據(jù)包 斷開一個TCP連接則需要“四次握手”: 第一次揮手:主動關(guān)閉方發(fā)送一個FIN,用來關(guān)閉主動方到被動關(guān)閉方的數(shù)據(jù)傳送,也就是主動關(guān)閉方告訴被動關(guān)閉方:我已經(jīng)不 會再給你發(fā)數(shù)據(jù)了(當(dāng)然,在fin包之前發(fā)送出去的數(shù)據(jù),如果沒有收到對應(yīng)的ack確認報文,主動關(guān)閉方依然會重發(fā)這些數(shù)據(jù)),但是,此時主動關(guān)閉方還可 以接受數(shù)據(jù)。 第二次揮手:被動關(guān)閉方收到FIN包后,發(fā)送一個ACK給對方,確認序號為收到序號+1(與SYN相同,一個FIN占用一個序號)。 第三次揮手:被動關(guān)閉方發(fā)送一個FIN,用來關(guān)閉被動關(guān)閉方到主動關(guān)閉方的數(shù)據(jù)傳送,也就是告訴主動關(guān)閉方,我的數(shù)據(jù)也發(fā)送完了,不會再給你發(fā)數(shù)據(jù)了。 第四次揮手:主動關(guān)閉方收到FIN后,發(fā)送一個ACK給被動關(guān)閉方,確認序號為收到序號+1,至此,完成四次揮手。HTTP和HTTPSHTTP協(xié)議通常承載于TCP協(xié)議之上,在HTTP和TCP之間添加一個安全協(xié)議層(SSL或TSL),這個時候,就成了我們常說的HTTPS 默認HTTP的端口號為80,HTTPS的端口號為443HTTPS安全
GET和POST的區(qū)別,何時使用POST
因為網(wǎng)絡(luò)請求需要中間有很多的服務(wù)器路由器的轉(zhuǎn)發(fā)。中間的節(jié)點都可能篡改信息,而如果使用HTTPS,密鑰在你和終點站才有。https之所以比http安全,是因為他利用ssl/tls協(xié)議傳輸。它包含證書,卸載,流量轉(zhuǎn)發(fā),負載均衡,頁面適配,瀏覽器適配,refer傳遞等。保障了傳輸過程的安全性GET:一般用于信息獲取,使用URL傳遞參數(shù),對所發(fā)送信息的數(shù)量也有限制,一般在2000個字符 POST:一般用于修改服務(wù)器上的資源,對所發(fā)送的信息沒有限制。 GET方式需要使用Request.QueryString來取得變量的值,而POST方式通過Request.Form來獲取變量的值,也就是說Get是通過地址欄來傳值,而Post是通過提交表單來傳值。 然而,在以下情況中,請使用 POST 請求: 無法使用緩存文件(更新服務(wù)器上的文件或數(shù)據(jù)庫) 向服務(wù)器發(fā)送大量數(shù)據(jù)(POST 沒有數(shù)據(jù)量限制) 發(fā)送包含未知字符的用戶輸入時,POST 比 GET 更穩(wěn)定也更可靠七層模型文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/53061.html
摘要:特意對前端學(xué)習(xí)資源做一個匯總,方便自己學(xué)習(xí)查閱參考,和好友們共同進步。 特意對前端學(xué)習(xí)資源做一個匯總,方便自己學(xué)習(xí)查閱參考,和好友們共同進步。 本以為自己收藏的站點多,可以很快搞定,沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方,歡迎補充。有錯誤的地方,還請斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應(yīng)和斧正,會及時更新,平時業(yè)務(wù)工作時也會不定期更...
摘要:第二等代表選擇器,如,權(quán)值為。接收端收到后,回傳一個帶有標(biāo)志的數(shù)據(jù)包以示傳達確認信息。第四次揮手主動關(guān)閉方收到后,發(fā)送一個給被動關(guān)閉方,確認序號為收到序號,至此,完成四次揮手。 CSS優(yōu)先級算法 參考:http://www.bslxx.com/a/miansh...http://www.bslxx.com/a/miansh...http://www.bslxx.com/a/miansh...
摘要:什么叫優(yōu)雅降級和漸進增強漸進增強針對低版本瀏覽器進行構(gòu)建頁面,保證最基本的功能,然后再針對高級瀏覽器進行效果交互等改進和追加功能達到更好的用戶體驗。優(yōu)雅降級一開始就構(gòu)建完整的功能,然后再針對低版本瀏覽器進行兼容。 1、CSS選擇器有哪些?它們的優(yōu)先級是怎樣的? 選擇器類型: id選擇器 ( # myid) 類選擇器 (.myclassname) 標(biāo)簽選擇器 ...
摘要:什么叫優(yōu)雅降級和漸進增強漸進增強針對低版本瀏覽器進行構(gòu)建頁面,保證最基本的功能,然后再針對高級瀏覽器進行效果交互等改進和追加功能達到更好的用戶體驗。優(yōu)雅降級一開始就構(gòu)建完整的功能,然后再針對低版本瀏覽器進行兼容。 1、CSS選擇器有哪些?它們的優(yōu)先級是怎樣的? 選擇器類型: id選擇器 ( # myid) 類選擇器 (.myclassname) 標(biāo)簽選擇器 ...
閱讀 2104·2023-05-11 16:55
閱讀 3504·2021-08-10 09:43
閱讀 2618·2019-08-30 15:44
閱讀 2440·2019-08-29 16:39
閱讀 583·2019-08-29 13:46
閱讀 2005·2019-08-29 13:29
閱讀 921·2019-08-29 13:05
閱讀 691·2019-08-26 13:51