Tech Docs Station

Appearance

布局 ​

CSS 布局用于控制元素在页面上的排列方式。现代 CSS 提供了多种强大的布局方法。

display 属性 ​

display 是布局的基础属性：

css
display: block;        /* 块级元素 */
display: inline;       /* 行内元素 */
display: inline-block; /* 行内块元素 */
display: none;         /* 隐藏元素 */
display: flex;         /* 弹性布局 */
display: grid;         /* 网格布局 */

Flexbox 弹性布局 ​

Flexbox 是一种一维布局模型，适合在一行或一列中排列元素。

基本用法 ​

css
.container {
    display: flex;
}

容器属性 ​

flex-direction ​

设置主轴方向：

css
flex-direction: row;            /* 水平方向（默认） */
flex-direction: row-reverse;    /* 水平反向 */
flex-direction: column;         /* 垂直方向 */
flex-direction: column-reverse; /* 垂直反向 */

flex-wrap ​

设置是否换行：

css
flex-wrap: nowrap; /* 不换行（默认） */
flex-wrap: wrap;   /* 换行 */
flex-wrap: wrap-reverse; /* 反向换行 */

justify-content ​

设置主轴对齐方式：

css
justify-content: flex-start;    /* 起点对齐（默认） */
justify-content: flex-end;      /* 终点对齐 */
justify-content: center;        /* 居中对齐 */
justify-content: space-between; /* 两端对齐，间隔相等 */
justify-content: space-around;  /* 间隔相等 */
justify-content: space-evenly;  /* 完全等分 */

align-items ​

设置交叉轴对齐方式：

css
align-items: stretch;     /* 拉伸填满（默认） */
align-items: flex-start;  /* 起点对齐 */
align-items: flex-end;    /* 终点对齐 */
align-items: center;      /* 居中对齐 */
align-items: baseline;    /* 基线对齐 */

align-content ​

多根轴线的对齐方式：

css
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: stretch;

项目属性 ​

flex-grow ​

放大比例：

css
.item {
    flex-grow: 0; /* 默认，不放大 */
    flex-grow: 1; /* 放大，填满剩余空间 */
}

flex-shrink ​

缩小比例：

css
.item {
    flex-shrink: 1; /* 默认，可缩小 */
    flex-shrink: 0; /* 不缩小 */
}

flex-basis ​

初始大小：

css
.item {
    flex-basis: auto; /* 默认 */
    flex-basis: 200px;
    flex-basis: 50%;
}

flex 简写 ​

css
.item {
    flex: 0 1 auto; /* 默认：grow shrink basis */
    flex: 1;        /* 等同于 flex: 1 1 0% */
    flex: auto;     /* 等同于 flex: 1 1 auto */
    flex: none;     /* 等同于 flex: 0 0 auto */
}

align-self ​

单个项目的对齐方式：

css
.item {
    align-self: auto;
    align-self: flex-start;
    align-self: flex-end;
    align-self: center;
    align-self: baseline;
    align-self: stretch;
}

order ​

排列顺序：

css
.item:first-child { order: 2; }
.item:last-child { order: 1; }

Flexbox 示例 ​

css
/* 水平居中 */
.container {
    display: flex;
    justify-content: center;
}

/* 垂直居中 */
.container {
    display: flex;
    align-items: center;
}

/* 完全居中 */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 等分布局 */
.container {
    display: flex;
}
.item {
    flex: 1;
}

/* 圣杯布局 */
.header, .footer {
    height: 60px;
}
.main {
    display: flex;
}
.content {
    flex: 1;
}
.sidebar {
    width: 200px;
}

Grid 网格布局 ​

Grid 是一种二维布局模型，可以同时控制行和列。

基本用法 ​

css
.container {
    display: grid;
}

容器属性 ​

grid-template-columns / grid-template-rows ​

定义网格轨道：

css
/* 固定大小 */
grid-template-columns: 200px 200px 200px;
grid-template-rows: 100px 100px;

/* 百分比 */
grid-template-columns: 25% 50% 25%;

/* fr 单位（等分） */
grid-template-columns: 1fr 2fr 1fr;

/* repeat 函数 */
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(3, 100px);

