css布局和定位

CSS布局和定位是Web开发中的一个核心技能。以下是一些常用的布局和定位技术：

1. 浮动（Float）：

.float-left { float: left; }
.float-right { float: right; }

2. 定位（Position）：

.relative-position { position: relative; top: 10px; left: 20px; }
.absolute-position { position: absolute; top: 0; right: 0; }
.fixed-position { position: fixed; bottom: 0; left: 0; }

3. flexbox布局：

.flex-container { display: flex; }
.flex-item { flex: 1; }

4. grid布局：

.grid-container { display: grid; grid-template-columns: auto 1fr; }
.grid-item { grid-column: 2 / 3; }

5. 表格布局：

.table-layout { display: table; width: 100%; }
.table-row { display: table-row; }
.table-cell { display: table-cell; padding: 10px; }

6. 绝对定位（Inline-block）：

.inline-block { display: inline-block; vertical-align: top; }

这些方法可以根据不同的布局需求选择使用。在实际开发中，可以根据项目的具体要求和浏览器的兼容性需求进行选择和应用。