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

用户876219106245

2024-11-11 104 阅读2分钟

浮动

float

作用：让块元素水平排列。

属性值：

none：元素不浮动（默认值）
left：元素向左浮动
right：元素向右浮动

特点：

浮动后的盒子顶对齐
浮动后的盒子具备行内块特点
浮动后的盒子脱标，不占用标准流的位置

不设置浮动：

对one设置float:left; 对two设置float:right;

定位

position

属性值：static静态（默认值）；relative相对；absolute绝对；fixed固定；sticky粘性

未布局页面

fixed：脱离文档流，固定在窗口指定位置
- 应用场景：元素的位置在网页滚动时不会改变
- 特点：
  - 脱标，不占位
  - 显示模式具备行内块特点
  - 设置边偏移相对浏览器窗口改变位置
relative：相对于原位置进行移动调整（top：-5px⇒值为负，向上移）
- 特点：
  - 不脱标，占用自己原来位置
  - 显示模式特点保持不变
  - 设置边偏移则相对自己原来位置移动
```
div {
    position: relative;
    top: 100px;
    left: 200px;
}    
```
效果图：
absolute：对于非static的父节点进行定位（若所有父标签都没有定位，会根据浏览器窗口进行定位）
- 应用场景：子级绝对定位，父级相对定位（子绝父相）
- 特点:
  - 脱标，不占位
  - 显示模式具备行内块特点
  - 设置边偏移则相对最近的已经定位的祖先元素改变位置
  - 如果祖先元素都未定位，则相对浏览器可视区改变位置

  div {
    position: absolute;
    top: 100px;
    left: 200px;
  }

sticky：top与滚动配合，滚动前是relative，滚动后是fixed
堆叠层级z-index:整数数字（默认值为0，取值越大，层级越高）
- 作用：设置定位元素的层级顺序，改变定位元素的显示顺序

弹性盒子布局

flex布局

1. 组成：

设置方式：给父元素设置 display: flex，子元素可以自动挤压或拉伸
组成部分：
- 弹性容器
- 弹性盒子
- 主轴：默认在水平方向
- 侧轴 / 交叉轴：默认在垂直方向

2. 主轴对齐方式：justify-content

3. 侧轴对齐方式

align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

1680335957166

4. 修改主轴方向：flex-direction

主轴默认在水平方向，侧轴默认在垂直方向

1680335988425

5. 弹性伸缩比

作用：控制弹性盒子的主轴方向的尺寸。
属性名：flex
属性值：整数数字，表示占用父级剩余尺寸的份数。

6. 弹性盒子换行：flex-wrap

不换行效果

.box ul添加属性flex-wrap

7. 行内对齐方式：align-content

align-content:center;

align-content:flex-start;

align-content:space-around;

align-content:space-between;