01 定位

1.1 网页常见的布局方式

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

1.2 定位的基本使用

1.2.1 定位的使用场景

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

1.2.2 定位的使用步骤

1. 设置定位方式

• 属性名：position
• 常见属性值

定位方式	属性值
静态定位	static
相对定位	relative
绝对定位	absolute
固定定位	fixed

2. 设置偏移值

• 偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
• 选取的原则一般是就近原则

方向	属性名	属性值	含义
水平	left	数字+px	距离左边的距离
水平	right	数字+px	距离右边的距离
垂直	top	数字+px	距离上边的距离
垂直	botton	数字+px	距离下边的距离

1.3 静态定位

• 不定位

1.4 相对定位

• 介绍：自恋型定位，相对于自己原来的位置进行移动
• 代码：postion:relative
• 特点：
  • 需要配合方向属性进行移动
  • 相对于自己原来的位置进行移动
  • 在页面中仍占原有位置——没有脱标
  • 仍然具有标签原有的显示模式特点
• 应用场景
  • 配合绝对定位使用（子绝父相）
  • 用于小范围的移动

1.5 绝对定位

• 介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动
  • 先找已经定位的父级，如果有就以这个父级为参照进行定位
  • 有父级，但父级没有定位，以浏览器窗口为参照进行定位
  • 查找定位父级的方式是逐层查找，如果实在找不到，再相对浏览器进行定位
• 代码：postion:absolute;
• 特点
  • 需要配合方向属性进行移动
  • 默认相对于浏览器可视区域进行移动
  • 脱标，不占位
  • 改变标签的原有显示模式特点，变为行内块显示模式（在一行共存，宽高生效）
• 应用场景
  • 配合相对定位（子绝父相）

1.6 子绝父相

1.7 固定定位

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

1.8 元素的层级关系

• 不同布局方式元素的层级关系
  • 标准流 < 浮动 < 定位
• 不同定位之间的层级关系
  • 相对、绝对、固定默认层级相同
  • HTML中写在下面的元素层级更高，会覆盖上面的元素
• z-index
  • 整数，取值越大，显示顺序靠上，默认是0
  • z-index必须配合定位才生效

1.9 拓展

居中

• 绝对定位的盒子不能使用margin:0 auto居中
• 样式设置

/* 将盒子向右移动到浏览器50%的地方（会偏右） */
left: 50%;
/* 将盒子左移半个盒子宽度，使水平居中 */
margin-left: -150px;

/* 将盒子向下移动到浏览器50%的地方（会偏下） */
top: 50%;
/* 将盒子上移半个盒子高度，使垂直居中 */
margin-top: -150px;

• 位移居中（减少手动计算的工作量）

left: 50%;
top: 50%;

/* 位移：自己宽高的一半 */
transform: translate(-50%,-50%);

02 装饰

2.1 垂直对齐方式

• 基线：浏览器文字类型元素排版中存在用于对齐的基线
• 属性名：vertical-align
• 属性值：

属性值	效果
baseline	默认，基线对齐
top	顶部对齐
middle	中部对齐
bottom	底部对齐

• 浏览器把行内和行内块当作文字处理，默认基线对齐

2.2 光标类型

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

属性值	效果
default	默认值，通常是箭头
pointer	小手效果，提示用户可以点击
text	工字形，提示用户可以选择文字
move	十字光标，提示用户可以移动

2.3 边框圆角

• 场景：让盒子的四个角变的圆润，增加页面细节，提升用户体验
• 属性名：border-radius
• 常见取值：数字+px，百分比
• 赋值规则：从左上角开始赋值，顺时针赋值，没有赋值看对角
• 常见应用
  • 正圆
    • 设置一个正方形盒子
    • 设置边框圆角为盒子宽高的一半——border-radius:50%
  • 胶囊按钮
    • 设置一个长方形盒子
    • 设置——border-radius:盒子高度的一半

2.4 overflow溢出部分显示效果

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

属性值	效果
visible	默认值，溢出部分可见
hidden	溢出部分隐藏
scroll	无论是否溢出，都显示滚动条
auto	根据是否溢出，自动显示或隐藏滚动条

2.5 元素本身隐藏

• 场景：让某些元素在屏幕不可见
• 常见属性：
  • visibility:hidden
  • display:none
• 区别
  • visibility:hidden占位隐藏
  • display:none隐藏不占位

03 拓展

3.1 元素整体透明度

• 场景：让元素整体（包括内容）一起变透明
• 属性名：opacity
• 属性值：0~1之间的数字
  • 0表示完全透明
  • 1表示完全不透明