css布局——定位和装饰
一、定位
1.网页中常见的布局方式
1、标准流 块级元素独占一行——>垂直布局 行内元素/行内块元素一行显示多个——>水平布局
2、浮动 可以让原本垂直布局的块级元素变成水平布局
3、定位 可以让元素自由的摆放在网页的任意位置 一般用于盒子之间的层叠情况
2.定位的使用方法
设置定位的方式:
定位方式 | 属性值 | 代码 |
---|---|---|
静态定位· | static | 默认值-- position: static |
相对定位 | relative | position: relative; |
绝对定位 | absolute | position: absolute; |
固定定位 | fixed | position: fixed; |
设置偏移量:水平+垂直就近各取一个
方向 | 属性名 | 属性值 | 含义 |
---|---|---|---|
水平 | left | 数字+px | 距离左边的距离 |
水平 | right | 数字+px | 距离右边的距离 |
垂直 | top | 数字+px | 距离上边的距离 |
垂直 | bottom | 数字+px | 距离下边的距离 |
3.静态定位
position: static --属于默认值,了解即可
4.相对定位
自恋型定位,相对于自己之前的位置进行移动 特点: 1.需要配合方位属性实现移动 2.相对于自己原来的位置进行移动 3.在页面中占位置->没有脱标