CSS選擇器的使用 用的最多的情況：
E,F 多元素選擇器，用,分隔，同時匹配元素E或元素F
E F 后代選擇器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下遞歸）元素F
E>F 子元素選擇器，用>分隔，匹配E元素的所有直接子元素
屬性選擇器用最多的
E[attr = value] 匹配屬性attr值為value的元素，div[id=test],匹配id=test的div
偽類選擇器
E:first-child 匹配元素E的第一個子元素
E:link 匹配所有未被點擊的鏈接
E:visited 匹配所有已被點擊的鏈接
E:active 匹配鼠標(biāo)已經(jīng)其上按下、還沒有釋放的E元素
E:hover 匹配鼠標(biāo)懸停其上的E元素
CSS優(yōu)先級從高到低分別是
- 在屬性后面使用 !important 會覆蓋頁面內(nèi)任何位置定義的元素樣式
- 作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標(biāo)簽選擇器
- 通配符選擇器
- 瀏覽器自定義
塊級占據(jù)一整行空間，行內(nèi)占據(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
寬高只對塊級元素有用對行內(nèi)元素?zé)o用
<style>
.box {
width: 200px;
height: 100px;
background-color: red;
}
</style>
<div class="box"></div>
常用
.box2 {border: 1px dotted #ccc;}
對于塊級元素margin:0 auto 可以達到居中,必須注意要居中必須給他設(shè)置寬度，比如width:100px;沒有寬度是無法居中的
.box {
/* margin: 0 auto; 實際上是下面兩個起作用 */
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：文本對其方式 left、center、right、justify
text-indent：文案第一行縮進距離
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;
}
列表去點
li{ list-style: none;}
border-radius: 3px
框有銳角 很多地方會用到
text-decoration: none;
去掉鏈接的下劃線
padding注意點 padding：30px; 可以撐高，但是不能改變原來有的高度。
去除瀏覽器默認(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;
}
