一、CSS 三大特性
1.1优先级的介绍
➢ 特性：
不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
➢ 优先级公式：(越具体优先级越高)
• 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 (style)< !important
➢ 注意点：
-
!important写在属性值的后面，分号的前面！
-
!important不能提升继承的优先级，只要是继承优先级最低！
-
实际开发中不建议使用 !important
1.2 权重叠加计算
➢ 场景：
如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
➢ 权重叠加计算公式：（每一级之间不存在进位，谁级别大就大）
➢ 比较规则：
-
先比较第一级数字，如果比较出来了，之后的统统不看
-
如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
-
……
-
如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!）
➢ 注意点：!important如果不是继承，则权重最高，天下第一！
（拓展）权重叠加计算案例
➢ 权重计算题解题步骤：
-
先判断选择器是否能直接选中标签，如果不能直接选中 → 是继承，优先级最低 → 直接pass （继承看直接父元素的优先级）
-
通过权重计算公式，判断谁权重最高
➢ 注意点：
• 实际开发中选择标签需要精准，尽量避免多个选择器同时选中一个标签的情况，不要自己难为自己
（拓展）查错流程 （遇到样式出不来，要学会通过调试工具找错）
波浪线是语法有错误
二、PxCook的基本使用
- 通过软件打开设计图
① 打开软件 ② 拖拽入设计图 ③ 新建项目
- 常用快捷键
（1）放大设计图：ctrl + +
（2）缩小设计图：ctrl + -
（3）移动设计图：空格按住不放，鼠标拖动
3.常用工具
（1）量尺寸（尺子）
（2）吸颜色（吸管）
- 从psd文件中直接获取数据：（开发打开） 切换到开发界面，直接点击获取数据 png用设计打开
三、盒子模型
1.1 盒子模型的介绍
- 盒子的概念
（1）页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局
（2）浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子
- 盒子模型
➢ CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是 盒子模型
3.记忆：可以联想现实中的包装盒
2.1 内容的宽度和高度
➢ 作用：
利用 width 和 height 属性默认设置是盒子 内容区域 的大小
➢ 属性：width / height
➢ 常见取值：数字+px
3.1 边框（border）- 单个属性
➢ 作用：
给设置边框粗细、边框样式、边框颜色效果
➢ 单个属性：
➢ 快捷键：bd + tab
3.3 边框（border）- 单方向设置 （某一个方向的一条边）
➢场景：
只给盒子的某个方向单独设置边框
➢属性名：
border - 方位名词（left right bottom top）
➢ 属性值：
连写的取值
3.4 盒子实际大小初级计算公式
➢ 需求：
盒子尺寸 400*400，背景绿色，边框10px 实线 黑色，如何完成？
• 注意点： ① 设置width和height是内容的宽高！ ② 设置border会撑大盒子！
➢ 盒子实际大小计算公式：
• 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
• 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
➢ 解决：当盒子被border撑大后，如何满足需求？
• 解决：计算多余大小，手动在内容中减去（手动内减）
4.1 内边距（padding）- 取值
➢ 作用：
设置 边框 与 内容区域 之间的距离
➢ 属性名：padding
➢ 常见取值
上 左右 下 3个值的时候
上 右 下 左 4个值的时候
上下 左右 2个值的时候
4个方向 1个值的时候 ➢记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！
（扩展）只给盒子的某个方向单独设置内边距
➢属性名：padding - 方位名词
➢属性值：数字 + px
➢ 设计布局顺序：
- 从外往内，从上往下
➢ 每一个盒子的样式：
-
宽高
-
辅助的背景颜色
-
盒子模型的部分：border、padding、margin
-
其他样式：color、font-、text-、……
➢ 不会撑大盒子的特殊情况（块级元素）
-
如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
-
此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子
4.2 CSS3盒模型（自动内减）
（期望效果左，但是由于加了border和padding导致高度变成364）
• 给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大？
➢ 解决方法 ① ：手动内减
• 操作：自己计算多余大小，手动在内容中减去
• 缺点：项目中计算量太大，很麻烦
➢ 解决方法 ② ：自动内减
• 操作：给盒子设置属性 box-sizing : border-box ; 即可
• 优点：浏览器会自动计算多余大小，自动在内容中减去
5.1 外边距（margin）- 取值（与border 和padding类似 ）
➢ 作用：设置边框以外，盒子与盒子之间的距离
➢ 属性名：margin
➢ 应用：
版心居中
margin: 0 auto; (浏览器首先获取到屏幕的宽度-设置盒子的宽度 ) /2(自动分配给盒子左右外边距)
5.3外边距正常情况
➢ 场景：水平布局 的盒子，左右的margin正常，互不影响
➢ 结果：最终两者距离为左右margin的和
5.4 外边距折叠现象 – ① 合并现象
➢ 场景：垂直布局 的 块级元素，上下的margin会合并
➢ 结果：最终两者距离为margin的最大值
➢ 解决方法：避免就好
• 只给其中一个盒子设置margin即可
5.4 外边距折叠现象 – ② 塌陷现象
➢ 场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上
➢ 结果：导致父元素一起往下移动
➢ 解决方法：
- 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
~2. 给父元素设置overflow：hidden
-
转换成行内块元素
-
设置浮动
5.5 行内元素的margin和padding无效情况
➢ 场景：给行内元素设置margin和padding时
➢ 结果：
-
水平方向的margin和padding布局中有效！
-
垂直方向的margin和padding布局中无效！ ➢ 解决方法： 1.display:inline-block 2.加line-height
