CSS界面布局控制属性概述

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

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