選擇器
:first-line :first-letter 選擇第一行境肾，第一個(gè)字
not選擇器 body.not(h1)
first-child, last-child 選擇一個(gè)父元素中第一茁帽，最后一個(gè)子元素
nth-child(n)表示選擇第n個(gè)元素
nth-of-type，只計(jì)算同類(lèi)元素
only-child 只有一個(gè)元素時(shí)選擇
:hover 鼠標(biāo)經(jīng)過(guò) :focus 鼠標(biāo)點(diǎn)擊
在標(biāo)題前添加嵌套連續(xù)編號(hào)
<style type="text/css">
h1:before{
content: counter(counter) '. ';
}
h1{
counter-increment: counter;
counter-reset: subcounter; #重置subcounter
}
h2:before {
content: counter(counter) '-' counter(subcounter) '.'; #1-2. 形式
}
h2 {
counter-increment: subcounter;
padding-left: 20px;
}
h3:before{
content: counter(counter) '-' counter(subcounter) '-' counter(subsubcounter) '.'
}
h3{
counter-increment: subsubcounter;
padding-left: 40px;
}
</style>
盒相關(guān)樣式
block類(lèi)型：例如div姐直、p標(biāo)簽，占滿一整行蒋畜，可以設(shè)置長(zhǎng)寬
inline類(lèi)型：例如span標(biāo)簽声畏，只占內(nèi)容的寬度，一行可存在多個(gè)姻成，不能設(shè)置長(zhǎng)寬
inline-block類(lèi)型：添加 display: inline-block插龄，可設(shè)置長(zhǎng)寬，也可允許一行存在多個(gè)科展。默認(rèn)是底部對(duì)齊均牢，vertical-align: top可設(shè)置為頂部對(duì)齊〔哦茫可用于顯示水平菜單徘跪。
overflow屬性： overflow:hidden隱藏超出部分甘邀， overflow-scroll超出部分滾動(dòng)顯示，overflow:auto根據(jù)需要出現(xiàn)水平滾動(dòng)或垂直滾動(dòng)
box-sizing:border-box:添加屬性后盒子不會(huì)被padding和盒子厚度撐開(kāi)垮庐。
布局
多欄布局
div{
width: 500px;
column-count: 2; #將內(nèi)容分兩欄
-moz-column-count:2; #firefox瀏覽器
-webkit-column-count:2; #谷歌瀏覽器
column-rule: 1px solid red; #中間線
-moz-column-rule: 1px solid red
-webkit-column-rule: 1px solid red;
-webkit-column-gap: 3em; #兩欄間隔距離
}
盒布局
分三欄居中顯示
<style type="text/css">
#container{
display: -webkit-box;
display: -moz-box;
margin: 0 auto; #居中
padding: 0;
width: 1000px;
}
.left{
padding: 20px;
width: 25%;
}
.center{
padding: 20px;
width: 30%;
}
.right{
padding: 20px;
width: 25%
}
</style>
彈性布局
中間部分自動(dòng)補(bǔ)滿
<style type="text/css">
#container{
display: flex;
margin: 0 auto;
padding: 0;
width: 1000px;
}
.left{
order:1;
padding: 20px;
width: 15%;
}
.center{
order:2; #顯示順序
padding: 20px;
flex: 1;
}
.right{
padding: 20px;
width: 15%
}
</style>
