前端学习（7月16日——7月19日）

学习目标：

• 7月16日： VS实操练习
• 7月17日：P44—P53
• 7月18日：P54—P69
• 7月19日：笔记整理

---

学习内容：

（二）、复合选择器、CSS特性、背景属性、显示模式

1、复合选择器

• 定义：由两个或多个基础选择器，通过不同的方式组合而成
• 作用：更准确、更高效的选择目标元素（标签）
• 后代选择器：选中某元素的后代元素
  • 写法：父选择器 子选择器{CSS属性}，父子选择器之间用空格隔开
• 子代选择器：选中某元素的子代元素（最近的子级）
  • 选择器写法：父选择器>子选择器{CSS属性}，父子选择器之间用>隔开
• 并集选择器：选中多组标签设置相同的样式
  • 选择器写法：选择器1，选择器2，…，选择器n{CSS属性}，选择器之间用，隔开
• 交集选择器：选中同时满足多个条件的元素
  • 选择器写法：选择器1选择器2{CSS属性}，选择器之间连写，没有任何符号
  • 注意：如果交集选择器中有标签选择器，标签选择器必须书写在最前面
• 伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式
  • 鼠标悬停状态：选择器：hover（CSS属性）
• 伪类-超链接
  

2、CSS特性

简化代码/定位问题，并解决问题

• 继承性：子级默认继承父级的文字控制属性
  • 如果标签自己有样式则生效自己的样式，不继承
• 层叠性
  • 特点
    • 相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性
    • 不同的属性会叠加：不同的CSS属性都生效
• 优先级（权重）：当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则
  • 规则：选择器优先级高的样式生效
  • 公式：通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
    • 选中标签的范围越大，优先级越低
    • ! important提权功能，提高权重/优先级别 最高，慎用
  • 叠加计算规则
    • 叠加计算：如果是复合选择器，则需要权重叠加计算
    • 公式：（每一级之间不存在进位）
      （行内样式， id 选择器个数， 类选择器个数， 标签选择器个数）
    • 规则
      • 从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较
      • ! important权重最高
      • 继承权重最低

3、Emmet写法

代码的简写方式，输入缩写VS Code会自动生成对应的代码

• HTML

• CSS：大多数简写方式为属性单词的首字母

4、背景属性

• 背景图
  • 属性值：url（背景图URL）
• 背景图平铺方式(bgr)
  • 属性值
• 背景图位置（bgp）
  • 属性值：水平方向位置 垂直方向位置
    
• 背景图缩放（bgz）
  • 属性值
• 背景图固定（bga）
  • 属性值：fixed
• 背景复合属性（bg）
  • 属性值：背景色 背景图背景平铺方式 背景图位置/背景图缩放 背景图固定（空格隔开各属性值，不区分顺序）

5、显示模式

• 块级元素
  • 独占一行
  • 宽度默认是父级的100%
  • 添加宽高属性生效
• 行内元素
  • 一行可以显示多个
  • 设置宽高属性不生效
  • 宽高尺寸由内容撑开
• 行内块元素
  • 一行可以显示多个
  • 设置宽高属性生效
  • 宽高尺寸也可以由内容撑开
• 转换显示模式
  • 属性名：display
  • 属性值
    

（三）、选择器、PxCook软件、盒子模型

1、选择器

• 结构伪类选择器
  • 作用：根据元素的结构关系查找元素
    
  • :nth-child(公式)
    • 作用：根据元素的结构关系查找多个元素
• 伪元素选择器
  • 作用：创建虚拟元素（伪元素），用来摆放装饰性的内容

必须设置content属性，没有content，伪元素选择器不生效

2、PxCook

PxCook（像素大厨）是一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别

• 开发面板（自动智能识别）
• 设计面板（手动测量尺寸和颜色）

3、盒子模型

• 组成
  • 作用：布局网页，摆放盒子和内容
  • 重要组成部分
    • 内容区域- width&height
    • 内边距- padding（出现在盒子边缘之间）
    • 边框线- border
    • 外边距- margin（出现在盒子外面）
• 边框线
  • 属性名：border（bd）
  • 属性值：边框线粗细 线条样式 颜色（不区分顺序）
    
  • 设置单方向边框线
    • 属性名：border-方位名词
    • 属性值：边框线粗细 线条样式 颜色（不区分顺序）
• 内边距
  • 作用：设置内容与盒子边缘之间的距离
  • 属性名：padding/padding-方位名词
  • 多值写法
    
• 尺寸计算
  • 默认情况
    盒子尺寸=内容尺寸+border尺寸+内边距尺寸
  • 结论：给盒子加border/padding会撑大盒子
  • 解决
    • 手动做减法：减掉border/padding的尺寸
    • 内减模式：box- sizing：border- box
• 外边距
  • 作用：拉开两个盒子之间的距离
  • 属性名：margin
  • 提示：与padding属性值写法、含义相同
  • 合并现象
    • 场景：垂直排列的兄弟元素，上下margin会合并
    • 现象：取两个margin中的较大值生效
  • 塌陷问题
    • 场景：父子级的标签，子级的添加上外边距会产生塌陷问题
    • 现象：导致父级一起向下移动
    • 解决方法
      
• 元素溢出
  • 属性名：overflow
  • 属性值
• 行内元素-内外边距问题
  • 场景：行内元素添加margin和padding，无法改变元素垂直位置
  • 解决方法：给行内元素添加line- height可以改变垂直位置
• 圆角
  • 作用：设置元素的外边框为圆角
  • 属性名：border- radius
  • 属性值：数字+px/百分比

记忆：从左上角顺时针赋值，没有取值的角与对角取值相同

• • 常见应用-正圆形状
    • 给正方形盒子设置圆角属性值为宽高的一半/50%
  • 常见应用胶囊形状
    • 给长方形盒子设置圆角属性值为盒子高度的一半
• 阴影
  • 作用：给元素设置阴影效果
  • 属性名：box- shadow
  • 属性值：X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影

注意：

• X轴偏移量和Y轴偏移量必须书写
  默认是外阴影，内阴影需要添加inset

---

学习时间：

• 7月16日上午10点——12点
• 7月17日上午 9 点—— 11 点
• 7月18日下午2点—— 6 点
• 7月19日晚上6点——10点

---

学习产出：

• CSDN 博客笔记1 篇