# Wiki源代码CSS界面布局控制属性概述

由 Qiongpan Ke 于 2024-11-30 最后修改
导出
Office格式
以PDF格式导出 以ODT格式导出 以RTF格式导出
其他格式

选择要导出的页面：

选择所有/ 无

Legend:
  已创建页面
  修改后的扩展页
  Clean Extension Page

以HTML格式导出

显示最后作者

author | version | line-number | content
--- | --- | --- | ---
|  | 1 | {{box cssClass="floatinginfobox" title="**Contents**"}}
|  | 2 | {{toc/}}
|  | 3 | {{/box}}
|  | 4 |
|  | 5 | = 概念 =
|  | 6 |
|  | 7 | == 盒子模型 ==
|  | 8 |
|  | 9 | [[image:boxmodel.png||alt="CSS Box model"]]
|  | 10 |
|  | 11 | 如上图，从里到外依次是：
|  | 12 |
|  | 13 | * content-box : 内容盒子，非IE浏览器box-sizing属性的默认值。
|  | 14 | * padding-box : 内边距盒子。
|  | 15 | * border-box : 边框盒子，IE浏览器box-sizing属性的默认值。
|  | 16 | * margin-box : 外边距盒子，相邻元素间会共享外边距，通常以两者中最大外边距为实际距离。
|  | 17 |
|  | 18 | == 文档流 ==
|  | 19 |
|  | 20 | 一个Web页面是基于流来编排页面的，其包含如下几种元素：
|  | 21 |
|  | 22 | * inline-level elements : 内联级（行内）元素。
|  | 23 | * block-level elements : 块块元素。
|  | 24 |
|  | 25 | 相应地，对于容纳这些元素的上层盒子，可以看作有两条轴：
|  | 26 |
|  | 27 | [[image:two-axes.png]]
|  | 28 |
|  | 29 | * inline axis : 行内轴，通常为水平轴，可使用 justify-items, justify-self, justify-content 属性对齐子元素，用 line-height 来指定行高。
|  | 30 | * block axis : 块级轴，通常为垂直轴，可使用 align-items, align-self, align-content 属性来对齐子元素。
|  | 31 |
|  | 32 | 对于 flex 布局，可以通过修改 flex-direction 属性的默认值 row 为 column 来调换 inline axis 与 block axis 的实际朝向。
|  | 33 |
|  | 34 | == CSS概念 ==
|  | 35 |
|  | 36 | * **层叠**：对于同一个元素，会有多个样式设置来源，如浏览器默认样式、多个不同的class等；
|  | 37 | * **继承**：部份CSS样式属性可以继承自上层元素，需要查阅该属性的 Inherited 属性；
|  | 38 | * **优先级**：由于有CSS样式层叠，对于同一个样式属性会有应用的优先级，有时会用到 !important 来强制应用样式。
|  | 39 |
|  | 40 | = 盒子模型控制 =
|  | 41 |
|  | 42 | == 内容溢出控制 ==
|  | 43 |
|  | 44 | (% style="-webkit-columns:16em; columns:16em" %)
|  | 45 | * overflow
|  | 46 | * overflow-x
|  | 47 | * overflow-y
|  | 48 |
|  | 49 | == 盒子大小控制 ==
|  | 50 |
|  | 51 | (% style="-webkit-columns:16em; columns:16em" %)
|  | 52 | * width
|  | 53 | * height
|  | 54 | * min-width
|  | 55 | * min-height
|  | 56 | * max-width
|  | 57 | * max-height
|  | 58 |
|  | 59 | **注意**：这里控制的盒子是基于box-sizing属性的，默认为content-box内容盒子。
|  | 60 |
|  | 61 | == 外边距控制 ==
|  | 62 |
|  | 63 | (% style="-webkit-columns:16em; columns:16em" %)
|  | 64 | * margin
|  | 65 | * margin-top
|  | 66 | * margin-right
|  | 67 | * margin-bottom
|  | 68 | * margin-left
|  | 69 | * margin-trim
|  | 70 |
|  | 71 | 根据 writing-mode, directoin, text-orientation 等文本属性的设置，通过下面属性的设置，将会被映射为对应的 margin-top, margin-right, margin-bottom, margin-left ：
|  | 72 |
|  | 73 | (% style="-webkit-columns:16em; columns:16em" %)
|  | 74 | * margin-block-start
|  | 75 | * margin-block-end
|  | 76 | * margin-inline-start
|  | 77 | * margin-inline-end
|  | 78 |
|  | 79 | == 内边距控制 ==
|  | 80 |
|  | 81 | (% style="-webkit-columns:16em; columns:16em" %)
|  | 82 | * padding
|  | 83 | * padding-top
|  | 84 | * padding-right
|  | 85 | * padding-bottom
|  | 86 | * padding-left
|  | 87 |
|  | 88 | == 显示/隐藏 ==
|  | 89 |
|  | 90 | (% style="-webkit-columns:16em; columns:16em" %)
|  | 91 | * visibility

# 同级页面

# 博客类别

- https://www.keqiongpan.cn:80/bin/view/Blog/">全部

- News (0)
- Other (0)
- Personal (0)

# 当前已创建的

- 线性布局组件与占位组件
- React
- CSS Flexbox Cheat Sheet
- CSS界面布局控制属性概述
- CSS

粤公网安备 44011802000481号 粤ICP备2020117634号
版权所有，如发现盗用模仿必追诉法律责任！
CopyRight © 2020-2023 keqiongpan.cn. All Right Reserved.