目录
1、CSS三大特性
能认识不同选择器的优先级公式，能够进行CSS权重叠加计算，分析并解决CSS冲突问题
1.1继承性
1.2层叠性
注：
继承性，层叠性在前一天总结
1.3优先性
特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低优先级选择器样式
优先级公式：
继承<通配符选择器<标签选择器<类选择器<id选择器<行内选择器<!important
注：
!important写在属性值的后面，分号的前面！
!important不能提升继承的优先级，只要是继承优先级最低!
实际开发中不建议使用!important
1.4权重叠加计算
场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
权重叠加计算公式：（每一级之间不存在进位）
复合选择器中：（0,0,0,0）
第一级：第一个0为行内样式的个数
第二级：第二个0为id选择器的个数
第三级：第三个0为类选择器的个数
第四级：第四个0为标签选择器的个数
比较规则：
先比较第一级数字，如果比较出来了，之后的统统不看
如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的通通不看......
如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算）
注：
!important如果不是继承，则权重最高
1.5Chome调试工具
查错流程
查错步骤：
（1）右击检查
（2）哪里不会点哪里，在elements找到对应的元素
（3）看styles中有没有自己设置的选择器，如果没有，一般是选择器写错了
常见原因1：选择器单词拼错
常见原因2：选择器结构写错
（4）如果选择器有，但是样式没有出来，
看是否有删除线（没生效）
常见原因1：样式被注释
常见原因2：样式被覆盖
看是否有小三角形（报错）
常见原因1：属性值后面没有分号
常见原因2：出现中文标点
常见原因3：属性名或者属性值单词拼错
2、PxCook的基本使用
PxCook（像素大厨），支持PSD文件的文字，颜色，距离自动智能识别
标注功能包括：支持长度，颜色，区域，文字注释。
其中比较有特色的是：
（1）长度标注针对移动端设计，支持px与dp直接的单位转换
（2）注释的文字字体样式可以自定义
（3）自带实时放大镜，省却了反复放大的操作。
（4）长度标注的数字可以自己手动改，设计时可以小小的偷个懒~
（5）标注的各种颜色可以自定义，灵活性不错。
3、盒子模型
能够认识盒子模型的组成，能够掌握盒子模型边框、内边距、外边距的设置方法
3.1盒子模型的介绍
3.1.1盒子的概念
（1）页面中的每一个标签，都可以看做是一个“盒子”，通过盒子的视角更方便的进行布局
（2）浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个矩形区域，我们也形象的称之为盒子
3.1.2盒子模型
CSS中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型
记忆：可以联想现实中的包装盒
3.2内容区域的宽度和高度
作用：利用width和height属性默认设置是盒子内容区域的大小
属性：width/height
常见取值：数字+px
3.3边框（border）
3.3.1连写形式
属性名:border
属性值:单个取值的连写，取值之间以空格隔开，如: border : 10px solid red;
快捷键:bd + tab键
3.3.2单方向设置
场景:只给盒子的某个方向单独设置边框
属性名: border -方位名词
属性值:连写的取值
3.3.3单个属性
作用:给设置边框粗细、边框样式、边框颜色效果
单个属性:
| 作用 | 属性名 | 属性值 |
|---|---|---|
| 边框粗细 | border-width | 数字+px |
| 边框样式 | border-style | 实线solid、虚线dashed 、点线dotted |
| 边框颜色 | border-color | 颜色取值 |
3.4内边距（padding）
属性值：
| 值 | 说明 |
|---|---|
| auto | 设置浏览器边距。这样做的结果会依赖于浏览器 |
| length | 定义一个固定的margin（使用像素，pt，em等） |
| % | 定义一个使用百分比的边距 |
边距属性：
padding属性可以当做复合属性使用，表示单独设置某个方向的内边距
padding最多取4个值
四值:上，右，下，左
padding: 10px 20px 40px 80px;
三值:上，左右，下
padding: 10px 40px 80px;
两值:上下，左右
padding: 10px 80px;
单值:上下左右
padding:10px;
3.5外边距（margin）
margin属性可以当做复合属性使用，表示单独设置某个方向的外边距
属性值与边距属性与内边距类似
3.5.1外边距折叠现象–合并现象
场景:垂直布局的块级元素，上下的margin会合并
结果:最终两者距离为margin的最大值
解决方法:避免就好
只给其中一个盒子设置margin即可
3.5.2外边距折叠现象——塌陷现象
场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上
结果:导致父元素一起往下移
解决方法:
（1）给父元素设置border-top或者padding-top(分隔父子元素的margin-top)
（2）给父元素设置overflow: hidden
（3）转换成行内块元素
（4）设置浮动
3.6 Css3盒模型（自动内减)
需求:盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成?
给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大?
解决方法①∶手动内减
操作:自己计算多余大小，手动在内容中减去
缺点:项目中计算量太大，很麻烦
解决方法②∶自动内减
操作:给盒子设置属性box-sizing : border-box;即可
优点:浏览器会自动计算多余大小，自动在内容中减去
70
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
