CSS常用的技巧分享

這篇文章主要講解了“CSS常用的技巧分享”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“CSS常用的技巧分享”吧！

成都創(chuàng)新互聯(lián)長期為超過千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為西峽企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、做網(wǎng)站，西峽網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

Box-sizing

盡管box-sizing在CSS3中才被引入，其有一個(gè)值是border-box，讓元素的高和寬包含了填充和邊框。

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .div {   

  2.      width: 150px;   

  3.      height: 100px;   

  4.      border: 1px solid #ccc;   

  5.      box-sizing: border-box;   

  6. }  

Chrome 31+, IE8+, Firefox 31+, Safari 7+, Opera 27+, iOS Safari 7.1+ and Android Browser 4.1+等都支持該屬性。


z-index和定位

如果元素沒有定位屬性，如static/absolute/relative/fixed，改屬性將被忽略

CSS Code復(fù)制內(nèi)容到剪貼板

  1. position: relative;   

  2. z-index: 100;  

禁用一個(gè)元素

可以使用pointer-event屬性的一個(gè)none值來有效的禁用元素。不管是JQuery還是JavaScript，點(diǎn)擊事件都不會(huì)被觸發(fā)

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .bricked {   

  2.      pointer-events: none;   

  3. }  

Chrome 31+, IE11+, Firefox 31+, Safari 7+, Opera 27+, iOS Safari 7.1+ and Android Browser 4.1+支持該屬性


長鏈接換行

阻止長鏈接溢出父元素

CSS Code復(fù)制內(nèi)容到剪貼板

  1. a {   

  2.      word-wrap: break-word;   

  3. }  


用媒體查詢檢測Retina顯示屏

可以用下面的媒體查詢檢測Retina顯示屏

CSS Code復(fù)制內(nèi)容到剪貼板

  1. @media   

  2.      (min-device-pixel-ratio: 2),    

  3.      (min-resolution: 192dpi) {    

  4.           /* Retina CSS */  

  5.      }  

過濾

除了IE，filter屬性被廣泛的支持，但可能會(huì)被Spartan支持。在接下來的幾十年，它會(huì)是一個(gè)大事件。

CSS Code復(fù)制內(nèi)容到剪貼板

    1. .blur {      

    2.      filter: blur(30px);      

    3. }    

  1. Chrome 31+, Firefox 35+, Safari 7+, Opera 27+, iOS Safari 7.1+ and Android Browser 4.4+等支持該屬性


用省略號(hào)縮短文本

可以在一個(gè)元素中用省略號(hào)來縮短長文本

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .whatever {   

  2.      overflow: hidden;   

  3.      text-overflow: ellipsis;    

  4. }  

讓一個(gè)空元素服從寬度

有時(shí)你需要一個(gè)空元素去遵循它的寬度屬性，可以這樣做：

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .whatever {   

  2.      min-height: 1px;   

  3. }  

@supports

@supports查詢和@media查詢類似，若瀏覽器支持，則給定的CSS將會(huì)顯示。目前，IE和Safari不支持該屬性，但不久后就會(huì)改變。Spartan承諾支持該屬性，值得期待

CSS Code復(fù)制內(nèi)容到剪貼板

  1. @supports (display: flex) {   

  2.      /* flexbox CSS */     

  3. }   

  4.   

  5. @supports not (display: flex) {   

  6.      /* CSS for no flexbox */      

  7. }  

Chrome 31+, Firefox 31+, Opera 27+ and Android Browser 4.4+等支持該屬性。

感謝各位的閱讀，以上就是“CSS常用的技巧分享”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對CSS常用的技巧分享這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

本文名稱：CSS常用的技巧分享
文章地址：http://muchs.cn/article34/gddese.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、品牌網(wǎng)站制作、網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、移動(dòng)網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化