css基础

css基础

01基础选择器+字体文本相关样式

一、基础认知

1.2 放在哪里？

style标签中，在head里面，title下面

p{
    color: red;
    font-size: 30px;
    background-color: green;
    width: 400px;
    height: 400px;
}

2.1 CSS引入方式

• 内嵌式：< style >标签
• 外联式：< link >标签（单标签）
• 行内式：style = " "

二、基础选择器

1. 标签选择器

• 结构：标签名{css属性名:属性值；}
• 注意点：
  1. 标签选择器选择的式一类标签，不是单独某一个
  2. 标签选择器无论嵌套关系有多深，都能找到对应的标签

2.类选择器

• 结构：.类名{ css属性名：属性值；}
• 注意点：
  1. 所有标签上都有class属性，class属性的属性值称为类名(类似于名字)
  2. 类名可以由数字、字母、下划线、中划线组成，但是不能以数字或者中划线开头
  3. 一个标签可以同时有多个类名，类名之间可以用空格隔开
  4. 类名可以重复，一个类选择器可以同时选中多个标签

3. id选择器

• 结构：#id属性值{ css属性名:属性值； }
• 注意点
  1. 所有标签上都有id属性
  2. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
  3. 一个标签上只能有一个id属性值
  4. 一个id选择器只能选中一个标签

4. 通配符选择器

• 结构：*{ css 属性名：属性值；}
• 作用： 找到页面中所有的标签，设置样式
• 注意点：
  1. 开发中使用极少，只会在极特殊情况下才会用到
  2. 一般用于去除标签默认的margin和padding

三、字体和文本样式

学习路径：

1. 字体样式
   • 字体大小：font-size
   • 字体粗细：font-weight
   • 字体样式：font-style
   • 字体类型：font-family
   • 字体类型：font属性连着写
2. 字体样式
3. line-height行高

1.1 字体大小

• 属性名：font-size
• 取值：数字+px
• 注意点：
  • 谷歌默认16px
  • 没有单位无效

1.2 字体粗细

• 属性名：font-weight
• 取值：
  • 关键字：正常-normal 加粗-bold
  • 纯数字：100~900的整百数 正常：400 加粗：700
• 注意点：
  • 不是所有字体都能够提供给9种粗细，部分数值在页面种无变化
  • 实际开发中：正常，加粗取值最多

1.3 字体样式（是否倾斜）

• 属性名： font-style
• 取值：
  • 正常（默认值）：normal
  • 倾斜：italic

1.4 常见的字体系列

• 无衬线字体
• 衬线字体
• 等宽字体

1.5 字体系列 font-family

• 属性名：font-family
• 渲染规则：依次查找，直到找到为止

1.6 样式的层叠问题

• 相同属性后面的样式覆盖前面的样式

• css 层叠样式表

1.7 字体font 相关属性连写

• 属性名：font(符合属性)

• 取值：font: style weight size family

• 省略要求：只能省略前两个，省略则默认

2.1 文本缩进

• 属性名：text-indent
• 取值：
  • 数字+px
  • 数字+em (推荐：1em = 当前标签的font-size的大小)

2.2 文本水平对齐方式

• 属性名：text-align
• 取值：left center right
• 注意点：如果让文本书评居中，text-align属性给文本所在标签（文本的父元素）设置
• 能够让哪些元素水平居中：
  1. 文本
  2. span标签、a标签
  3. input标签、img标签

2.3 文本修饰

• 属性名：text-decoration
• 取值：underline -下划线 line-through - 删除线 overline - 上划线 none - 无装饰线
• 注意点：none清楚a标签默认下划线

3.1 行高

• 作用：控制一行的上下行间距
• 属性名：line-height
• 取值：
  • 数字+px
  • 倍数（当前标签font-size的倍数）
• 应用
  1. 让单行文本垂直居中可以设置 line-height : 文字父元素高度
  2. 网页精准布局时，会设置 line-height : 1 可以取消上下间距
• 行高与font连写的注意点：
  • 如果同时设置了行高和font连写，注意覆盖问题
  • font : style weight size/line-height family

四、Chrome调试工具

拓展

颜色常见取值：颜色、背景

颜色常见取值(了解)

