◆ CSS三大特性
1. 继承性
2. 层叠性
3. 优先级
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
继承 <*{css}<div{css} < .(class命名) {css} <#(class命名) {} < style=" " < !important{权限最高,不推荐使用}
image.png
不需要理解,后期使用less或者sass就可以了!
◆ PxCook的基本使用
官方网站https://www.fancynode.com.cn/pxcook
使用简单 支持psd文件
image.png
◆ 盒子模型
1.盒子模型介绍
CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（
margin）构成，这就是 盒子模型
项目中是使用自动内减只需要加上
box-sizing:boder-box;即可
2.外边距(margin)取值
| 取值 | 示例 | 含义 |
|---|---|---|
| 一个值 | margin:10px | 上下左右都设为10px |
| 两个值 | margin:10px 20px | 上下10px 左右20px |
| 三个值 | margin: 10px 20px 30px; | 上10px 右20px 下30 |
| 四个值 | 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.内边距(padding)取值
| 取值 | 示例 | 含义 |
|---|---|---|
| 一个值 | padding:10px | 上下左右都设为10px |
| 两个值 | padding:10px 20px | 上下10px 左右20px |
| 三个值 | padding: 10px 20px 30px; | 上10px 右20px 下30 |
| 四个值 | 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.清除默认样式
image.png
#◆ CSS布局
1.结构伪类选择器
image.png
image.png
