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

資訊專欄INFORMATION COLUMN

CSS3實(shí)戰(zhàn)之一些常用Tips

joywek / 1488人閱讀

摘要：本文為部分翻譯文章，主要內(nèi)容來自于，筆者自身也添加了一些自己的小的。設(shè)置自動居中任何一個元素的自動居中可以使用屬性使用逗號分割列表使用負(fù)的屬性選擇元素使用作為使用作為圖標(biāo)可以達(dá)到自動縮放的效果。

本文為部分翻譯文章，主要內(nèi)容來自于：css-protips，筆者自身也添加了一些自己的小的Tips。

使用:not()屬性為導(dǎo)航添加或者去除邊框

傳統(tǒng)的方法是首先為每個li標(biāo)簽添加標(biāo)簽：

/* add border */
.nav li {
  border-right: 1px solid #666;
}

然后用last-child偽屬性作用于最后一個元素上：

/* remove border */
.nav li:last-child {
  border-right: none;
}

代替的方法應(yīng)該是使用not偽類去設(shè)置僅作用于部分元素的屬性：

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}
為body添加line-height屬性

往往需要為p、h*這類標(biāo)簽多帶帶的添加行高屬性等，作為替代的是可以將它添加到body屬性中，即：

body {
  line-height: 1;
}

通過這種方式文本類的元素可以自動繼承該屬性。

設(shè)置自動居中

任何一個元素的自動居中可以使用flex屬性：

html, body {
  height: 100%;
  margin: 0;
}

body {
  -webkit-align-items: center;  
  -ms-flex-align: center;  
  align-items: center;
  display: -webkit-flex;
  display: flex;
}
使用逗號分割列表 
ul > li:not(:last-child)::after {
  content: ",";
}
使用負(fù)的nth-child屬性選擇元素 
li {
  display: none;
}

/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
  display: block;
}
使用SVG作為Icon 
.logo {
  background: url("logo.svg");
}

使用SVG作為圖標(biāo)可以達(dá)到自動縮放的效果。

文本顯示的優(yōu)化 
html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
使用max-height在單純的CSS滑塊上 
.slider ul {
  max-height: 0;
  overlow: hidden;
}

.slider:hover ul {
  max-height: 1000px;
  transition: .3s ease; /* animate to max-height */
}
繼承box-sizing屬性 
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}
設(shè)置Table元素等寬 
.calendar {
  table-layout: fixed;
}
使用Flexbox作為Margin Hacks 
.list {
  display: flex;
  justify-content: space-between;
}

.list .person {
  flex-basis: 23%;
}
為空的Links添加默認(rèn)內(nèi)容 
a[href^="http"]:empty::before {
  content: attr(href);
}
防止iOS設(shè)備上的元素不可點(diǎn)擊

在iOS設(shè)備中，有時候Click事件會失效，需要設(shè)置一個專門的cursor屬性：

cursor:pointer

不過需要注意的是，這個屬性不可設(shè)置在Android設(shè)備上，如果設(shè)置在Android設(shè)備上，點(diǎn)擊的時候會出現(xiàn)一片藍(lán)色的背景。

防止iOS設(shè)備上輸入失焦

在iOS設(shè)備中，有時候如果彈出了鍵盤會導(dǎo)致輸入框失焦，即鍵盤上的內(nèi)容無法顯示在輸入框內(nèi)，需要進(jìn)行以下覆蓋：

* {
  -webkit-user-select: none; /* prevent copy paste */
}

變?yōu)?/p> 

input[type="text"] {
    -webkit-user-select: text;
}

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

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

相關(guān)文章

  • HTML-CSS-JS

    摘要：本周于上海閉幕，掘金和知乎上都有對應(yīng)的實(shí)錄和問答，但會議的視頻目前都還沒放出來，有心的同學(xué)如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨(dú)立技術(shù)博客推薦推薦一些現(xiàn)在還在堅(jiān)持原創(chuàng)的博主，有業(yè)界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規(guī)范最佳實(shí)踐 本文的所列是實(shí)踐當(dāng)中得出的一套比較不錯的 CSS 書寫規(guī)范，可以結(jié)合自身團(tuán)隊(duì)發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...

    mikasa 評論0 收藏0

  • HTML-CSS-JS

    摘要：本周于上海閉幕，掘金和知乎上都有對應(yīng)的實(shí)錄和問答，但會議的視頻目前都還沒放出來，有心的同學(xué)如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨(dú)立技術(shù)博客推薦推薦一些現(xiàn)在還在堅(jiān)持原創(chuàng)的博主，有業(yè)界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規(guī)范最佳實(shí)踐 本文的所列是實(shí)踐當(dāng)中得出的一套比較不錯的 CSS 書寫規(guī)范，可以結(jié)合自身團(tuán)隊(duì)發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...

    李世贊 評論0 收藏0

  • HTML-CSS-JS

    摘要：本周于上海閉幕，掘金和知乎上都有對應(yīng)的實(shí)錄和問答，但會議的視頻目前都還沒放出來，有心的同學(xué)如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨(dú)立技術(shù)博客推薦推薦一些現(xiàn)在還在堅(jiān)持原創(chuàng)的博主，有業(yè)界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規(guī)范最佳實(shí)踐 本文的所列是實(shí)踐當(dāng)中得出的一套比較不錯的 CSS 書寫規(guī)范，可以結(jié)合自身團(tuán)隊(duì)發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...

    MudOnTire 評論0 收藏0

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

    摘要：特意對前端學(xué)習(xí)資源做一個匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對前端學(xué)習(xí)資源做一個匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會及時更新，平時業(yè)務(wù)工作時也會不定期更...

    princekin 評論0 收藏0

發(fā)表評論

0條評論

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