CSS - CSS界面布局控制属性概述 

Page / - 最后修改者 Qiongpan Ke 打开 2024-11-30 

CSS界面布局控制属性概述 
最后修改者 Qiongpan Ke
打开 2024-11-30

内容列表
概念
盒子模型
文档流
CSS概念
盒子模型控制
内容溢出控制
盒子大小控制
外边距控制
内边距控制
显示/隐藏

Contents
•	概念
•	盒子模型
•	文档流
•	CSS概念
•	盒子模型控制
•	内容溢出控制
•	盒子大小控制
•	外边距控制
•	内边距控制
•	显示/隐藏
概念
盒子模型

如上图，从里到外依次是：
•	content-box : 内容盒子，非IE浏览器box-sizing属性的默认值。
•	padding-box : 内边距盒子。
•	border-box : 边框盒子，IE浏览器box-sizing属性的默认值。
•	margin-box : 外边距盒子，相邻元素间会共享外边距，通常以两者中最大外边距为实际距离。
文档流
一个Web页面是基于流来编排页面的，其包含如下几种元素：
•	inline-level elements : 内联级（行内）元素。
•	block-level elements : 块块元素。
相应地，对于容纳这些元素的上层盒子，可以看作有两条轴：
•	inline axis : 行内轴，通常为水平轴，可使用 justify-items, justify-self, justify-content 属性对齐子元素，用 line-height 来指定行高。
•	block axis : 块级轴，通常为垂直轴，可使用 align-items, align-self, align-content 属性来对齐子元素。
对于 flex 布局，可以通过修改 flex-direction 属性的默认值 row 为 column 来调换 inline axis 与 block axis 的实际朝向。
CSS概念
•	层叠：对于同一个元素，会有多个样式设置来源，如浏览器默认样式、多个不同的class等；
•	继承：部份CSS样式属性可以继承自上层元素，需要查阅该属性的 Inherited 属性；
•	优先级：由于有CSS样式层叠，对于同一个样式属性会有应用的优先级，有时会用到 !important 来强制应用样式。
盒子模型控制
内容溢出控制
•	overflow
•	overflow-x
•	overflow-y
盒子大小控制
•	width
•	height
•	min-width
•	min-height
•	max-width
•	max-height
注意：这里控制的盒子是基于box-sizing属性的，默认为content-box内容盒子。
外边距控制
•	margin
•	margin-top
•	margin-right
•	margin-bottom
•	margin-left
•	margin-trim
根据 writing-mode, directoin, text-orientation 等文本属性的设置，通过下面属性的设置，将会被映射为对应的 margin-top, margin-right, margin-bottom, margin-left ：
•	margin-block-start
•	margin-block-end
•	margin-inline-start
•	margin-inline-end
内边距控制
•	padding
•	padding-top
•	padding-right
•	padding-bottom
•	padding-left
显示/隐藏
•	visibility