CSS布局技巧 | 豆包MarsCode AI刷题

CSS布局技巧 | 豆包MarsCode AI刷题

浮动

属性名：float

属性值：

left 左浮动

right 右浮动

浮动元素有特殊的显示效果 • 一行可以显示多个 • 可以设置宽高

浮动的元素不能通过text-align:center或者margin:0 auto

清除浮动

方法：

1、直接设置父元素高度

优点：简单粗暴，方便 缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块

2、额外标签法

操作：

1. 在父元素内容的最后添加一个块级元素
2. 给添加的块级元素设置 clear:both • 缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

3、给父元素设置overflow : hidden

优点：方便

定位

属性名：position

属性值	作用	相对于谁移动	是否占位置
static	静态定位	不能通过方位属性移动	占位置
relative	相对定位	相对于自己原来的位置	占位置
absolute	绝对定位	相对于最近的且有定位的祖先元素移动	不占位置（脱标）
fixed	固定定位	相对于浏览器可视区域	不占位置（脱标）

设置偏移值

属性名	属性值	含义
left	数字+px	距离左边的距离
right	数字+px	距离右边的距离
top	数字+px	距离上边的距离
bottom	数字+px	距离下边的距离

静态定位

介绍：静态定位是默认值，就是之前认识的标准流。

1. 静态定位就是之前标准流，不能通过方位属性进行移动
2. 之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定

相对定位

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

特点：

1. 需要配合方位属性实现移动
2. 相对于自己原来位置进行移动
3. 在页面中占位置 → 没有脱标

应用场景：

1. 配合绝对定位组CP（子绝父相）
2. 用于小范围的移动

绝对定位

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

特点：

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

应用场景：

配合绝对定位组CP（子绝父相）

固定定位

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

特点：

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

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

不同布局方式元素的层级关系：标准流层级最小，浮动次之，定位最大

不同定位之间的层级关系： 相对、绝对、固定默认层级相同

更改定位元素的层级

场景：改变定位元素的层级 属性名：z-index

属性值：数字（ 数字越大，层级越高）