---
title: CSS Layout cookbook
slug: Web/CSS/Layout_cookbook
tags:
  - CSS
  - Layout
  - NeedsTranslation
  - TopicStub
  - cookbook
  - recipes
translation_of: Web/CSS/Layout_cookbook
---
<div>{{CSSRef}}</div>

<div>CSS layout cookbook 这本书旨在汇集常见的布局样式，这些布局你可能在自己的网站中会用到。这些布局样式不仅仅可以可以用来开始一个项目，而且提供了具体的使用方法，作为开发人员，你可以做出合适的选择。</div>

<div></div>

<div class="note">
<p><strong>Note</strong>: 如果你是首次接触CSS布局，你可以先看一下<a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout learning module</a>，书中的基础知识有利于你更好的使用本书中的布局样式。</p>
</div>

<h2 id="布局样式">布局样式</h2>

<table class="standard-table" style="height: 543px; width: 1188px;">
 <thead>
  <tr>
   <th scope="col">Recipe</th>
   <th scope="col">Description</th>
   <th scope="col">Layout Methods</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Media_objects">Media objects</a></td>
   <td>一个两栏的框，一边是图片，另一边是描述性文字，例如facebook上的帖子或推特</td>
   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, {{cssxref("float")}} fallback, {{cssxref("fit-content")}} sizing</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts">Columns</a></td>
   <td>
    <p>在什么时候选择multi-column layout,flexbox或者grid</p>
   </td>
   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="/en-US/docs/Web/CSS/CSS_Columns">Multicol</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element">Center an element</a></td>
   <td>
    <p>如何水平或者垂直居中一个item</p>
   </td>
   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers">Sticky footers</a></td>
   <td>
    <p>创建一个页脚，当内容较短时，该页脚位于容器或视图的底部</p>
   </td>
   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Split_Navigation">Split navigation</a></td>
   <td>
    <p>一种导航模式，里面的一些links显示的区分于其他</p>
   </td>
   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, {{cssxref("margin")}}</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation">Breadcrumb navigation</a></td>
   <td>
    <p>创建链接列表，允许访问者在页面层次结构中向上导航</p>
   </td>
   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/List_group_with_badges">List group with badges</a></td>
   <td>
    <p>一个带有count计数的徽章的items列表</p>
   </td>
   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Pagination">Pagination</a></td>
   <td>链接到内容页面 (比如搜索结果).</td>
   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Card">Card</a></td>
   <td>卡片组件，显示在卡片网格中</td>
   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Grid Layout</a></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Grid_wrapper">Grid wrapper</a></td>
   <td>For aligning grid content within a central wrapper, while also allowing items to break out.</td>
   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a></td>
  </tr>
 </tbody>
</table>

<h2 id="Contribute_a_Recipe">Contribute a Recipe</h2>

<p>As with all of MDN we would love you to contribute a recipe in the same format as the ones shown above. <a href="/en-US/docs/user:chrisdavidmills/Layout_Cookbook_Home/Contribute_a_recipe">See this page</a> for a template and guidelines for writing your own example.</p>