day07

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.在页面中占位置->没有脱标