定位：
1.标准流
1.块级元素独占一行->垂直布局
2.行内元素/行内块元素一行显示多个->水平布局
2.浮动
可以让原本垂直布局的 块级元素变成水平布局
3.定位
1.可以让元素自由的摆放在网页的任意位置
2.一般用于盒子之间的层叠情况
使用定位的步骤
1.设置定位的方式
属性名：position
常见属性值：
| 定位方式 | 属性值 |
| 静态定位 | static |
| 相对定位 | relative |
| 绝对定位 | absolute |
| 固定定位 | fixed |
设置偏移值
偏移值设置分为两个方向，水平和垂直方向格选一个使用即可
选取的原则一般是就近原则（离哪个近用哪个）
| 方向 | 属性名 | 属性值 | 含义 |
| 水平 | left | 数字+px | 距离左边的距离 |
| 水平 | right | 数字+px | 距离右边的距离 |
| 垂直 | top | 数字+px | 距离上边的距离 |
| 垂直 | bottom | 数字+px | 距离下边的距离 |
相对定位
介绍：自恋型定位，相对于自己之前的位置进行移动
代码：position ：relative；
特点：
1.需要配合方位属性实现移动
2.相对于自己原来的位置进行移动
3.在网页中占位置，没有脱标
没有改变标签的显示模式
应用场景：1.配合绝对定位组cp（子绝父相）
2.用于小范围移动
*如果left和right都有，以left为准，如果top和bottom都有，以top为准
绝对定位
介绍：拼爹型定位，相对于非静态定位的父元素进行定位
代码：position：absolute；
特点：
1.需要配合方位属性实现移动
2.默认相对于浏览器可视区移动
3.在页面中不占位置->已经脱标
改变标签的显示模式：具体行内块特点（在一行共存，宽高生效）
应用场景：1.配合绝对组cp（子绝父相）
绝对定位查找父级的方式：就近找定位的父级，如果逐层查找不到这样的父级，就以浏览器窗口为参照进行定位
注：1.绝对定位的盒子不能使用左右margin auto居中
left：50% 整个盒子移动到浏览器中间偏右的位置
把盒子向左侧移动：负的自己的宽度的一半
固定定位
介绍：死心眼定位，相对于浏览器进行定位移动
代码：position：fixed；
特点：
1.需要配合方位属性实现移动
2.相对于浏览器可视区进行移动
3.在页面中不占位置->已经脱标
应用场景：让盒子固定在屏幕中的某个位置
元素层级问题
不同布局方式元素的层级关系：
标准流<浮动<定位
不同定位之间的层级关系：
相对、绝对、固定默认层级相同
此时HTML中写在下面的元素层级更高，会覆盖上面的元素
默认情况下，定位的盒子 后来者居上
z-index：整数，取值越大，显示顺序越靠上，z-index的默认值为0
注意：z-index必须配合定位才生效
基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）
浏览器处理行内或行内块当作文字处理
垂直对齐方式：
属性名：vertical-align（凡是处理行内和行内块对齐，或者行内块和文字对齐，用这个）
属性值：
| 属性值 | 效果 |
| baseline | 默认，基线对齐 |
| top | 顶部对齐 |
| middle | 中部对齐 |
| bottom | 底部对齐 |
光标类型
场景：设置鼠标光标在元素上时显示的样式
属性名：cursor
常见属性值：
| 属性值 | 效果 |
| default | 默认值，通常是箭头 |
| pointer | 小手样式，提示用户可以点击 |
| text | 工字型，提示用户可以选择文字 |
| move | 十字光标，提示用户可以移动 |
边框圆角
场景：让盒子四个角变得圆滑，增加页面细节，提升用户体验
属性名：border-radius
常见取值：数字+px、百分比
赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角
边框圆角的常见应用
画一个正圆：
1.盒子必须是正方形
2.设置边框圆角为盒子宽高的一半->border-radius：50%
胶囊按钮：
1.盒子要求是长方形
2.设置->border-radius:盒子高度的一半
溢出部分显示效果
溢出部分：指的是盒子内容部分所超出盒子范围的区域
场景：控制内容溢出的部分显示效果，如：显示、隐藏、滚动条...
属性名：overflow
常见属性值：
| 属性值 | 效果 |
| visible | 默认值，溢出部分可见 |
| hidden | 溢出部分隐藏 |
| scroll | 无论是否溢出，都需要显示滚动条 |
| auto | 根据是否溢出，自动显示或隐藏滚动条 |
（拓展）元素整体透明度
场景：让某元素整体（包括内容）一起变透明
属性名：opacity
属性值：0 - 1之间的数字
*1：表是完全不透明
*0：表示完全透明
注意点：
opacity会让元素整体透明，包括里面的内容，如：文字、元素...
项目拓展：
精灵图：
场景：项目中将多张小图，合成一张大图片，这张大图片称之为精灵图
优点：减少服务器发送的次数，减少服务器的压力，提高页面加载速度
使用步骤：
1.创建一个盒子，设置盒子的尺寸和小图相同
2.将精灵图设置为盒子的背景图片
3.修改背景图的位置
通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y
（左移x设为负，上移设为负）
背景图片大小
作用：设置背景图片的大小
语法：background-size：宽度 高度；
取值：
| 取值 | 场景 |
| 数字+px | 简单、方便 |
| 百分比 | 相对于当前盒子自身的宽高百分比 |
| contain | 包含，将背景图片等比例缩放，直到不会超过盒子的最大 |
| cover | 覆盖，将背景图片等比例缩放，直到刚好填满整个盒子 没有空白 |
background连写拓展
完整连写：
background:color image repeat position/size;注意点：background-size和background连写同时设置时，需要注意覆盖问题
解决：
1.要么单独的样式写连写在下面
2.要么单独的样式写连写的里面
盒子阴影
作用：给盒子添加阴影效果，吸引用户注意，体现页面制作细节
属性名：box-shadow
取值：
| 参数 | 作用 |
| h-shadow | 必须，水平偏移量。允许负值 |
| v-shadow | 必须，垂直偏移量。允许负值 |
| blue | 可选，模糊度 |
| spread | 可选，阴影扩大 |
| color | 可选，阴影颜色 |
| inset | 可选，将阴影改为内部阴影 |
过渡
作用：让元素的样式慢慢变化，常配合hover使用，增强网页的交互体验
属性名：transition
常见取值：
| 参数 | 取值 |
| 过渡的属性 | all：所有能过渡的属性都过渡、具体属性名如：width：只有width有过渡 |
| 过渡的时长 | 数字+s（秒） |
注意点：
1.过渡需要：默认状态和hover状态样式不同，才能有过渡效果
2.transition属性给需要过渡的元素本身加
3.transition属性设置在不同状态中，效果有不同的
①给默认状态设置，鼠标移入移出都有过渡效果
②给hover状态设置，鼠标移入移出有过渡效果，移出没有过渡效果
字符编码
<!DOCTYPE html>文档类型声明，告诉浏览器该网页的HTML版本
网页语言
<html lang ="en">标识 网页使用的语言
作用：搜索引擎归类+浏览器翻译
常见语言：zh-CN 简体中文 / en 英文
SEO
SEO三大标签
1.title:网页标题标签
2.description：网页描述标签
3.keywords：网页关键词标签
ico图标设置
场景：显示在标签页标题左侧的小图标，习惯使用.ico格式的小图标
