position：
在 CSS 中，position 属性用于定义元素的定位方式。它有几个取值：
static: 默认值。元素按照正常文档流进行定位，不会被特殊地定位。relative: 相对定位。元素相对于它正常位置进行定位，但是在文档流中仍保留原有的空间。absolute: 绝对定位。元素相对于最近的非static（非默认定位）的父元素进行定位。如果没有符合条件的父元素，那么相对于初始包含块（通常是<html>元素）进行定位。fixed: 固定定位。元素相对于浏览器窗口进行定位，即使页面滚动，它也会保持在窗口的固定位置。sticky: 粘性定位。元素根据用户的滚动位置在父元素中定位，但是仍然在文档流中占据空间。在滚动到元素定位的范围时，它会变为固定定位，直到滚动回超出范围。
float
float 是 CSS 中的一个属性，用于控制元素在布局时沿着包含块的左侧或右侧浮动。float 属性有两个主要的取值：left 和 right。
当一个元素设置了 float: left; 或 float: right; 时，它会尽量靠近包含块左侧或右侧，并且其他元素会围绕它排列。这在创建多列布局、图文混排等场景中常被使用。
然而，使用 float 也有一些需要注意的问题：
- 元素脱离文档流： 浮动元素脱离了正常的文档流，可能会导致父元素的高度塌陷，影响布局。
- 清除浮动： 在浮动元素后面的元素可能不按预期排列，可以通过
clear属性来清除浮动。 - 父元素包裹： 父元素可能无法包裹浮动元素，需要使用
clearfix或其他清除浮动的方法。 - 响应式设计： 在响应式设计中，使用
float可能不够灵活，可以考虑使用更现代的布局方式，比如 Flexbox 或 Grid。
display
display 是 CSS 中一个非常重要的属性，用于定义元素的显示类型（display type）。这个属性控制元素在页面上的表现形式，例如是块级元素还是行内元素。
以下是 display 属性常见的取值：
1.block： 元素会生成一个块级框，独占一行，可以设置宽度、高度以及垂直方向的外边距和内边距。常见的块级元素有 <div>、<p>、<h1> 等。
div { display: block; }
2. inline： 元素会生成一个行内框，与相邻的行内元素在一行上，只占据内容的空间，不可设置宽度、高度、垂直方向的外边距和内边距。常见的行内元素有 <span>、<a>、<strong> 等。
span { display: inline; }
3.inline-block： 元素会生成一个行内级块容器，可以设置宽度、高度以及垂直方向的外边距和内边距，但仍然保持行内元素的特性。常用于创建水平排列的块级元素。
div { display: inline-block; }
4. none： 元素不会在页面上显示，即隐藏元素。它不占据任何空间，对布局无影响。
div.hidden { display: none; }
5. flex： 元素成为一个伸缩盒子，并可以使用弹性布局。常用于创建灵活的、响应式的布局。
div { display: flex; }
6. grid： 元素成为一个网格容器，可以使用网格布局。用于创建复杂的二维布局。
div { display: grid; }
6. display 属性的灵活使用可以帮助开发者实现各种不同的布局效果，根据元素在页面上的显示需求选择适当的 display 属性值。
)
)
应用开发——基础组件)
