# CSS布局定位学习笔记

发布时间：2024-11-22 10:57:14

CSS布局定位学习笔记

标准文档流

标准文档流是HTML元素的默认排列方式。 块级元素：独占一行，可设置宽高与外边距。 行内元素：共享同一行，无法设置宽高。 行内块元素：与行内元素类似，但可以设置宽高。

常见元素示例： - 块级元素：div, p, h1-h6 - 行内元素：span, a, strong - 行内块元素：img, input, button

示例代码：

div {
    display: block;
    width: 100px;
    height: 100px;
}
span {
    display: inline;
}
img {
    display: inline-block;
}

定位 (Position)

定位类型

static (默认定位)：元素按正常文档流排列。 relative (相对定位)：元素相对于其原始位置偏移。 absolute (绝对定位)：元素相对于最近的已定位祖先元素偏移。 fixed (固定定位)：元素相对于视口固定。 sticky (粘性定位)：基于滚动位置进行动态切换。

示例代码：

.box {
    position: relative;
    top: 20px;
    left: 40px;
}

边偏移属性

top: 顶端偏移 bottom: 底部偏移 left: 左侧偏移 right: 右侧偏移

示例代码：

.box {
    position: absolute;
    top: 50px;
    left: 100px;
}

浮动 (Float)

float 属性：用于让元素浮动到页面的一侧。 可选值：left, right, none。 清除浮动：使用clear属性。

示例代码：

img {
    float: left;
    margin-right: 10px;
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

Flexbox布局

Flexbox是一种用于一维布局的CSS工具。

基本属性

display: flex; 激活Flexbox布局 justify-content：主轴对齐方式 align-items：交叉轴对齐方式

示例代码：

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

网格布局 (CSS Grid)

CSS Grid用于二维布局。

基本属性

display: grid; grid-template-columns: 定义列数和宽度 grid-template-rows: 定义行数和高度 gap: 定义网格间距

示例代码：

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

总结

掌握了标准文档流与元素类型的区别。 了解了多种CSS定位方式及其应用。 熟悉了Flexbox和Grid两种现代布局方案。

评论数：0