标签水平居中方法总结 margin: 0 auto

02 选择器进阶+背景属性+元素显示模式+三大特性

一、 选择器进阶

1. 复合选择器
2. 并集选择器
3. 交集选择器
4. hover伪类选择器
5. Emmet语法

1.1 后代选择器：空格

• 选择器语法：选择器1 选择器2 { CSS }
• 在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式

1.2 子代选择器：>

• 选择器语法：选择器1 > 选择器2 { css }
• 在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式

2.1 并集选择器 ：,

• 选择器语法：选择器1 ， 选择器2 { css }
• 找到 选择器1 和 选择器2 选中的标签，设置样式
• 注意点：
  1. 找到 选择器1 和 选择器2 选中的标签，设置样式
  2. 并集选择器中的每组选择器通常一行写一个，提高代码的可读性

3.1 交集选择器：紧挨着

• 选择器语法：选择器1选择器2 { css }
• （既又原则）找到页面中 既 能被选择器1选中，又 能被选择器2选中的标签，设置样式
• 注意点：交集选择器中如果有标签选择器，标签选择器必须写在最前面

4.1 hover伪类选择器

• 作用：选中鼠标悬停在元素上的状态，设置样式
• 选择器语法：选择器：hover {css}
• 注意点：伪类选择器选中的元素的某种状态

5.1 emmt语法：vscode快速生成代码

总结：

二、背景相关属性

1. 背景颜色
2. 背景图片
3. 背景平铺
4. 背景位置
5. 背景相关属性连写

1.1 背景颜色

• 属性名：background-color（bgc）
• 属性值： 颜色取值：关键字、rgb表示法、rgba表示法、十六进制……
• 注意点：
  1. 背景颜色默认值是透明： rgba(0,0,0,0) 、transparent
  2. 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

2.1 背景图片

• 属性值：background-image（bgi）

• 属性值：

• 注意点：

  1. 背景图片中url中可以省略引号
  2. 背景图片默认是在水平和垂直方向平铺的
  3. 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

3.1 背景平铺

• background-repeat（bgr）
• 属性值：

4.1 背景位置

• 属性名：background-position（bgp）

• 属性值：
  

• 注意点：方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

5.1 背景相关属性的连写形式

6.1 （拓展）img标签和背景图片的区别

• 需求：需要在网页中展示一张图片的效果？
• 方法一：直接写上img标签即可
  • img标签是一个标签，不设置宽高默认会以原尺寸显示
• 方法二：div标签 + 背景图片
  • 需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标

三、元素显示模式

1. 块级元素
2. 行内元素
3. 行内块元素
4. 元素显示模式转换

1.1 块级元素

• 显示特点：
  1. 独占一行（一行只能显示一个）
  2. 宽度默认是父元素的宽度，高度默认由内容撑开
  3. 可以设置宽高
• 代表标签：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

2.1 行内元素

• 显示特点：
  1. 一行可以显示多个
  2. 宽度和高度默认由内容撑开
  3. 不可以设置宽高
• 代表标签：a、span 、b、u、i、s、strong、ins、em、del……

3.1 行内块元素

• 显示特点：
  1. 一行可以显示多个
  2. 可以设置宽高
• 代表标签：
  1. input、textarea、button、select……
  2. 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

4.1 元素显示模式转换

• 目的：改变元素默认的显示特点，让元素符合布局要求
• 语法：
  

拓展1：HTML嵌套规范注意点

1. 块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等……
   • 但是：p标签中不要嵌套div、p、h等块级元素
2. a标签内部可以嵌套任意元素
   • 但是：a标签不能嵌套a标签

拓展2：居中方法总结

四、CSS特性

1. 继承性
2. 层叠性

1.1 继承性的介绍

• 特性：子元素有默认继承父元素样式的特点（子承父业）
• 可以继承的常见属性(文字控制属性都可以继承)
  1. color
  2. font-style、font-weight、font-size、font-family
  3. text-indent、text-align
  4. line-height
  5. ……
• 注意点：可以通过调试工具判断样式是否可以继承

(拓展) 继承的应用

• 好处：可以在一定程度上减少代码
• 常见应用场景：
  1. 可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式
  2. 直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小

