Css布局复习

我的性格比较怪
143 阅读5分钟

CSS布局是构建网页的基础。它可以让你创建各种各样的布局，从简单的单列布局到复杂的多列布局。在本文中，我将介绍常用的CSS布局方法，并提供示例代码和演示链接，帮助你更好地了解和使用它们。

1. 流式布局

流式布局是最基本的布局方法，它使用相对于父元素宽度的百分比来定义元素的宽度。这种布局方法可以自动适应不同屏幕大小，并且非常适合移动设备。

示例代码：

.container {
  width: 80%;
  margin: 0 auto;
}

.box {
  width: 30%;
  float: left;
  margin: 10px;
}

2. 栅格布局

栅格布局是一种基于网格系统的布局方法，它将页面划分为多个等宽的列，并使用相应的 CSS 类来控制布局。这种布局方法非常适合响应式设计，并且可以很容易地实现多列布局。

示例代码：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.box {
  padding: 10px;
  background-color: #f7f7f7;
}

3. 弹性布局

弹性布局是一种基于弹性盒子模型的布局方法，它可以使元素在容器中自动调整位置和大小。这种布局方法非常适合响应式设计和移动设备。

示例代码：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.box {
  flex-basis: calc(33.33% - 20px);
  margin-bottom: 20px;
}

4. 定位布局

定位布局是一种使用绝对或相对定位的布局方法，它可以使元素相对于其父元素或页面的某个位置进行定位。这种布局方法非常适合实现浮动元素、居中元素和悬浮菜单等效果。

示例代码：

.container {
  position: relative;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

5. 网格布局

网格布局是一种基于网格的布局方法，它可以将页面划分为多个行和列，并使用 CSS 属性来控制它们的大小和位置。这种布局方法非常适合实现复杂的多列布局和网格式设计。

示例代码：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
}

.box {
  background-color: #f7f7f7;
}

6. 多列布局

多列布局是一种将页面划分为多个列的布局方法，它可以使用 CSS 列属性来定义列的数量、宽度和间距。这种布局方法非常适合实现报纸、杂志和博客等多列内容的布局。

示例代码：

.container {
  columns: 3;
  column-gap: 20px;
}

.box {
  margin-bottom: 20px;
}

7. 瀑布流布局

瀑布流布局是一种基于绝对定位的布局方法，它可以使元素按照一定的顺序依次排列，并自动适应不同的尺寸。这种布局方法非常适合实现图片、商品和博客等瀑布流式布局。

示例代码：

.container {
  position: relative;
}

.box {
  position: absolute;
  left: 0;
  top: 0;
  width: 33.33%;
  margin-bottom: 20px;
}

8. 对比下flex布局和grid布局

CSS中的Flexbox和Grid布局是两种常用的响应式布局方式，可以用于创建灵活的、响应式的网页布局。以下是它们的详细描述：

  1. Flexbox布局

Flexbox是一种用于设计灵活和响应式布局的CSS模块，它可以通过定义容器和其子元素的布局来实现。在Flexbox中，我们将页面中的元素划分为容器和子元素两类。

容器的属性定义如下：

  • display: flex; 声明一个容器采用Flex布局。
  • flex-direction: row/column; 定义主轴方向，row表示水平方向，column表示垂直方向。
  • justify-content: flex-start/flex-end/center/space-between/space-around; 定义主轴上的对齐方式，分别表示起点、终点、居中、两端对齐、均匀分布。
  • align-items: flex-start/flex-end/center/baseline/stretch; 定义侧轴上的对齐方式，分别表示起点、终点、居中、基线对齐、拉伸对齐。
  • flex-wrap: nowrap/wrap/wrap-reverse; 定义是否换行，nowrap表示不换行，wrap表示自动换行，wrap-reverse表示反向自动换行。

子元素的属性定义如下：

  • flex-grow: ; 定义元素在容器中的占比，数字越大占比越大。
  • flex-shrink: ; 定义元素在容器中缩小的比例。
  • flex-basis: /%/auto; 定义元素在容器中的基础宽度，可以为固定长度、百分比或自适应宽度。

通过设置这些属性，我们可以在Flex容器中实现各种复杂的布局。

   2. Grid布局

CSS Grid布局是一个二维的网格系统，它可以将一个网页划分为行和列，然后将页面中的元素放置到这些行和列的交叉点上。Grid布局的主要特点是可以更精细地控制元素的位置和间距，使得页面布局更加灵活和响应式。

Grid布局的属性定义如下：

  • display: grid; 声明一个元素采用Grid布局。

  • grid-template-columns/rows: ?; 定义网格的列/行大小和名称。

  • grid-gap: ; 定义网格的间距。

  • grid-template-areas: ; 定义一个基于区域的布局，其中字符串表示每个区域的名称。

  • justify-content: start/end/center/stretch; 定义网格内容在主轴方向上的对齐方式。

  • align-content: start/end/center/stretch/space-between/space-around; 定义网格内容在侧轴方向上的对齐方式。

  • justify-items: start/end/center/stretch; 定义网格内单元格的水平对齐方式。

  • align-items: start/end/center/stretch; 定义网格内单元格的垂直对齐方式。

  • grid-auto-rows/columns: ; 定义自动创建的网格行/列的大小。

通过设置这些属性，我们可以创建一个复杂的网格布局，其中每个元素可以被放置在指定的网格单元格中。Grid布局也支持响应式设计，可以通过媒体查询和自适应单元格大小来适应不同屏幕大小和设备类型。

avatar
文章
阅读
粉丝