- 相關(guān)推薦
提高CSS開發(fā)能力的技巧大全
1 使用:not()給導(dǎo)航條添加間隔線
我們通常使用如下代碼給導(dǎo)航條增加間隔線
/* add border */
.nav li {
border-right: 1px solid #666;
}
/* remove border */
.nav li:last-child {
border-right: none;
}
現(xiàn)在，我們可以使用:not()選擇符簡化操作，代碼簡潔易讀，不錯(cuò)吧。
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
或者，我們增加左邊框。
.nav li:first-child ~ li {
border-left: 1px solid #666;
}
2 給body元素增加Line-Height屬性
我們不需要給每個(gè)p、h1元素設(shè)置line-height，只需要給body元素設(shè)置，其他文本元素會自動(dòng)繼承body的特性。
body {
line-height: 1;
}
3 任意元素垂直居中
不是黑魔法，確實(shí)可以讓任意元素垂直居中。
html, body {
height: 100%;
margin: 0;
}
body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
4 逗號分隔的列表
讓html列表貌似現(xiàn)實(shí)中逗號分隔的列表
ul > li:not(:last-child)::after {
content: ",";
}
5 在nth-child中使用負(fù)數(shù)
在css的nth-child中使用負(fù)數(shù)選擇1~n條記錄。
li {
display: none;
}
/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
display: block;
}
6 使用svg圖標(biāo)
沒有理由不使用svg圖標(biāo)，在大多數(shù)分辨率和瀏覽器里能夠?qū)崿F(xiàn)縮放，甚至兼容到IE9，所以不用再用.png、.gif等等。
.logo {
background: url("logo.svg");
}
7 文本顯示優(yōu)化
一些字體不能再所有設(shè)備中最優(yōu)展示，所以需要設(shè)置。
html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
注意optimizeLegibility屬性值的使用問題，同時(shí)IE/Edge不支持text-rendering。
8 在Pure CSS Sliders中使用max-height
使用max-height實(shí)現(xiàn)隱藏、顯示的動(dòng)畫。
.slider ul {
max-height: 0;
overlow: hidden;
}
.slider:hover ul {
max-height: 1000px;
transition: .3s ease;
}
參見本博《Auto值的CSS3 Transition解決方案》
9 初始化box-sizing
從html中繼承box-sizing屬性，這樣的話，后期維護(hù)比較方便。
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
10 表格單元格等寬
.calendar {
table-layout: fixed;
}
11 使用Flexbox擺脫各種Margin Hacks
在實(shí)現(xiàn)側(cè)欄時(shí)，我們不再需要各種nth-、first-和last-child等設(shè)置margin，可以使用Flexbox輕松實(shí)現(xiàn)均勻分布。
.list {
display: flex;
justify-content: space-between;
}
.list .person {
flex-basis: 23%;
}
12 給空連接使用屬性選擇符
對于那些擁有href屬性但是內(nèi)容為空的a，自動(dòng)添加內(nèi)容。
a[href^="http"]:empty::before {
content: attr(href);
}
【提高CSS開發(fā)能力的技巧】相關(guān)文章：
提高溝通能力的技巧10-29
css 書寫技巧 CSS 技巧教程簡介07-02
提高即興應(yīng)對能力的技巧09-03
快速提高演講能力的技巧09-24
提高口才能力的演講技巧08-27
提高英語寫作能力的技巧09-01
提高英語閱讀能力的技巧推薦09-22
如何提高演講能力-演講技巧08-23
快速提高手繪能力的技巧08-20
提高英語聽力能力的技巧10-27