（拓展）继承失效的特殊情况

• 如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
• a标签的color会继承失效：其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
• h系列标签的font-size会继承失效：其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了

2.1 层叠性的介绍

• 特性：
  1. 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
  2. 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
• 注意点：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

总结：

03 CSS三大特性+ PxCook的基本使用+盒子模型

一、CSS三大特性

学习路径

1. 继承性
2. 层叠性
3. 优先级

3.1 优先级的介绍

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

3.2 权重叠加计算

• 场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
• 权重叠加计算公式：（每一级之间不存在进位）
  
• 比较规则：
  1. 先比较第一级数字，如果比较出来了，之后的统统不看
  2. 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
  3. 如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!）
• 注意点：!important如果不是继承，则权重最高，天下第一！

(拓展)权重叠加计算案例

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

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

二、PxCook的基本使用

目标：能够使用 PxCook 工具测量设计图的 尺寸 和 颜色 ，能够从psd文件中直接获取数据

学习路径：

1. 打开设计图
2. 常用快捷键
3. 从psd文件中直接获取数据

1. PxCook的基本使用

1. 通过软件打开设计图
   ① 打开软件 ② 拖拽入设计图 ③ 新建项目
2. 常用快捷键
   1. 放大设计图：ctrl + +
   2. 缩小设计图：ctrl + -
   3. 移动设计图：空格按住不放，鼠标拖动
3. 常用工具
   1. 量尺寸
   2. 吸颜色
4. 从psd文件中直接获取数据
   1. 切换到开发界面，直接点击获取数据

三、盒子模型

目标：能够认识 盒子模型的组成 ，能够掌握盒子模型 边框、内边距、外边距 的设置方

学习路径：

1. 盒子模型的介绍
2. 内容区域的宽度和高度
3. 边框（ border ）
4. 内边距（ padding ）
5. 外边距（margin）

1.1 盒子模型的介绍

1. 盒子的概念
   1. 页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局
   2. 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子
2. 盒子模型
   • CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（ margin）构成，这就是 盒子模型
3. 记忆：可以联想现实中的包装盒
   

2.1 内容的宽度和高度

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

3.1 边框（border）- 单个属性

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

3.2 边框（border）- 连写形式

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

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

• 场景：只给盒子的某个方向单独设置边框
• 属性名：border - 方位名词（top/right/bottom/left）
• 属性值：连写的取值

3.4 盒子实际大小初级计算公式

• 需求：盒子尺寸 400*400，背景绿色，边框10px 实线 黑色，如何完成？
  • 注意点： ① 设置width和height是内容的宽高！② 设置border会撑大盒子！
• 盒子实际大小初级计算公式：
  • 盒子宽度 = 左边框 + 内容宽度 + 右边框
  • 盒子高度 = 上边框 + 内容高度 + 下边框
• 解决：当盒子被border撑大后，如何满足需求？
  • 解决：计算多余大小，手动在内容中减去（手动内减）

4.1 内边距（padding）- 取值

• 作用：设置 边框 与 内容区域 之间的距离
• 属性名：padding
• 常见取值：
  
• 记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！

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

• 场景：只给盒子的某个方向单独设置内边距
• 属性名：padding - 方位名词 （top/right/bottom/left）
• 属性值：数字 + px

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

• 需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
  • 注意点：① 设置width和height是内容的宽高！② 设置border会撑大盒子 ③ 设置padding会撑大盒子
• 盒子实际大小终极计算公式：
  • 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
  • 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
• 解决：当盒子被border和padding撑大后，如何满足需求？
  • 自己计算多余大小，手动在内容中减去（手动内减）

（拓展）不会撑大盒子的特殊情况

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

4.5 CSS3盒模型（自动内减）

• 需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
  • 给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大？
• 解决方法 ① ：手动内减
  • 操作：自己计算多余大小，手动在内容中减去
  • 缺点：项目中计算量太大，很麻烦
• 解决方法 ② ：自动内减
  • 操作：给盒子设置属性 box-sizing : border-box ; 即可
  • 优点：浏览器会自动计算多余大小，自动在内容中减去

5.1 外边距（margin）- 取值

• 作用：设置边框以外，盒子与盒子之间的距离
• 属性名：margin
• 常见取值：
  
