CSS布局技巧｜青训营笔记

Nevermore毓
71 阅读5分钟

1. 浮动（Float）布局：

  • float 属性用于定义元素在父元素中的浮动方式。
  • 浮动元素会脱离正常文档流，并根据 float 属性值的设置向左或向右浮动。
  • 浮动元素会影响其他非浮动元素的位置，使其环绕浮动元素。

2. 定位（Position）布局：

  • static：默认值，元素在文档流中正常显示，top、right、bottom、left、z-index属性在static下无效。
  • relative（一般用于对当前元素微调）：相对于自己原来的位置进行定位，不脱离标准流。
  • absolute：相对于最邻近的一个非static定位的祖先元素进行定位；若没有这样的祖先，则相对于视口进行定位，脱离标准流（子绝父相）。
  • fixed：相对于浏览器窗口（视口：当画面滚动时，固定不动）进行定位，脱离标准流（常用）。
  • sticky：它的行为就像 position:relative; 而当页面滚动超出阈值（top、right、bottom、left）时，它的表现就像 position:fixed，它会固定在目标位置，是相对于最近的滚动祖先包含的滚动视口。

定位总结

将position设置为absolute和fixed元素的特点

  • 可以随意设置宽高，块级、行内级、行内块级元素的特性消失（如行内级元素可以设置宽高）。
  • 宽高默认由内容决定。
  • 不再给父元素汇报宽高数据（如父元素的高度由子元素撑开，子元素设置为绝对定位后，父元素高度不再由子元素撑开）。
  • 脱标元素内部默认还是按照标准流布局。

定位参照对象的宽度（父元素） = left + right + margin-left + margin-right +绝对定位元素的宽度（子元素）

定位参照对象的高度（父元素） = top + bottom + margin-top + margin-bottom +绝对定位元素的高度（子元素）

/* 子元素在父级元素里面水平垂直居中 */
.child{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

width:auto

  • 行内非替换元素：width包裹内容
  • 块级元素：width包含块的宽度
  • 绝对定位元素：width包含内容

3. 弹性盒子（Flexbox）布局：

  • 弹性盒子布局是一种灵活的布局模型，用于在容器中进行自适应和对齐。
  • 弹性盒子由容器和内部项目组成，通过设置容器的属性来控制项目的布局。
  • 容器的属性：display: flex，用于将容器设置为弹性盒子；flex-direction，用于设置项目在主轴上的排列方式；justify-content，用于设置项目在主轴上的对齐方式；align-items，用于设置项目在交叉轴上的对齐方式。
  • 项目的属性：flex-grow，用于设置项目的放大比例；flex-shrink，用于设置项目的缩小比例；flex-basis，用于设置项目的初始长度；order，用于设置项目的排列顺序。

容器即父元素，项目即子元素

display: flex | inline-flex; 分别生成一个块状或行内的 flex 容器盒子。简单说来，如果你使用块元素如 div，你就可以使用 flex，而如果你使用行内元素，你可以使用 inline-flex。

Flex container容器

有下面六种属性可以设置在容器上：

  1. flex-direction 主轴的方向 （默认：row 水平）
  2. flex-wrap 容器内项目是否可换行 (默认：nowrap 不换行 常用：wrap)
  3. flex-flow flex-direction 和 flex-wrap 的简写形式 （没用）
  4. justify-content 项目在主轴的对齐方式。（默认: flex-start 左对齐）

justify-content属性

  1. align-items 项目在交叉轴上的对齐方式（默认：stretch 即如果项目未设置高度或者设为 auto，将占满整个容器的高度。）

align-items属性

  1. align-content 多根轴线的对齐方式，如果项目只有一根轴线，即flex-wrap: nowrap 不换行，那么该属性将不起作用（默认值为 stretch）

align-content属性

Flex item项目

有下面六种属性可以设置在项目上：

  1. order 项目在容器中的排列顺序，数值越小，排列越靠前（默认值为 0）

  2. flex-basis 项目在主轴上占据的空间（默认值：auto，即项目本来的大小，优先级高于 weight、height）

  3. flex-grow 项目的放大拉伸比例（默认值为 0，即如果存在多余空间，也不放大）

    • 如果所有项目的flex-grow属性都为 1，则它们将等分剩余空间（如果有的话）。
    • 当flex container在主轴方向上有剩余size时，才生效。

  4. flex-shrink 项目的缩小比例（默认值: 1，即如果空间不足，该项目将缩小，负值对该属性无效）

  5. flex flex-grow, flex-shrink 和 flex-basis的简写（默认值是 0 1 auto） 有关快捷值：auto (1 1 auto) 、 none (0 0 auto) 、1 建议优先使用这个属性，而不是单独写三个分离的属性。

  6. align-self 单个项目在交叉轴的对齐方式 (center、flex-end)

align-self属性

当涉及到 CSS 布局技巧时，以下是一些常用的技术和它们的应用场景以及实操实践。

1. 浮动（Float）布局：

应用场景：经典的多列布局，例如实现文字环绕图片、实现网页的左侧导航栏和右侧内容区域等。

实操实践：

    .left-column {
      float: left;
      width: 30%;
    }

    .right-column {
      float: right;
      width: 70%;
    }

2. 定位（Position）布局：

应用场景：实现绝对定位或相对定位的元素布局，例如实现图像轮播、实现对话框或弹出框等。

实操实践：

    .carousel-container {
      position: relative;
      width: 100%;
      height: 400px;
      overflow: hidden;
    }

    .carousel-item {
      position: absolute;
    }

3. 弹性盒子（Flexbox）布局：

应用场景：实现自适应且灵活的元素排列，特别适用于构建响应式布局，如导航菜单、列表、网格布局等。

实操实践：

    cssCopy Code
    .container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    .item {
      flex: 1;
    }

4. 网格（Grid）布局：

应用场景：实现复杂的网格化布局，例如实现产品展示页面、图文混排等。

实操实践：

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

    .item {
      grid-column: span 1;
      grid-row: span 2;
    }

5. 响应式布局：

应用场景：根据不同设备的屏幕尺寸调整布局，以提供更好的用户体验。

实操实践：使用媒体查询（Media Queries）来应对不同的屏幕尺寸。

    /* 当屏幕宽度小于 768px 时，调整布局 */
    @media (max-width: 768px) {
      .container {
        flex-direction: column;
      }
    }
avatar
文章
阅读
粉丝