HTML CSS布局定位

在编写网页代码时，首先应该做的就是设计好页面的布局形式，然后再往里面填充内容。网页布局的好与坏，直接决定了网页最终的展示效果。PC端常见的网页布局形式有两列布局、三列布局等。在CSS中，我们通常使用float、position和flexbox等属性来实现不同的布局效果。

一、float

float属性可以使元素浮动到页面的一侧，使其脱离正常的文档流。浮动元素可以与其他元素重叠，也可以与其他浮动元素并排排列。

.float-left {
  float: left;
}

.float-right {
  float: right;
}

二、position

position属性可以设置元素在页面中的位置。常用的值有static、relative、absolute和fixed。

• static：默认值。元素在页面中按照正常的文档流排列。
• relative：元素相对于其正常位置移动。
• absolute：元素相对于其最近的已定位父元素移动。
• fixed：元素相对于视口移动。

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
}

三、flexbox

flexbox是一个强大的布局系统，可以帮助我们创建灵活的布局。flexbox容器中的子元素被称为flex项目，它们可以沿着主轴或副轴排列。

.flex-container {
  display: flex;
}

.flex-item {
  flex: 1;
}

四、Grid

Grid是一个新的布局系统，可以帮助我们创建更复杂的布局。Grid容器中的子元素被称为Grid单元格，它们可以沿着行和列排列。

.grid-container {
  display: grid;
}

.grid-item {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

五、示例

下面是一个简单的两列布局的示例：

<div class="container">
  <div class="column left">
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus rutrum. Donec ullamcorper nulla non metus auctor fringilla. Sed convallis accumsan odio, vel euismod nibh tincidunt sit amet. Proin eget tortor risus. Nunc eget lacus eget nunc luctus rutrum. Donec ullamcorper nulla non metus auctor fringilla. Sed convallis accumsan odio, vel euismod nibh tincidunt sit amet.</p>
  </div>
  <div class="column right">
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus rutrum. Donec ullamcorper nulla non metus auctor fringilla. Sed convallis accumsan odio, vel euismod nibh tincidunt sit amet. Proin eget tortor risus. Nunc eget lacus eget nunc luctus rutrum. Donec ullamcorper nulla non metus auctor fringilla. Sed convallis accumsan odio, vel euismod nibh tincidunt sit amet.</p>
  </div>
</div>

.container {
  display: flex;
}

.column {
  flex: 1;
}

.column.left {
  background-color: #f0f0f0;
}

.column.right {
  background-color: #ffffff;
}

这个示例中，我们使用flexbox创建了一个两列布局。两个列的宽度相同，并垂直排列。左侧列的背景颜色为#f0f0f0，右侧列的背景颜色为#ffffff。