• 记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！

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

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

5.3 margin单方向设置的应用

5.4 清除默认内外边距

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

5.6 外边距正常情况

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

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

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

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

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

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

• 场景：给行内元素设置margin和padding时
• 结果：
  1. 水平方向的margin和padding布局中有效！
  2. 垂直方向的margin和padding布局中无效

04 CSS布局浮动：结构伪类选择器+伪元素+标准流+浮动+清除浮动

一、结构伪类选择器

目标：能够使用 结构伪类选择器 在HTML中定位元素

1. 作用与优势：
   1. 作用：根据元素在HTML中的结构关系查找元素
   2. 优势：减少对于HTML中类的依赖，有利于保持代码整洁
   3. 场景：常用于查找某父级选择器中的子元素
2. 选择器
   

• n的注意点：

1. n为：0、1、2、3、4、5、6、……
2. 通过n可以组成常见公式
   

（了解）nth-of-type结构伪类选择器

• 选择器：
  
• 区别：
  • :nth-child → 直接在所有孩子中数个数
  • :nth-of-type → 先通过该 类型 找到符合的一堆子元素，然后在这一堆子元素中数个数

二、伪元素

目标：能够使用 伪元素 在网页中创建内容

• 伪元素：一般页面中的非主体内容可以使用伪元素

• 区别：

  1. 元素：HTML 设置的标签
  2. 伪元素：由 CSS 模拟出的标签效果

• 种类：
  

• 注意点：

  1. 必须设置content属性才能生效
  2. 伪元素默认是行内元素

• 伪元素的必加属性是？

  • content属性

• 伪元素创建出来后默认的显示模式是？

  • 行内元素

三、标准流

** 目标：能够认识 标准流 的默认排布方式及其特点**

• 标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
• 常见标准流排版规则：
  1. 块级元素：从上往下，垂直布局，独占一行
  2. 行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行

四、浮动

目标：能够认识使用 浮动的作用，了解 浮动的特点

1.1 浮动的作用

2.1 浮动的代码

• 属性名：float
• 属性值：
  

3.1 浮动的特点

1. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
   • 相当于从地面飘到了空中
2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素，（不能覆盖文字）
3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4. 浮动元素有特殊的显示效果
   • 一行可以显示多个
   • 可以设置宽高

• 注意点：
  • 浮动的元素不能通过text-align:center或者margin:0 auto

书写网页导航步骤：

1. 清除默认的margin和padding
2. 找到ul，去除小圆点
3. 找到li标签，设置浮动让li一行中显示
4. 找到a标签，设置宽高 → a标签默认是行内元素，默认不能设置宽高？？
   • 方法一：给a标签设置 display : inline-block
   • 方法二：给a标签设置 display : block
   • 方法三：给a设置 float : left

五、清除浮动

目标：能够认识 清除浮动的目的，并且能够使用 清除浮动的方法

1. 清除浮动的介绍
2. 清除浮动的方法

1.1 清除浮动的介绍

• 含义：清除浮动带来的影响
  • 影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
• 原因：
  • 子元素浮动后脱标 → 不占位置
• 目的：
  • 需要父元素有高度，从而不影响其他网页元素的布局

2.1 清除浮动的方法 — ① 直接设置父元素高度

• 特点：
  • 优点：简单粗暴，方便
  • 缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块

2.2 清除浮动的方法 — ② 额外标签法

• 操作：
  1. 在父元素内容的最后添加一个块级元素
  2. 给添加的块级元素设置 clear:both
• 特点：
  • 缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

2.3 清除浮动的方法 — ③ 单伪元素清除法

• 操作：用伪元素替代了额外标签
  ① ：基本写法
  
  ② ：补充写法
  

2.4 清除浮动的方法 — ④ 双伪元素清除法

• 操作：
  
• 特点/优点：项目中使用，直接给标签加类即可清除浮动

2.5 清除浮动的方法 — ⑤ 给父元素设置overflow : hidden

• 操作：
  1. 直接给父元素设置 overflow : hidden
• 特点：
• 优点：方便

（拓展补充）BFC的介绍

总结：

05 CSS布局：定位+装饰+选择器拓展

一、定位

