◆ CSS三大特性
1. 繼承性
2. 層疊性
3. 優(yōu)先級(jí)
繼承 < 通配符選擇器 < 標(biāo)簽選擇器 < 類(lèi)選擇器 < id選擇器 < 行內(nèi)樣式 < !important
繼承 <*{css}<div{css} < .(class命名) {css} <#(class命名) {} < style=" " < !important{權(quán)限最高,不推薦使用}
image.png
不需要理解,后期使用less或者sass就可以了!
◆ PxCook的基本使用
官方網(wǎng)站https://www.fancynode.com.cn/pxcook
使用簡(jiǎn)單 支持psd文件
image.png
◆ 盒子模型
1.盒子模型介紹
CSS 中規(guī)定每個(gè)盒子分別由：內(nèi)容區(qū)域（content）、內(nèi)邊距區(qū)域（padding）舌菜、邊框區(qū)域（border）萌壳、外邊距區(qū)域（
margin）構(gòu)成，這就是 盒子模型
項(xiàng)目中是使用自動(dòng)內(nèi)減只需要加上
box-sizing:boder-box;即可
2.外邊距(margin)取值
| 取值 | 示例 | 含義 |
|---|---|---|
| 一個(gè)值 | margin:10px | 上下左右都設(shè)為10px |
| 兩個(gè)值 | margin:10px 20px | 上下10px 左右20px |
| 三個(gè)值 | margin: 10px 20px 30px; | 上10px 右20px 下30 |
| 四個(gè)值 | margin: 10px 20px 30px 40px; | 上10px 右20px 下30px 左40px |
| 方向 | margin-top margin-bottom margin-left margin-right |
div {
/* 上下左右都是10px */
margin: 10px;
/* 上下10px 左右20px */
margin: 10px 20px;
/* 上10px 右20px 下30 */
margin: 10px 20px 30px;
/* 上10px 右20px 下30px 左40px */
margin: 10px 20px 30px 40px;
}
3.內(nèi)邊距(padding)取值
| 取值 | 示例 | 含義 |
|---|---|---|
| 一個(gè)值 | padding:10px | 上下左右都設(shè)為10px |
| 兩個(gè)值 | padding:10px 20px | 上下10px 左右20px |
| 三個(gè)值 | padding: 10px 20px 30px; | 上10px 右20px 下30 |
| 四個(gè)值 | padding: 10px 20px 30px 40px; | 上10px 右20px 下30px 左40px |
| 方向 | padding-top padding-bottom padding-left padding-right |
div {
/* 上下左右都是10px */
padding: 10px;
/* 上下10px 左右20px */
padding: 10px 20px;
/* 上10px 右20px 下30 */
padding: 10px 20px 30px;
/* 上10px 右20px 下30px 左40px */
padding: 10px 20px 30px 40px;
}
4.清除默認(rèn)樣式
image.png
#◆ CSS布局
1.結(jié)構(gòu)偽類(lèi)選擇器
image.png
image.png
