CSS -如何排列div和文本

在前端开发中，CSS（层叠样式表）是一种用于描述网页的样式和布局的语言。通过使用CSS，可以控制HTML元素的外观和位置。在排列div和文本方面，可以使用以下CSS属性和技巧：

display属性：display属性用于设置元素的显示方式。常见的取值包括：
- block：将元素显示为块级元素，独占一行，默认宽度为父元素的100%。
- inline：将元素显示为行内元素，不会独占一行，宽度由内容决定。
- inline-block：将元素显示为行内块级元素，不会独占一行，可以设置宽度和高度。

float属性：float属性用于设置元素浮动，使其脱离正常的文档流，并可以实现多列布局。常见的取值包括：
- left：向左浮动。
- right：向右浮动。
- none：取消浮动。
position属性：position属性用于设置元素的定位方式。常见的取值包括：
- static：元素正常定位，不受top、bottom、left、right属性影响。
- relative：相对定位，相对于元素原本的位置进行偏移。
- absolute：绝对定位，相对于最近的非static定位的父元素或根元素进行偏移。
- fixed：固定定位，相对于浏览器窗口进行偏移，元素在滚动时不会移动。
flexbox布局：flexbox是一种弹性盒子布局模型，通过设置容器和子元素的属性，可以实现灵活的布局方式。常用的属性包括：
- display: flex：将容器设置为弹性容器。
- flex-direction：设置主轴的方向，可以是row（水平方向）、column（垂直方向）等。
- justify-content：设置主轴上子元素的对齐方式，可以是flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）等。
- align-items：设置侧轴上子元素的对齐方式，可以是flex-start、flex-end、center等。
CSS Grid布局：CSS Grid是一种二维网格布局模型，通过定义网格容器和网格项，可以实现复杂的布局。常用的属性包括：
- display: grid：将容器设置为网格容器。
- grid-template-columns：设置网格容器的列宽。
- grid-template-rows：设置网格容器的行高。
- grid-gap：设置网格项之间的间隔。