结构属性，就是与CSS元素的位置、排列相关的属性
包括：display显示属性、position定位属性、float浮动属性、overflow溢出行为

CSS（三）结构属性

一、display显示

display属性用于定义建立布局时元素生成的显示框类型。常见的可取值如下：

值	描述
inline	（默认），显示为内联元素，前后没有换行符
block	显示为块级元素，前后带有换行符
none	不显示元素
inline-block	行内块元素
flex	元素盒子为flex弹性盒布局（基于block的基础）
grid	元素盒子为grid网格布局（基于block的基础）
inline-flex	内联的flex弹性盒，前后没有换行（基于inline-block的基础）
inline-grid	内联的grid网格，前后没有换行（基于inline-block的基础）

block、inline、inline-block的比较

	block	inline	inline-block
默认宽度	（内联方向上）占据父容器的所有宽度	由内容决定	由内容决定
高度	由内容决定	由内容决定	由内容决定
width	生效	不起作用	生效
height	生效	不起作用	生效
布局流	垂直向下	水平向右	水平向右
水平边距	起作用、推开其它元素	起作用，推开其它元素	起作用、推开其它元素
垂直边距	起作用、推开其它元素	会被应用，但是不推开其它元素	起作用、推开其它元素

二、position定位

position 属性定义建立元素布局所用的定位机制，取值如下：

值	描述
static	（默认）没有定位，正常文档流
relative	相对定位，相对于元素原本的位置进行偏移，使用left、right、top、bottom四个属性进行偏移定位
absolute	绝对定位，相对于最近的、非static定位的第一个父元素进行定位，同样通过上面四个属性进行定位
fixed	绝对定位，相对于浏览器窗口的绝对定位，同样通过上面四个属性进行定位
sticky	粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（由top、right、bottom 或 left 之一决定)
inherit	继承父元素的postion属性值

注：除了使用left、right、top、bottom四个属性外，还可以使用margin属性进行偏移/定位。

• 脱离文档流的定位：fixed、absolute
• 保持正常文档流的定位：static、sticky、relative

脱离了正常文档流的元素可能会发生堆叠，「z-index」属性可以决定堆叠元素之间的上下层关系。

三、float浮动

float 属性定义元素在哪个方向浮动。

3.1、取值范围

可取值	描述
none	（默认），不浮动
left	向左浮动
right	向右浮动
inherit	继承父元素的float属性

3.2、浮动的特点

1. 浮动元素脱离正常文档流（”元素遮盖“问题，这个遮盖关系通过z-index是改变不了的，不同于absolute、fixed定位元素）
2. 父元素不计算浮动元素的高度（“高度塌陷”问题）
3. 不管原来是什么元素，都会变成行内块级元素（inline-block)
4. 浮动元素之间不会重叠
5. 浮动元素碰到父元素边框、或者浮动元素的边框就会停止
6. 浮动元素如果内部没有内容的话，宽度为0（表现为视觉上不可见）

3.3、clear消除浮动

在解决”元素遮盖“和”高度塌陷“的方法中，都使用了一个 「clear」属性，它用来给受浮动元素影响的元素清除浮动

clear: left | right | both;
left: 清除左浮动；
right: 清除右浮动；
both: 清除两边浮动；

关于浮动特点的探究、和浮动问题的解决请看【前端练习】项目

四、overflow溢出

overflow属性定义溢出元素内容区的内容会如何处理。取值范围如下：

值	描述
visble	（默认值），溢出内容显示在元素框之外
hidden	溢出部分的内容被修剪，不可见
scroll	提供滚动条，以查看溢出部分内容。有可能没有内容溢出也会出现滚动条
auto	如果有内容溢出，浏览器将提供滚动条
inherit	继承父元素的overflow属性值