display、float 和 position 是CSS（层叠样式表）中常用的布局属性，用于控制HTML元素的位置和排列。
display 属性：它用于定义元素的显示类型。常见的取值有：
block：设置元素显示为块级元素，独占一行，默认宽度为父元素的100%。inline：设置元素显示为行内元素，和其他行内元素在一行显示，宽度由内容决定。inline-block：设置元素显示为行内块级元素，和其他行内元素在一行显示，但可以设置宽高。none：设置元素隐藏，不占据空间。
float 属性：它用于定义元素在包含块中的浮动方向。常见的取值有：
left：元素向左浮动，其他内容将环绕该元素。right：元素向右浮动，其他内容将环绕该元素。none：元素不浮动，恢复默认布局方式。
position 属性：它用于定义元素的定位方式。常见的取值有：
static：元素按照默认布局方式进行排列，不进行特殊定位。relative：元素相对于其正常位置进行偏移定位，不影响其他元素的布局。absolute：元素相对于其最近的非static定位父元素进行偏移定位，会影响其他元素的布局。fixed：元素相对于视口进行定位，会固定在屏幕上某个位置，不随页面滚动而滚动。sticky：元素根据滚动位置在容器中的特定位置固定定位，可视区域发生变化时被释放。
这些属性可以单独使用，也可以组合使用，以实现各种复杂的布局效果。通过设置不同的display、float和 position 属性值，可以实现元素的排列、浮动和定位。
display 、float 、position的关系
如果元素的 display 属性值为 none，那么 position 和 float 属性将不会产生任何效果 。
float 可以使元素脱离正常的文档流排列，元素将向左或向右浮动，直到元素边框接触包含块或另一个浮动元素为止。
position 属性可以用于确定元素的定位类型，如 static、relative、absolute 或 fixed。position 和 float 属性不能同时使用，如果同时设置只有 position 会生效。
display 为 inline 时元素不会被浮动元素包围，display 为 block 时会被浮动元素包围 。
margin 属性在 position 为 absolute 或 fixed 时会与包含块的边框重叠。
overflow 属性可以控制内容溢出元素框时的表现，与 position 相关。
总结起来：绝对定位、浮动、根元素都需要调整
display。
position属性的常用值：
absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位 ，相对于最近的非static定位的父元素进行定位，如果没有非 static 父元素，则相对于文档的初始包含块进行定位。
fixed ：生成绝对定位的元素，相对于浏览器窗口进行定位
relative：生成相对定位的元素，相对于其正常位置进行定位，相对于元素自身在文档流中的位置进行定位，不会影响其他元素的布局。
static：默认值 。没有定位，元素出现在正常的流中
inherit：规定从父元素继承 position 属性的值
position属性的值relative和absolute的定位原点是:
relative：以自己原本在正常流中所占据的空间作为定位原点。
absolute：以最近一级的定位父元素或<body>作为定位原点，如果没有则以<body>为原点。
flex：布局使用display: flex将元素变为flex容器，子元素默认为flex项目，可以使用flex-direction、justify-content、align-items等属性控制项目的排列。
block：设置元素显示为块级元素，独占一行，默认宽度为父元素的100%，可设置宽高，换行显示。适合布局中需要独占一行的元素，如段落、标题等。
inline：设置元素显示为行内元素，和其他行内元素在一行显示，宽度由内容决定,不换行。适合在一行内显示的元素，如文本、链接等。
inline-block：设置元素显示为行内块级元素，和其他行内元素在一行显示，但可以设置宽高。结合了block和inline的特点，可以设置宽高、在一行内显示，适合做按钮、图片等。
none：设置元素隐藏，元素不可见，不占据空间。用于隐藏元素，常用于JavaScript中动态改变元素的显示状态。
flex：设置元素显示为弹性盒子容器，可以通过设置子元素的属性来控制布局。用于实现弹性盒子布局，可以方便地实现多列等复杂布局。
list-item ：属性会使元素作为列表项显示。元素内会有一个小圆点或其他图标。list-item用于列表元素显示。
table：属性会使元素作为表格块显示。元素内可以包含表格行和单元格。表格具有表格特性如边框或间距。table用于表格元素显示。
inherit：属性会使元素继承其父元素的display属性值。如果父元素的display属性值为block,则子元素也会以块级元素显示。inherit用于继承父元素的display属性设置。
display:inline-block当元素之间有换行符或空格时，会产生间隙。可以通过消除HTML标签之间的空格或使用负边距来解决间隙问题。
display:inline-block不会显示间隙的情况有:
移除元素之间的空格。
使用负margin值排除间隙。
使用 font-size:0
letter-spacing
word-spacing
行内元素设置浮动属性 float 后,它不会完全变为块级元素,但会获得一些块级元素的特性。它会同时拥有行内和块级的特性,比如可以设置宽高。它仍然是行内元素，只是会向左浮动，并且其他内容会环绕该元素。
行内元素设置成浮动之后变得更加像是 inline-block (行内块级元素，设置成这个属性的元素会同时拥有行内和块级的特性， 最明显的不同是它的默认宽度不是 100% )， 这时候给行内元素设置 padding-top 和 padding-bottom 或者width、 height 都是有效果的。
Flex 是 Flexible Box 的缩写，意为"弹性布局"。是一种弹性盒子布局模型，使用display：flex来设置容器为弹性盒子。Flex布局可以通过设置容器和子元素的属性来实现灵活的布局。
容器有以下属性：flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-content。
flex-direction：属性决定主轴的方向（横向或纵向）；
flex-wrap：属性定义，如果一条轴线排不下，如何换行；
flex-flow：属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap；
justify-content：属性定义了项目在主轴上的对齐方式。
align-items：属性定义项目在交叉轴上如何对齐。
align-content：属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
项目（子元素）也有一些属性：order，flex-grow，flex-shrink，flex-basis，flex，align-self。
order：属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow：属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink：属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis：属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。
flex：属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self：属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
使用Flex布局可以轻松实现响应式设计、等高布局、对齐等复杂的布局需求，比传统布局方式更加灵活方便。
持续学习总结记录中，回顾一下上面的内容：
display 、float 、position的关系？position的值， relative和absolute定位原点是?display有哪些值，作用是什么?display:inline-block什么时候不会显示间隙?行内元素float:left后是否变为块级元素?flex 布局如何使用？