Wiki源代码CSS界面布局控制属性概述
由用户 Qiongpan Ke 在 2024-11-30 保存的版本 1.1
复制
导出
打印预览
源代码
子项
内容
附件
历史记录
信息
Likes
隐藏最后作者
| author | version | line-number | content |
|---|---|---|---|
 |
1.1 | 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 |
粤公网安备 44011802000481号 粤ICP备2020117634号