files/zh-cn/web/css/layout_mode/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

---
title: 布局模式
slug: Web/CSS/Layout_mode
tags:
  - CSS
translation_of: Web/CSS/Layout_mode
---
<p> <a href="/en-US/docs/Web/CSS">CSS</a> <strong>布局模式</strong>，有时简称为布局，是一种基于盒子与其兄弟和祖辈盒子的交互方式来确定盒子的位置和大小的算法。有以下几种形式：</p>

<ul>
 <li><strong>块布局</strong>：用来布置文件。块布局包含以文档为中心的功能，例如 <a href="/en-US/docs/Web/CSS/float">浮动</a>元素或将其放置在<a href="/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">多列</a>上的功能。</li>
 <li><strong>行内布局</strong>：用来布置文本。</li>
 <li><strong>表格布局</strong>：用来布置表格。</li>
 <li><strong>定位布局</strong>：用来对那些与其他元素无交互的定位元素进行布置 。</li>
 <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes"><strong>弹性盒子布局</strong></a>：用来布置那些可以顺利调整大小的复杂页面。{{experimental_inline}}</li>
 <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout"><strong>网格布局</strong></a>：用来布置那些与一个固定网格相关的元素。{{experimental_inline}}</li>
</ul>

<div class="note">
<p><strong><strong>注意:</strong> 并非所有 <a href="/en-US/docs/Web/CSS/Reference">CSS 属性</a> 适用于所有<em>布局模式</em>。大多数属性适用于一到两种布局模式，如果将属性设置在参与其他（原文another,指三者或三者以上。）布局模式的元素上则会不起作用。</strong></p>
</div>

<h2 id="也可以看看"><strong>也可以看看</strong></h2>

<ul>
 <li><strong>{{CSS_key_concepts}}</strong></li>
</ul>