定位相关
定位的常见应用场景:
1,可以解决盒子与盒子之间的层叠问题,定位之后的元素层级最高，可以层叠在其他盒子上面
2,可以让盒子始终固定在屏幕中的某个位置
属性名：position
属性值:
relative相对定位 absolute绝对定位 fixed固定定位
块级元素 使用了定位（绝对和固定） 变成由内容撑开！
1，relative相对定位
介绍：自恋型定位，相对于自己之前的位置进行移动 特点：
1，需要配合方位属性实现移动 2，相对于自己原来位置进行移动 3，在页面中占位置 → 没有脱标
应用场景：
1，配合绝对定位组CP（子绝父相）
2，用于小范围的移动
2，absolute绝对定位
介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动 特点：
- 需要配合方位属性实现移动
- 默认相对于浏览器 可视区域 进行移动
- 在页面中不占位置 → 已经脱标 应用场景：
- 配合绝对定位组CP（子绝父相） ➢ 绝对定位相对于谁移动？
- 祖先元素中没有定位 → 默认相对于浏览器进行移动
- 祖先元素中有定位 → 相对于 最近的 有定位 的祖先元素进行移动
子绝父相介绍 ➢ 场景：让子元素相对于父元素进行自由移动 ➢ 含义： • 子元素：绝对定位 • 父元素：相对定位 ➢ 子绝父相好处： • 父元素是相对定位，则对网页布局影响最小 在使用子绝父相的时候，发现父元素已经有绝对定位了，此时直接子绝即可
3，fixed固定定位
➢ 介绍：死心眼型定位，相对于浏览器进行定位移动 ➢ 代码：position:fixed ➢ 特点：
- 需要配合方位属性实现移动
- 相对于浏览器可视区域进行移动
- 在页面中不占位置 → 已经脱标
- ➢ 应用场景：让盒子固定在屏幕中的某个位置
4，定位居中问题
1，子绝父相 水平居中 解决方法
(因为在绝对定位当中元素已经脱标,所以不能够再使用margin:0 auto 进行水平居中)
步骤：
子绝父相
1，先让子盒子往右移动父盒子的一半,
2，再让子盒子往左移动自己的一半
3，缺点：子盒子宽度变化后需要计算盒子宽度重新改代码
实现代码：
left：50%;
margin-left：负的子盒子宽度的一半;
2，子绝父相 垂直居中
top：50%;
margin-top：负的子盒子高度的一半;
5，水平 垂直 居中 优化做法：
水平居中
-
子绝父相
-
left：50%；
3.transform：translateX（-50%）/transform：translate（-50%）
translate()如果只给出一个值, 表示x轴方向移动距离
优点：表示沿着X轴负方向（往左）始终移动自己宽度的一半，子盒子宽度变化不需要更改代码
垂直居中
- 子绝父相
- top：50%
- transform：translateY（-50%）
子绝父相水平垂直都居中
top：50%
left：50%
transform：translate(-50%，-50%)；
6，元素的层级问题
➢ 不同布局方式元素的层级关系：
• 标准流 < 浮动 < 定位
➢ 不同定位之间的层级关系：
• 相对、绝对、固定默认层级相同
• 此时HTML中写在下面的元素层级更高，会覆盖上面的元素
➢更改定位元素的层级
场景：改变定位元素的层级
属性名：**z-index:数字;**
属性值：数字
数字越大，层级越高
文本装饰效果
1，基线问题
浏览器文字类型元素排版中存在用于对齐的基线（baseline）
场景：解决行内/行内块元素垂直对齐问题
问题：当图片和文字在一行中显示时，其实底部不是对齐的
垂直对齐方式 属性名：vertical-align 属性值:bottom middle top
2，项目中 vertical-align 可以解决的问题
1. 文本框和表单按钮无法对齐问题
2. input和img无法对齐问题
3. div中的文本框，文本框无法贴顶问题
4. div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
5. 使用line-height让img标签垂直居中问题
6. 取值top middle bottom
3，设置鼠标光标在元素上时显示的样式
属性名：cursor
属性值:
pointer 小手效果
text 工字型
move 十字光标
4，边框圆角
属性名：border-radius
常见取值：数字+px 、百分比
赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！
➢ 画一个正圆：
1. 盒子必须是正方形
2. 设置边框圆角为盒子宽高的一半 → border-radius:50%
➢ 胶囊按钮：
1. 盒子要求是长方形
2. 设置 → border-radius：盒子高度的一半
5，溢出部分显示效果
➢ 溢出部分：指的是盒子 内容部分 所超出盒子范围的区域
➢ 场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……
➢ 属性名：overflow
属性值:
overflow： hidden 溢出部分隐藏;
scroll 无论是否溢出都显示滚动条
auto 根据是否溢出,自动显示或者隐藏滚动条
6，元素本身隐藏
➢ 场景：让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏
➢ 常见属性：
1. visibility：hidden
2. display：none
➢ 区别：
1. visibility：hidden 隐藏元素本身，并且在网页中 占位置
2. display：none 隐藏元素本身，并且在网页中 不占位置
➢ 注意点：
• 开发中经常会通过 display属性完成元素的显示隐藏切换
• display：none；（隐藏）、 display：block；（显示）
7，（拓展）元素整体透明度
➢ 场景：让某元素整体（包括内容）一起变透明
➢ 属性名：opacity
➢ 属性值：0~1之间的数字
**• 1：表示完全不透明**
• 0：表示完全透明
➢ 注意点：
• opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……
8，（拓展）边框合并
➢ 场景：让相邻表格边框进行合并，得到细线边框效果
➢ 代码：border-collapse：collapse；
➢border-collapse：collapse；需要在table样式里面添加
table{
border: 1px solid;
border-collapse：collapse；}
9，链接伪类选择器
场景：常用于选中超链接的不同状态
a:link{} 选中a链接中 未被访问过 的状态;
a:visited{} 选中a链接中 访问之后 的状态;
a:hover{} 选中a链接中 鼠标悬停 的状态;
a:active{} 选中a链接中 鼠标按下 的状态;
10，焦点伪类选择器
格式:
类名:focus { }
场景：用于选中元素获取焦点时状态，常用于表单控件
input focus {
background-color:red;
}
(表单控件获取焦点时默认会显示外部轮廓线)
11，属性选择器
场景：通过元素上的HTML属性来选择元素，常用于选择 input 标签
选择器语法:
E[attr] 选择具有attr属性的E元素;
E[attr="val"] 选择具有attr属性并且属性值等于"val"的E元素;
精灵图
精灵图的介绍
Ø 场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
Ø 优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
Ø 例如：需要在网页中展示8张小图片 • 8张小图片分别发送 → 发送8次 • 合成一张精灵图发送 → 发送1次
(普通背景图只是一样图片，精灵图是由许多小图片合并成一张大图，通过位置找到需要的一小部分)
使用精灵图的步骤是什么？
1. 创建一个盒子
2. 设置 盒子大小 为 小图片大小
3. 设置精灵图为盒子的背景图片
4. 将小图片**左上角坐标 取负值**，设置给盒子的**background-position：x y**
1. ***(background-position:方位 left表示：向左侧移动自身宽度 right：向右侧移动自身宽度)***
span {
display: inline-block;
width: 24px;
height: 24px;
background-image: url("图片/taobao.png");
background-position: 0 0;
color: red;
}
阴影
文字阴影
Ø 作用：给文字添加阴影效果，吸引用户注意
Ø 属性名：text-shadow
Ø 取值：
h-shadow: 必须 水平偏移量，允许负值；
v-shadow: 必须 垂直偏移量，允许负值；
blur 可选，模糊度
color 可选，阴影颜色
盒子阴影
Ø 作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节
Ø 属性名：box-shadow
Ø 取值：
h-shadow: 必须 水平偏移量，允许负值；
v-shadow: 必须 垂直偏移量，允许负值；
blur 可选，模糊度
spread 可选，扩大阴影
color 可选，阴影颜色
inset 可选，将阴影改为内阴影
连写： x轴 y轴 模糊度 扩大 颜色 内阴影
box-shadow: 10px 20px 30px 40px red inset;
