CSS 定位

页面布局

• 标准流：块级元素独占一行，垂直布局；行内/行内块一行多个，水平布局。
• 浮动：原本垂直变成水平
• 定位：自由摆放，盒子层叠

使用步骤：

1.设置定位方式:

• 属性名：position
• 常见属性值：static静态； relative相对；absolute绝对；fixed固定

2. 设置偏移值：

• 距离就近原则：属性名(left right top bottom)+数字px
• 偏移值设置为两个方向，水平垂直各选一个即可

相对定位：（自恋型）位置都有以左上为准

• 原来位置不动
• 参照原来的位置移动，原来的比现在
• 配合绝对定位（子绝对父相对）小范围移动

绝对定位：（拼爹型）

• 先找已经定位的父级，再找浏览器窗口
• 不占位置
• 改变显示模式，具有行内块特点 
• 不能使用margin居中 

transform:translate(-50%,-50%) 自己宽高的一半

z-index:111 层数越大显示在上，配合定位生效

固定定位：对浏览器定位

• 不占位置
• 行内块特点

元素装饰

行内和行内块当文字处理，基线对齐    ///变成块内block

垂直对齐方式：vertical-align:属性值

属性值：baseline 默认基线对齐

top 顶部对齐

middle 中部

bottom 底部

光标类型

属性：cursor

属性值：default 默认

pointer 小手

text 工字型可以复制

move 十字光标可以移动

边框圆角：

属性名：border-radius

取值：数字px 百分比

溢出显示：显示，隐藏，滚动

属性名：overflow

属性值：visible

hidden 隐藏

scroll 无论溢出，显示滚动

auto 根据溢出，显示或隐藏滚动

元素隐藏

visibility:hidden  占位置

display:none

元素透明度

属性名: opacity

属性值：0-1

精灵图：多个小图片合成大图（使用行内标签）转为行内块

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

1.创建盒子，盒子尺寸和小图尺寸相同

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

3.修改背景图位置