一、定位

1、网页常见布局方式

1. 1标准流

1. 块级元素独占一行 → 垂直布局

2. 行内元素/行内块元素一行显示多个 → 水平布局

1.2 浮动

1. 可以让原本垂直布局的 块级元素变成水平布局

1.3 定位

1. 可以让元素自由的摆放在网页的任意位置

2. 一般用于 盒子之间的层叠情况

1.4 定位的常见应用场景

①  可以解决盒子与盒子之间的层叠问题

定位之后的元素层级最高，可以层叠在其他盒子上面

②  可以让盒子始终固定在屏幕中的某个位置

1.5 使用定位的步骤

①  设置定位方式

属性名：position

常见属性值：

②  设置偏移值

偏移值设置分为两个方向，水平和垂直方向各选一个使用即可

选取的原则一般是就近原则 （离哪边近用哪个）

1.6 静态定位

介绍：静态定位是默认值，就是之前认识的标准流。

注意点：

1. 静态定位就是之前标准流，不能通过方位属性进行移动

2. 之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定

1.7 相对定位

介绍：自恋型定位，相对于自己之前的位置进行移动

特点：

1. 需要配合方位属性实现移动

2. 相对于自己原来位置进行移动

3. 在页面中占位置 → 没有脱标

应用场景：

1. 配合绝对定位组CP（子绝父相）

2. 用于小范围的移动

1.8 绝对定位

介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动

特点：

1. 需要配合方位属性实现移动

2. 默认相对于浏览器可视区域进行移动

3. 在页面中不占位置 → 已经脱标

应用场景：

1. 配合绝对定位组CP（子绝父相）

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

绝对定位相对于谁移动？

1. 祖先元素中没有定位 → 默认相对于浏览器进行移动

2. 祖先元素中有定位 → 相对于 最近的 有定位 的祖先元素进行移动

1.9 子绝父相介绍

场景：让子元素相对于父元素进行自由移动

含义：

子元素：绝对定位

父元素：相对定位

子绝父相好处：

父元素是相对定位，则对网页布局影响最小

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

场景：在使用子绝父相的时候，发现父元素已经有绝对定位了，此时直接子绝即可！

原因：

父元素已经有定位已经满足要求，如果盲目修改父元素定位方式，可能会影响之前写好的布局

使用子绝父相水平居中的操作是什么？

使用子绝父相水平垂直居中的操作是什么？

1.10 固定定位

介绍：死心眼型定位，相对于浏览器进行定位移动

特点：

1. 需要配合方位属性实现移动

2. 相对于浏览器可视区域进行移动

3. 在页面中不占位置 → 已经脱标

应用场景：

1. 让盒子固定在屏幕中的某个位置

1.11 元素层级问题

不同布局方式元素的层级关系：

标准流 < 浮动 < 定位

➢ 不同定位之间的层级关系：

相对、绝对、固定默认层级相同

此时HTML中写在下面的元素层级更高，会覆盖上面的元素

1.12 更改定位元素的层级

场景：改变定位元素的层级

属性名：z-index

属性值：数字

数字越大，层级越高

二、装饰

1、认识基线（了解）

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

2、文字对齐问题

场景：解决行内/行内块元素垂直对齐问题

问题：当图片和文字在一行中显示时，其实底部不是对齐的

3、垂直对齐方式

属性名：vertical-align

属性值：

4、光标类型

场景：设置鼠标光标在元素上时显示的样式

属性名：cursor

常见属性值：

5、边框圆角

场景：让盒子四个角变得圆润，增加页面细节，提升用户体验

属性名：border-radius

常见取值：数字+px 、百分比

赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！

边框圆角的常见应用

画一个正圆：

1. 盒子必须是正方形

2. 设置边框圆角为盒子宽高的一半 → border-radius:50%

胶囊按钮：

1. 盒子要求是长方形

2. 设置 → border-radius：盒子高度的一半

6、溢出部分显示效果

溢出部分：指的是盒子 内容部分 所超出盒子范围的区域

场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……

属性名：overflow

常见属性值：

7、元素本身隐藏

场景：让某元素本身在屏幕中不可见。如：鼠标: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；

三、选择器拓展

1、链接伪类选择器

场景：常用于选中超链接的不同状态

选择器语法：

注意点：

如果需要同时实现以上四种伪类状态效果，需要按照 LVHA 顺序书写

记忆口诀：男盆友送了你一个 LV 包包，你开心的 HA 哈笑

其中 :hover伪类选择器 使用更为频繁，常用于选择各类元素的悬停状态

2、焦点伪类选择器

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

选择器语法：

input:focus {
    background-color: skyblue;
}

效果：

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

3、属性选择器

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

选择器语法：

一、项目样式补充

1、精灵图的介绍

场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图

优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度

例如：需要在网页中展示8张小图片

8张小图片分别发送 → 发送8次

合成一张精灵图发送 → 发送1次

精灵图的优点是什么？

减少服务器发送次数，减轻服务器的压力，提高页面加载速度

2、精灵图的使用步骤

1. 创建一个盒子

2. 通过PxCook量取小图片大小，将小图片的宽高设置给盒子

3. 将精灵图设置为盒子的背景图片

4. 通过PxCook测量小图片左上角坐标，分别取 负值 设置给盒子的background-position：x y

3、背景图片大小

作用：设置背景图片的大小，

语法： background-size：宽度 高度；

取值：

4、background连写拓展

完整连写：

background: color image repeat position/size;

注意点：

background-size和background连写同时设置时，需要注意覆盖问题

解决：

1. 要么单独的样式写连写的下面

2. 要么单独的样式写在连写的里面

5、文字阴影

作用：给文字添加阴影效果，吸引用户注意

属性名： text-shadow

取值：

6、盒子阴影

作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节

属性名： box-shadow

取值：

7、过渡

作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验

属性名： transition

常见取值：