CSS定位装饰

网页常见布局方式

标准流

块级元素独占一行---垂直布局

行内元素/行内块元素一行显示多个----水平布局

浮动

可以让原本垂直布局的块级元素变成水平布局

定位

可以让元素自由的摆放在网页的任意位置

一般用于盒子之间的层叠情况

使用定位步骤

设置定位方式

属性名：position

常见属性值：

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

设置偏移值

偏移值设置分为两个方向，水平和垂直方向各选一个使用即可

选取的原则一般是就近原则（离哪边近就用哪个）

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

相对定位

介绍：自恋型定位，相对于自己之前的位置进行移动

代码：position：relative

特点：

1.需要配合方位属性实现移动

2.相对于自己原来位置进行移动

3.在页面中占位置，没有脱标

应用场景：配合绝对定位组CP（子绝父相）用于小范围的移动

绝对定位

介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动

代码：position：absolute;

特点：

需要配合方位属性实现移动
默认相对浏览器可视区进行移动
在页面中不占位置

应用场景：配合绝对定位组CP（子绝父相）

定位—固定

介绍：死心眼型定位，相对于浏览器进行定位移动

代码：position：fixed;

特点：

需要配合方位属性实现移动
相对于浏览器可视区域进行移动
在页面中不占位置---已经脱标

应用场景：让盒子互动在屏幕中的某个位置

元素的层级关系

不同布局方式元素的层级关系：

标准流<浮动<定位

不同定位之间的层级关系：

相对、绝对、固定默认层级相同

此时HTML中写在下面的元素层级更高，会覆盖上面的元素

装饰

基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）

垂直对齐方式

属性名：vertical-align

属性值

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

光标的类型

场景：设置鼠标光标在元素上时显示的样式

属性名：cursor

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

边框圆角

场景：让盒子四个角变圆润，增加页面细节，提升用户体验

属性名：border-radius

常见取值：数字+px百分比

赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角

边框圆角的常见应用

画一个正圆：

盒子必须是正方形
设置边框圆角为盒子宽高的一半----border-radius：50%

胶囊按钮：

盒子要求是长方形
设置---border-radius：盒子高度的一半

overflow溢出部分显示效果

溢出部分：指的是盒子部分内容所超出盒子范围的区域

场景：控制内容溢出部分的显示效果，如：显示、隐藏。滚动条......

属性名：overflow

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