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 匹配所有未被點(diǎn)擊的鏈接
E:visited 匹配所有已被點(diǎn)擊的鏈接
E:active 匹配鼠標(biāo)已經(jīng)其上按下、還沒有釋放的E元素
E:hover 匹配鼠標(biāo)懸停其上的E元素

CSS優(yōu)先級從高到低分別是

1. 在屬性后面使用 !important 會覆蓋頁面內(nèi)任何位置定義的元素樣式
2. 作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
3. id選擇器
4. 類選擇器
5. 偽類選擇器
6. 屬性選擇器
7. 標(biāo)簽選擇器
8. 通配符選擇器
9. 瀏覽器自定義

塊級占據(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 可以達(dá)到居中,必須注意要居中必須給他設(shè)置寬度，比如width:100px;沒有寬度是無法居中的

.box {
  /* margin: 0 auto; 實(shí)際上是下面兩個起作用 */
  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：文案第一行縮進(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
框有銳角 很多地方會用到

text-decoration: none;
去掉鏈接的下劃線

padding注意點(diǎn) 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;
}