/* auto-fill / auto-fit */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

/* 混合使用 */
grid-template-columns: 200px 1fr 200px;

grid-gap / gap ​

设置网格间距：

css
gap: 20px;              /* 行列间距相同 */
gap: 20px 10px;         /* 行间距 | 列间距 */
row-gap: 20px;          /* 行间距 */
column-gap: 10px;       /* 列间距 */

grid-template-areas ​

定义区域：

css
.container {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 60px 1fr 60px;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

justify-items / align-items ​

网格项的对齐方式：

css
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
place-items: center; /* 简写 */

justify-content / align-content ​

整个网格的对齐方式：

css
justify-content: start | end | center | space-between | space-around | space-evenly;
align-content: start | end | center | space-between | space-around | space-evenly;
place-content: center; /* 简写 */

项目属性 ​

grid-column / grid-row ​

指定项目跨越的网格线：

css
.item {
    grid-column: 1 / 3;  /* 从第1条线到第3条线 */
    grid-column: span 2; /* 跨越2列 */
    grid-row: 1 / 2;
}

grid-area ​

指定项目所在的区域：

css
.item {
    grid-area: 1 / 1 / 3 / 3; /* row-start / col-start / row-end / col-end */
}

Grid 示例 ​

css
/* 基本网格 */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* 响应式网格 */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* 圣杯布局 */
.layout {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: 60px 1fr 60px;
    min-height: 100vh;
}

.header { grid-column: 1 / 4; }
.footer { grid-column: 1 / 4; }

Position 定位 ​

position 属性控制元素的定位方式：

static（默认） ​

正常文档流中的位置：

css
position: static;

relative ​

相对定位，相对于元素原本的位置：

css
position: relative;
top: 10px;
left: 20px;

absolute ​

绝对定位，相对于最近的定位祖先元素：

css
position: absolute;
top: 0;
right: 0;

fixed ​

固定定位，相对于视口：

css
position: fixed;
top: 0;
left: 0;
width: 100%;

sticky ​

粘性定位，根据滚动位置切换：

css
position: sticky;
top: 0;

z-index ​

设置堆叠顺序：

css
.modal {
    position: fixed;
    z-index: 1000;
}

Float 浮动 ​

浮动用于让元素脱离文档流：

css
float: left;
float: right;
float: none;

清除浮动 ​

css
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}

实践示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>布局示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }
        
        /* Flexbox 导航 */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 30px;
            background-color: #333;
            color: white;
        }
        
        .navbar ul {
            display: flex;
            list-style: none;
            gap: 20px;
        }
        
        .navbar a {
            color: white;
            text-decoration: none;
        }
        
        /* Grid 布局 */
        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            padding: 20px;
        }
        
        .card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        /* Flexbox 居中 */
        .hero {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 300px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-align: center;
        }
        
        /* 固定定位 */
        .back-to-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            background-color: #007bff;
            color: white;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            z-index: 100;
        }
        
        /* 粘性定位 */
        .sticky-header {
            position: sticky;
            top: 0;
            background-color: #f8f9fa;
            padding: 15px 20px;
            border-bottom: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <div class="logo">Logo</div>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">关于</a></li>
        </ul>
    </nav>
    
    <section class="hero">
        <h1>欢迎访问</h1>
        <p>这是一个布局示例页面</p>
    </section>
    
    <div class="sticky-header">
        <h2>产品列表</h2>
    </div>
    
    <div class="grid-container">
        <div class="card">
            <h3>产品 1</h3>
            <p>产品描述内容</p>
        </div>
        <div class="card">
            <h3>产品 2</h3>
            <p>产品描述内容</p>
        </div>
        <div class="card">
            <h3>产品 3</h3>
            <p>产品描述内容</p>
        </div>
        <div class="card">
            <h3>产品 4</h3>
            <p>产品描述内容</p>
        </div>
        <div class="card">
            <h3>产品 5</h3>
            <p>产品描述内容</p>
        </div>
        <div class="card">
            <h3>产品 6</h3>
            <p>产品描述内容</p>
        </div>
    </div>
    
    <div class="back-to-top">↑</div>
</body>
</html>