目标：能够说出 定位 的常见应用场景，并且能够说出 不同定位方式 的特点

学习路径：

1. 定位的基本介绍
2. 定位的基本使用
3. 静态定位
4. 相对定位
5. 绝对定位
6. 子绝父相
7. 固定定位
8. 元素的层级关系

一、定位

1.1 网页常见布局方式

1. 标准流
   1. 块级元素独占一行 → 垂直布局
   2. 行内元素/行内块元素一行显示多个 → 水平布局
2. 浮动
   1. 可以让原本垂直布局的 块级元素变成水平布局
3. 定位
   1. 可以让元素自由的摆放在网页的任意位置
   2. 一般用于 盒子之间的层叠情况

1.2 定位的常见应用场景

1. 可以解决盒子与盒子之间的层叠问题
   • 定位之后的元素层级最高，可以层叠在其他盒子上面
2. 可以让盒子始终固定在屏幕中的某个位置

2.1 定位初体验

1. 需求：页面中两个盒子，要求完成图片的效果，可以如何完成？
   • 针对于盒子与盒子之间的层叠问题，推荐使用定位完成！

2.2 使用定位的步骤

1. 设置定位方式
   • 属性名：position
   • 常见属性值：
     
2. 设置偏移值
   • 偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
   • 选取的原则一般是就近原则 （离哪边近用哪个）
     

3.1 静态定位

• 介绍：静态定位是默认值，就是之前认识的标准流。
• 代码：position:static;
• 注意点：
  1. 静态定位就是之前标准流，不能通过方位属性进行移动
  2. 之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定

4.1 相对定位

• 介绍：自恋型定位，相对于自己之前的位置进行移动
• 代码：position:relative;
• 特点：
  1. 需要配合方位属性实现移动
  2. 相对于自己原来位置进行移动
  3. 在页面中占位置 → 没有脱标
• 应用场景：
  1. 配合绝对定位组CP（子绝父相）
  2. 用于小范围的移动

5.1 绝对定位

• 介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动
• 代码：position:absolute;
• 特点：
  1. 需要配合方位属性实现移动
  2. 默认相对于浏览器可视区域进行移动
  3. 在页面中不占位置 → 已经脱标
• 应用场景：
  1. 配合绝对定位组CP（子绝父相）

5.2 绝对定位到底相对于谁进行偏移

• 绝对定位相对于谁移动？
  1. 祖先元素中没有定位 → 默认相对于浏览器进行移动
  2. 祖先元素中有定位 → 相对于 最近的 有定位 的祖先元素进行移动

6.1 子绝父相介绍

• 场景：让子元素相对于父元素进行自由移动
• 含义：
  • 子元素：绝对定位
  • 父元素：相对定位
• 子绝父相好处：
  • 父元素是相对定位，则对网页布局影响最小

（拓展） 子绝父绝特殊场景

• 场景：在使用子绝父相的时候，发现父元素已经有绝对定位了，此时直接子绝即可！
• 原因：
  • 父元素已经有定位已经满足要求，如果盲目修改父元素定位方式，可能会影响之前写好的布局

（案例）子绝父相水平居中案例-解决方法

1. 子绝父相
2. 先让子盒子往右移动父盒子的一半
   • left：50%
3. 再让子盒子往左移动自己的一半
   • 普通做法：margin-left：负的子盒子宽度的一半
     • 缺点：子盒子宽度变化后需要重新改代码
   • 优化做法：transform：translateX(-50%)
     • 优点：表示沿着X轴负方向（往左）始终移动自己宽度的一半，子盒子宽度变化不需要更改代码
4. 让子盒子往左+往上走自己的一半
   • transform：translate(-50%，-50%)；

7.1 固定定位

• 介绍：死心眼型定位，相对于浏览器进行定位移动
• 代码：position:fixed;
• 特点：
  1. 需要配合方位属性实现移动
  2. 相对于浏览器可视区域进行移动
  3. 在页面中不占位置 → 已经脱标
• 应用场景：
  1. 让盒子固定在屏幕中的某个位置

总结：

8.1 元素层级问题

• 不同布局方式元素的层级关系：
  • 标准流 < 浮动 < 定位
