CSS選擇器的使用 用的最多的情況：
E,F 多元素選擇器，用,分隔槽奕，同時(shí)匹配元素E或元素F
E F 后代選擇器昂秃，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下遞歸）元素F
E>F 子元素選擇器侄旬，用>分隔肺蔚，匹配E元素的所有直接子元素
屬性選擇器用最多的
E[attr = value] 匹配屬性attr值為value的元素，div[id=test],匹配id=test的div
偽類選擇器
E:first-child 匹配元素E的第一個(gè)子元素
E:link 匹配所有未被點(diǎn)擊的鏈接
E:visited 匹配所有已被點(diǎn)擊的鏈接
E:active 匹配鼠標(biāo)已經(jīng)其上按下儡羔、還沒有釋放的E元素
E:hover 匹配鼠標(biāo)懸停其上的E元素
CSS優(yōu)先級(jí)從高到低分別是
- 在屬性后面使用 !important 會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式
- 作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標(biāo)簽選擇器
- 通配符選擇器
- 瀏覽器自定義
塊級(jí)占據(jù)一整行空間宣羊，行內(nèi)占據(jù)自身寬度空間
塊級(jí)元素 包含塊級(jí)與行內(nèi)
div h1 h2 h3 h4 h5 h6 p hr
form ul dl ol pre table
li dd dt tr td th
行內(nèi)元素只包括行內(nèi)
em strong span a br img
button iput label select textarea
code script
寬高只對(duì)塊級(jí)元素有用對(duì)行內(nèi)元素?zé)o用
<style>
.box {
width: 200px;
height: 100px;
background-color: red;
}
</style>
<div class="box"></div>
常用
.box2 {border: 1px dotted #ccc;}
對(duì)于塊級(jí)元素margin:0 auto 可以達(dá)到居中,必須注意要居中必須給他設(shè)置寬度，比如width:100px;沒有寬度是無(wú)法居中的
.box {
/* margin: 0 auto; 實(shí)際上是下面兩個(gè)起作用 */
margin-left: auto;
margin-right: auto;
}
font
font-size：字體大小
font-family：字體汰蜘，宋體仇冯、微軟雅黑、Arial等
font-weight：文字粗度族操，常用的就是默認(rèn)值regular和粗體bold
line-height：行高苛坚，可以用百分比比被、倍數(shù)或者固定尺寸
以上屬性都可繼承給子元素
line-height 和height高度一樣 才能 使得內(nèi)容高度居中。
text-align：文本對(duì)其方式 left泼舱、center等缀、right、justify
text-indent：文案第一行縮進(jìn)距離
text-align: center 行內(nèi)元素居中
文本舉例
text-align: center;
行內(nèi)元素居中
單行文本溢出案例
產(chǎn)生效果是abcdefghijklmn...
.card>h3{
padding: 0 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
列表去點(diǎn)
li{ list-style: none;}
border-radius: 3px
框有銳角 很多地方會(huì)用到
text-decoration: none;
去掉鏈接的下劃線
padding注意點(diǎn) padding：30px; 可以撐高娇昙，但是不能改變?cè)瓉?lái)有的高度尺迂。
去除瀏覽器默認(rèn)樣式
* {maggin:0; padding:0}
字體
p {
line-height: 1.5;
font-size: 14px;
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
font-weight: bold;
}
