css布局技巧

小鱼冻干
134 阅读4分钟

布局方式

  1. 浮动布局（Float）

    • 应用场景：用于创建多列布局，常用于头部导航栏、图片和文本的并排显示等。

    • 实操实践：

      css
.float-left {
  float: left;
  width: 50%;
}
.float-right {
  float: right;
  width: 50%;
}

      在HTML中使用：

      html
<div class="float-left">左侧内容</div>
<div class="float-right">右侧内容</div>

  2. 定位布局（Position）

    • 应用场景：用于创建重叠元素，常用于弹出框、下拉菜单、固定位置的元素等。

    • 实操实践：

      css
.fixed-element {
  position: fixed;
  top: 10px;
  right: 10px;
}

      在HTML中使用：

      html
<div class="fixed-element">固定位置的元素</div>

  3. 弹性盒子布局（Flexbox）

    • 应用场景：用于创建灵活的布局，适用于现代响应式设计，常用于网格布局、卡片布局等。

    • 实操实践：

      css
.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-item {
  flex: 1;
}

      在HTML中使用：

      html
<div class="flex-container">
  <div class="flex-item">项目1</div>
  <div class="flex-item">项目2</div>
  <div class="flex-item">项目3</div>
</div>

  4. 网格布局（Grid）

    • 应用场景：用于创建复杂的二维布局，常用于复杂的页面布局、卡片布局等。

    • 实操实践：

      css
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
.grid-item {
  /* 可以添加样式 */
}

      在HTML中使用：

      html
<div class="grid-container">
  <div class="grid-item">项目1</div>
  <div class="grid-item">项目2</div>
  <div class="grid-item">项目3</div>
  <!-- 更多项目 -->
</div>

  5. 居中布局

    • 应用场景：用于将元素居中显示，无论是水平居中还是垂直居中。

    • 实操实践（水平垂直居中）：

      css
.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 视口高度 */
}

      在HTML中使用：

      html复制
<div class="centered">
  <div>居中的元素</div>
</div>

Flex布局

Flex使用语法

任何一个容器都可以指定为Flex布局

使用方法：

.box {
    display:flex;
}

行内元素也可以使用Flex布局：

.box {
    display:inline-flex;
}

注意： 使用Flex布局后，子元素的“float”、“clear”、“vertical-align”属性将失效

属性

Flex容器一共有六大属性，在这里我们给出：

1、flex-direction：内部元素的排列方式：从左到右、从右到左、从上到下、从下到上 2、flex-wrap：子元素的换行方式：不换行、换行(第一行在上面、第二行在上面) 3、flex-flow：子元素的排列方式和换行方式的简写 4、justify-content：子元素的水平对齐方式 5、align-items：子元素的垂直对齐方式 6、align-content：设置多个元素组成的整块的对齐方式

1、flex-direction

内部元素的排列方式---->(从左到右、从右到左、从上到下、从下到上)

.box {
    flex-direction:row | row-reverse | column | column-reverse;
}

2、flex-wrap

默认情况下，项目都排在一条线(轴线)上，flex-wrap定义如果一条轴线排不下，如何换行

简化：子元素的换行方式：不换行、换行(第一行在上面、第二行在上面)

.box {
    flex-wrap:nowrap | wrap | warp-reverse;
}

nowraop(默认) 不换行、warp 换行(第一行在上、wrap-reverse 换行(第二行在上)

3、flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为：“row nowrap”

简化： 是子元素的排列方式和换行方式的简写

    flex-flow:<flex-direction> || <flex-wrap>;
}

4、justify-content

justify-content属性定义了项目在主轴上的对齐方式

简化： 设置子元素的水平对齐方式

.box {
    justify-content:flex-start | flex-end | center | space-between | space-around;
}
  • flex-start(默认值)：左对齐
  • flex-end：右对齐
  • center：居中
  • space-between：两端对齐，项目之间的间隔相等
  • space-around：每个项目两侧的间隔相等，所以，项目之间的间隔比的项目与边框的间隔大一倍

5、align-items

align-items属性定义项目在交叉轴上如何对齐

简化： 设置子元素的垂直对齐方式

.box {
    align-items:flex-start | flex-end | center | baseline | stretch;
}
  • flex-start：交叉轴的起点对齐(顶部对齐)
  • flex-end：交叉轴的终点对齐(底部对齐)
  • center：交叉轴的中点对齐(垂直对齐)
  • baseline：项目的第一行文字的基线对齐(基于内部第一行文本对齐)
  • stretch(默认值)：如果项目未设置成高度或设为auto，将占满整个容器的高度(高度占满整个容器)

6、align-content

align-content属性定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用

简化：

设置多个元素组成的整块的对齐方式

.box {
    align-content:flex-start | flex-end | center | space-between | space-around | stretch;
}
  • flex-start：与交叉轴的起点对齐(顶部对齐)
  • flex-end：与交叉轴的终点对齐(底部对齐)
  • center：与交叉轴的中点对齐(居中对齐)
  • sapce-between：与交叉轴两端对齐，轴线之间的间隔平均分布
  • space-around：每根轴线两侧的间隔相等，所以轴线之间的间隔比轴线与边框之间的间隔大
  • stretch(默认值)：轴线占满整个交叉轴(高度占满整个容器)
avatar
文章
阅读
粉丝