CSS定位、装饰

一、定位

1.1 网页常见布局方式 

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

1.2、定位的常见应用场景

• 可以解决盒子与盒子之间的层叠问题
• 可以让盒子始终固定在屏幕的某个位置

1.3、使用定位的步骤

• 设定定位方式
  • 属性名：position
  • 常见属性

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

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

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

1.4、相对定位

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

1.5、绝对定位

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

1.6、固定定位

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

1.7、元素的层级关系

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

二、装饰

2.1、垂直对齐方式

• 基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）
• 属性名：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、元素本身隐藏

• 场景：让某元素本身在屏幕中不可见。如：鼠标：hover之后元素隐藏
• 常见属性：
  • visible:hidden（占位隐藏，不常用）
  • display:none（不占位隐藏，常用）

2.6、拓展-元素整体透明度

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