前端基础-CSS-第3篇

前端基础-CSS布局-第3篇

一、CSS三大特性

1.继承性

2.层叠性

3.优先级

3.1优先级介绍

• 特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
• 优先级公式：
  • 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
• 注意：
  • !important写在属性值的后面，分号的前面！
  • !important不能提升继承的优先级，只要是继承优先级最低！
  • 实际开发中不建议使用 !important

3.2权重叠加计算

• 场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效

• 权重叠加计算公式：（每一级之间不存在进位）

• 比较规则：

  • 先比较第一级数字，如果比较出来了，之后的统统不看
  • 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
  • 如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!）

• 注意：!important如果不是继承，则权重最高，天下第一！

3.3（拓展）权重叠加计算案例

• 权重计算题解题步骤：
  • 先判断选择器是否能直接选中标签，如果不能直接选中 → 是继承，优先级最低 → 直接pass
  • 通过权重计算公式，判断谁权重最高
• 注意：
  • 如果都是继承，先看当前标签的父标签样式
  • 实际开发中选择标签需要精准，尽量避免多个选择器同时选中一个标签的情况，不要自己难为自己

3.4（拓展）查错流程 （遇到样式出不来，要学会通过调试工具找错）

二、PxCook的基本使用

1.打开设计图

① 打开软件 ② 拖拽入设计图 ③ 新建项目

2.常用快捷键

• 放大设计图：ctrl + +
• 缩小设计图：ctrl + -
• 移动设计图：空格按住不放，鼠标拖动

3.常用工具

• 量尺寸
• 吸颜色

4.从psd文件中直接获取数据

• 切换到开发界面，直接点击获取数据

三、盒子模型

1.盒子模型介绍

• 盒子的概念

  • 页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局
  • 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子

• 盒子模型

  • CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin ）构成，这就是 盒子模型

• 记忆：可以联想现实中的包装盒

• 盒模型分类：

  • w3c盒模型：box-sizing:content-box;—手动内减
  • ie盒模型：box-sizing:border-box;—自动内减

2.内容区域的宽度和高度

• 作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小
• 属性：width / height
• 常见取值：数字+px

3.边框（border）

3.1边框（border）- 单个属性

• 作用：给设置边框粗细、边框样式、边框颜色效果

  作用	属性名	属性值
  边框粗细	border-width	数字+px
  边框样式	border-style	实线solid，虚线dashed，点线dotted
  边框颜色	border-color	颜色取值

3.2边框（border）- 连写形式

• 属性名：border
• 属性值：单个取值的连写，取值之间以空格隔开
  • 如：border : 10px solid red ；
• 快捷键：bd+tab

3.3边框（border）- 单方向设置

• 场景：只给盒子的某个方向单独设置边框
• 属性名：border - 方位名词
• 属性值：就是连写的取值

3.4新浪导航案例

• 布局顺序：
  • 从外往内，从上往下
• 每一个盒子的样式：
  • 宽高
  • 辅助的背景颜色
  • 盒子模型的部分：border、padding、margin
  • 其他样式：color、font-、text-、……

4.内边距（ padding ）

4.1 内边距（padding）- 取值

• 作用：设置 边框 与 内容区域 之间的距离
• 属性名：padding
• 常见取值：

取值	示例	含义
一个值	padding:10px;	上下左右都设置为10px
两个值	padding:10px 20px;	上下设为10px，左右20px
三个值	padding:10px 20px 30px;	上设为10px，左右20px，下30px
四个值	padding:10px 20px 30px 40px;	上10px，右20px，下30px，左40px

• 记忆规则：从上开始赋值，然后顺时针赋值，如果没有赋值的，看对面的！！

4.2 内边距（padding）- 单方向设置

• 场景：只给盒子的某个方向单独设置内边距
• 属性名：padding - 方位名词
• 属性值：数字 + p

4.3盒子实际大小终极计算公式

• 需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？

  • 注意点：① 设置width和height是内容的宽高！② 设置border会撑大盒子 ③ 设置padding会撑大

• 盒子实际大小终极计算公式：

  • 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
  • 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框

• 解决：当盒子被border和padding撑大后，如何满足需求

  • 自己计算多余大小，手动在内容中减去（手动内减）

4.4（案例） 新浪导航的优化

• 需求：优化之前的新浪导航，如果每个导航的字数增加，如何完成效果？
• 解决：将盒子的宽度删除（盒子宽度默认由内容撑开），然后给盒子设置padding左右值→调整左右字间距

4.5 CSS3盒模型（自动内减）

自动内减：

• 操作：给盒子设置属性 box-sizing : border-box ; 即可
• 优点：浏览器会自动计算多余大小，自动在内容中减去

5.外边距（margin）

5.1 外边距（margin）- 取值

• 作用：设置边框以外，盒子与盒子之间的距离
• 属性名：margin
• 常见取值： 同内边距
• 记忆规则： 同内边距

5.2 外边距（margin） - 单方向设置

• 场景：只给盒子的某个方向单独设置外边距
• 属性名：margin - 方位名词
• 属性值：数字 + px

5.3 margin单方向设置的应用

• 应用

  方向	属性	效果
  水平方向	margin-left	让当前盒子往右移动
  水平方向	margin-right	让右边的盒子往右移动
  垂直方向	margin-top	让当前盒子往下移动
  垂直方向	margin-bottom	让下面的盒子往下移动

5.4 清除默认内外边距

• 场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的 margin和padding，后续自己设置
  • 比如：body标签默认有margin：8px
  • 比如：p标签默认有上下的margin
  • 比如：ul标签默认由上下的margin和padding-left
• 解决方法：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9DXFF5Gs-1685112590006)(C:\Users\金柯\AppData\Local\Temp\1682938079610.png)]

5.6 外边距正常情况

• 场景：水平布局 的盒子，左右的margin正常，互不影响
• 结果：最终两者距离为左右margin的和

5.7 外边距折叠现象 – ① 合并现象

• 场景：垂直布局 的 块级元素，上下的margin会合并
• 结果：最终两者距离为margin的最大值
• 解决方法：避免就好—只给其中一个盒子设置margin即可

5.8 外边距折叠现象 – ② 塌陷现象

• 场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上
• 结果：导致父元素一起往下移动
• 解决方法：
  • 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top） ----也可以用伪元素分隔（如：双伪元素清除法）
  • 给父元素设置overflow：hidden
  • 转换成行内块元素
  • 设置浮动

5.9 行内元素的margin和padding无效情况

• 场景：给行内元素设置margin和padding时
• 结果：
  • 水平方向的margin和padding布局中有效！
  • 垂直方向的margin和padding布局中无效！
• 补充：
  • 垂直方向的padding虽布局无效，但其实本身是有效果的，只是不会撑开上下其他盒子，可应用在a标签hover状态加下划线的案例

5.10补充：不会撑大盒子的特殊情况

• 不会撑大盒子的特殊情况（块级元素）
  • 如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
    margin和padding时
• 结果：
  • 水平方向的margin和padding布局中有效！
  • 垂直方向的margin和padding布局中无效！
• 补充：
  • 垂直方向的padding虽布局无效，但其实本身是有效果的，只是不会撑开上下其他盒子，可应用在a标签hover状态加下划线的案例

5.10补充：不会撑大盒子的特殊情况

• 不会撑大盒子的特殊情况（块级元素）
  • 如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
  • 此时给子盒子设置左右的padding或者左右的border，不会撑大盒子