• 不同定位之间的层级关系：
  • 相对、绝对、固定默认层级相同
  • 此时HTML中写在下面的元素层级更高，会覆盖上面的元素

8.2 更改定位元素的层级

• 场景：改变定位元素的层级
• 属性名：z-index
• 属性值：数字
  • 数字越大，层级越高

二、装饰

目标：能够完成元素的装饰效果

学习路径：

1. 垂直对齐方式
2. 光标类型
3. 边框圆角
4. overflow溢出部分显示效果
5. 元素本身隐藏

1.1 认识基线（了解）

• 基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）

1.2 文字对齐问题

• 场景：解决行内/行内块元素垂直对齐问题
• 问题：当图片和文字在一行中显示时，其实底部不是对齐的
  

1.3 垂直对齐方式

• 属性名：vertical-align
• 属性值：
  

（拓展）项目中 vertical-align 可以解决的问题

1. 文本框和表单按钮无法对齐问题
2. input和img无法对齐问题
3. div中的文本框，文本框无法贴顶问题
4. div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
5. 使用line-height让img标签垂直居中问题

• 注意点：
  • 学习浮动之后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题
  • 推荐优先使用浮动完成效果

2.1 光标类型

• 场景：设置鼠标光标在元素上时显示的样式
• 属性名：cursor
• 常见属性值：
  

3.1 边框圆角

• 场景：让盒子四个角变得圆润，增加页面细节，提升用户体验
• 属性名：border-radius
• 常见取值：数字+px 、百分比
• 原理：
  
• 赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！

3.2 边框圆角的常见应用

• 画一个正圆：
  1. 盒子必须是正方形
  2. 设置边框圆角为盒子宽高的一半 → border-radius:50%
• 胶囊按钮：
  1. 盒子要求是长方形
  2. 设置 → border-radius：盒子高度的一半
     

4.1 溢出部分显示效果

• 溢出部分：指的是盒子 内容部分 所超出盒子范围的区域
• 场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……
• 属性名：overflow
• 常见属性值：
  

5.1 元素本身隐藏

• 场景：让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏
• 常见属性：
  1. visibility：hidden
  2. display：none
• 区别：
  1. visibility：hidden 隐藏元素本身，并且在网页中 占位置
  2. display：none 隐藏元素本身，并且在网页中 不占位置
• 注意点：
  • 开发中经常会通过 display属性完成元素的显示隐藏切换
  • display：none；（隐藏）、 display：block；（显示）

（拓展）元素整体透明度

• 场景：让某元素整体（包括内容）一起变透明
• 属性名：opacity
• 属性值：0~1之间的数字
  • 1：表示完全不透明
  • 0：表示完全透明
• 注意点：
  • opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……

（拓展）边框合并

• 场景：让相邻表格边框进行合并，得到细线边框效果
• 代码：border-collapse：collapse
  

（拓展）用CSS画三角形技巧（面试题）

• 场景：在网页中展示出小三角形时，除了可以使用图片外，还可以使用代码完成。
• 实现原理：
  • 利用盒子边框完成
• 实现步骤：
  1. 设置一个盒子
  2. 设置四周不同颜色的边框
  3. 将盒子宽高设置为0，仅保留边框
  4. 得到四个三角形，选择其中一个后，其他三角形（边框）设置颜色为透

• 拓展：通过调整不同边框的宽度，可以调整三角形的形态
  

三、选择器拓展

1.1 链接伪类选择器

• 场景：常用于选中超链接的不同状态
• 选择器语法：
  
• 注意点：
  • 如果需要同时实现以上四种伪类状态效果，需要按照 LVHA 顺序书写
    记忆口诀：男盆友送了你一个 LV 包包，你开心的 HA 哈笑
  • 其中 :hover伪类选择器 使用更为频繁，常用于选择各类元素的悬停状态

2.1 焦点伪类选择器

• 场景：用于选中元素获取焦点时状态，常用于表单控件
• 选择器语法：

input:focus{
	background-color:skyblue;
}

• 效果：表单控件获取焦点时默认会显示外部轮廓线

3.1 属性选择器

• 场景：通过元素上的HTML属性来选择元素，常用于选择 input 标签
• 选择器语法：
  
  

总结：