移动端布局(一)

于 2021-07-29 21:38:53 发布
阅读量576 收藏
点赞数
分类专栏： 前端 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/EM_77/article/details/119203685
版权

移动端布局——（一）

*Ps：笔记来源慕课教程
.

▶居中布局

在这里插入图片描述

1.中文布局css库

chinese-layout
布局

chinese-gradient
渐变色

  • 实例演示
<!DOCTYPE html>
<html>
<head>
...
  <title>Document</title>
  <!-- 在这里用link标签引入中文布局 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-layout">
  <!-- 在这里用link标签引入中文渐变色 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
  <style>
    /* 清除默认样式 */
    * { padding: 0; margin: 0; }
    /* 令html和body全屏显示 */
    html, body { height: 100%; }
    body {
      /* 先在父元素上设置grid布局 */
      display: grid;
      grid: var(--居中);
      /* 给个好看的渐变色 */
      background: var(--霾灰);
    } 
    .center {
      /* 指定子元素在中心位置 */
      grid-area: 中;
      /* 给子元素设置宽高，不然宽高为0导致什么也看不见 */
      width: 150px;
      height: 150px;
      /* 给一个好看的背景色 */
      background: var(--胭脂粉);
    }
  </style>
</head>
<body>
  <div class="center"></div>
</body>
</html>

效果如下：
在这里插入图片描述
.

2.绝对定位

居中布局通常分为两种，一种是固定宽高，另一种是非固定宽高。固定宽高很好理解，非固定宽高通常都是靠里面的内容来撑起盒子的高度，内容时多时少。

  • 实例演示
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 清除默认样式 */
    * { padding: 0; margin: 0; }
    /* 令html和body全屏显示, 并有一个灰色背景 */
    html, body { height: 100%; background: gray; }
    /* 先在父元素上设置相对定位 */
    body { position: relative } 
    .center {
      /* 绝对定位 */
      position: absolute;
      /* 上下左右全部为0 */
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      /* 给定宽高 */
      /* 如果不给定宽高盒子将会和父元素一样大，
      因为绝对定位上下左右都是 0，意为紧贴着父元素的边。*/
      width: 70%;
      height: 25%;
      /* 令外边距自动填充 */
      /*给了固定宽高，但没写 margin 的话盒子会固定在左上角。
      给了 margin: auto; 的话，浏览器会自动填充边距，令其居中。*/
      margin: auto;
      /* 白色背景 */
      background: white;
    }
  </style>
</head>
<body>
  <div class="center"></div>
</body>
</html>

效果如下：
在这里插入图片描述
.

2.1 绝对定位+负边距

"绝对定位+负边距"这种方法不适合绝对定位法那种宽百分之多少、高百分之多少这种相对单位，取而代之的是具体的数值。

    .center {
      /* 绝对定位 */
      position: absolute;
      /* 上方和左方为50% */
      top: 50%;
      left: 50%;
      /* 给定宽高 */
      width: 300px;
      height: 200px;
      /* 上外边距为负的给定高度的一半 */
      margin-top: -100px;
      /* 左外边距为负的给定宽度的一半 */
      margin-left: -150px;
      /* 白色背景 */
      background: white;
    }
  • top: 50%;和 left: 50%;会让盒子的左上角定位到中央位置；
  • 给上外边距和左外边距一个负值将盒子拉到中央位置；
  • margin 的百分比并不是相对于自身，而是相对于父元素的宽度，所以这里不能写成 -50%；

2.2 绝对定位+平移

有时中间盒子的内容是要靠后台传过来的数据决定的，如果写死的话，当数据较多时就会发生溢出，数据较少时又会空出一大片，所以我们需要一种更加智能的方式来实现居中布局。
负边距的百分比并不是相对于自身，而是相对于父元素，所以只能写具体的像素值，显得不够智能。而平移相对于自身，只需要无脑写 -50%就可以了。

    .center {
      /* 绝对定位 */
      position: absolute;
      /* 上方和左方为50% */
      top: 50%;
      left: 50%;
      /* 不用给宽高，但是可以给个内边距防止内容与盒子过于贴合 */
      padding: 10px;
      /* 这个50%是相对于自身宽高而言的 */
      transform: translate(-50%, -50%);
      /* 白色背景 */
      background: white;
    }
  • margin 的百分比是相对于父元素的宽；translate 函数的百分比是相对于自身；
  • 不仅适用于未知宽高，也同样适用于固定宽高的居中布局。

效果如下：
在这里插入图片描述
.

3. 网格布局

网格其实就是最近比较火的 Grid 布局，原理就是把父元素分割成一个个的小格子。然后子元素指定自己具体在那个格子上，有点类似于表格布局。

    /* 中央盒子的直接父元素 */
    body {
      /* 令其变成网格布局 */
      display: grid;

      /* 令子元素居中 */
      place-items: center;
    }
    .center {
	  /* 不用给宽高，但是可以给个内边距防止内容与盒子过于贴合 */
      padding: 10px;   
      /* 白色背景 */
      background: white;
    }

效果如 “绝对定位+平移” 的效果。
.

4. 弹性布局

    /* 找到中央盒子的直接父元素 */
    body {
      /* 令其变成弹性布局 */
      display: flex;
    }
    .center {
      /* 自动外边距 */
      margin: auto;
      /* 白色背景 */
      background: white;
      /* 不用给宽高，但是可以给个内边距防止内容与盒子过于贴合 */
      padding: 10px;
    }

效果如 “绝对定位+平移” 的效果。

  • 父元素：display: flex;
  • 子元素：margin: auto;

.

5.表格布局

    body {
      /* 令body全屏显示 */
      width: 100vw;
      height: 100vh;
      /* 显示为表格的格子 */
      display: table-cell;
      /* 水平居中 */
      text-align: center;
      /* 垂直居中 */
      vertical-align: middle;
      /* 灰色背景 */
      background: gray;
    }
    .center {
      /* 显示为行内块元素 */
      display: inline-block;
      /* 不用给宽高，但是可以给个内边距防止内容与盒子过于贴合 */
      padding: 10px;
      /* 白色背景 */
      background: white;
    }

效果如 “绝对定位+平移” 的效果。

此布局的关键点在于：

  • 父元素上 3 个样式设置：display: table-cell; text-align: center; vertical-align: center;；
  • 子元素上设置：display: inline-block;。

.

▶单列布局

在这里插入图片描述

1. 外边距

  • 实例演示
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 清除默认样式 */
    * { padding: 0; margin: 0; }
    /* 令html和body全屏显示, 并有一个灰色背景 */
    html, body { height: 100%; background: gray; }
    .center {
      /* 给个宽高方便查看 */
      width: 90%;
      height: 100%;
      /* 外边距上下为0、左右为自动 */
      margin: 0 auto;
      /* 白色背景 */
      background: white;
    }
  </style>
</head>
<body>
  <div class="center"></div>
</body>
</html>

效果如下：
在这里插入图片描述
.

2. 弹性布局

    /* 找到单列盒子的直接父元素 */
    body {
      /* 令其变成弹性布局 */
      display: flex;
      /* 水平方向居中 */
      justify-content: center;
    }
    .center {
      /* 相当于flex版的width: 90% */
      flex-basis: 90%;
      /* 白色背景 */
      background: white;
    }

效果如 “外边距” 效果所示。

  • 元素设置 display: flex；
  • 水平方向属性为 justify-content；
  • 垂直方向属性为 align-items；

3. 绝对定位+平移

平移是 CSS3 的属性，它可以按照自身尺寸的百分比来进行平移。

语法是：transform: translate(xx%);

    /* 在祖先元素上设置相对定位 */
    body { position: relative }
    .center {
      /* 绝对定位 */
      position: absolute;
      /* 左方为50% */
      left: 50%;
      /* 给个宽高方便查看 */
      width: 90%;
      height: 100%;
      /* 这个50%是相对于自身宽高而言的 */
      transform: translate(-50%);
      /* 白色背景 */
      background: white;
    }

效果如 “外边距” 效果所示。

Ps：只要涉及到绝对定位，记得一定要在祖先元素上设置相对定位 或 其他定位。

.

4. 网格布局

    /* 找到中央盒子的直接父元素 */
    body {
      /* 令其变成网格布局 */
      display: grid;
      /* 将其分成一行三列 */
      grid: 1fr / 1fr 10fr 1fr
    }
    .center {
      /* 将其定位于中间那个格子 */
      grid-area: 1 / 2 / 2 / 3;      
      /* 白色背景 */
      background: white;
    }

效果如下：
在这里插入图片描述
.

5. 行内块元素

利用元素的行内元素特性我们可以很轻松的做到水平居中。

语法格式：display: inline-block;

display: inline-block; 可以让元素既拥有行内元素的特性，同时又拥有块级元素的特性。

    body {
      /* 令子元素水平居中 */
      text-align: center;    
      /* 灰色背景 */
      background: gray;
    }
    .center {
      /* 令其显示为行内块元素 */
      display: inline-block;
      /* 给个宽高方便查看 */
      width: 90%;
      height: 100%;
      /* 白色背景 */
      background: white;
    }

效果如 “外边距” 效果所示。

.

6. 单列布局简单实例

  • 实例演示
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 在这里用link标签引入中文渐变色 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
  <style>
    /* 清除默认样式 */
    * { padding: 0; margin: 0; }
    body {
      /* 添加一个好看的背景色 */
      background: var(--墨色);
    }
    .center {
      /* 给个宽度方便查看 */
      width: 90%;
      /* 外边距上下为0、左右为自动 */
      margin: 0 auto;
    }  
    /* 列中的行 */
    li {
      /* 清除默认样式 */
      list-style: none;
      /* 给一个合适的高度 */
      height: 100px;
      /* 给一个合适的外边距 */
      margin: 20px 0;
      /* 添加一个好看的背景色 */
      background: var(--灯红酒绿);
    }
  </style>
</head>
<body>
  <ul class="center">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>
</html>

效果如下：
在这里插入图片描述
Ps：要点就是在居中布局的那个盒子里面放置一堆子元素，然后宽 100% 充满父元素，这就相当于一行了，再设置一些合适的边距，使其不至于过分拥挤。

.

▶双列布局

在这里插入图片描述

1. 多列属性

多列属性 columns 是 CSS3 的新增属性。

语法：columns: 2(列数);

  • 实例演示
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 清除默认样式 */
    * { padding: 0; margin: 0; }
    /* 令html和body全屏显示, 并有一个灰色背景 */
    html, body { height: 100%; background: gray; }
    /* 找到直接父元素 */
    body {
      /* 将列数设置为2 */
      columns: 2;
      /* 设置列间距 */
      column-gap: 10px;
    }
    div {
      /* 给个高度 */
      height: 100%;
      /* 白色背景 */
      background: white;
    }
    /* 左边盒子设置左边距 */
    .left { margin-left: 10px; }
    /* 右边盒子设置右边距 */
    .right { margin-right: 10px; }
  </style>
</head>
<body>
  <div class="left"></div>
  <div class="right"></div>
</body>
</html>

效果如下：
在这里插入图片描述
.

2. 绝对定位

    /* 在父元素上设置相对定位 */
    body { position: relative; }
    div {
      /* 绝对定位 */
      position: absolute;
      /* 令其上下方向与父元素的距离为0 */
      top: 0;
      bottom: 0;
      /* 白色背景 */
      background: white;
    }
    /* 左边的列 */
    .left {
      /* 令其左侧方向与父元素的距离为2% */
      left: 2%;
      /* 令其右侧方向与父元素的距离为51% */
      right: 51%;
    }
    /* 右边的列 */
    .right {
      /* 令其左侧方向与父元素的距离为51% */
      left: 51%;
      /* 令其右侧方向与父元素的距离为2% */
      right: 2%;
    }

效果同 “多列属性” 。

  • 这里的百分号指的不是宽度，而是相对于父元素的距离。
  • 在屏幕正中央位置画一条线，这条线就代表距离左边 50%、距离右边也是 50%：

在这里插入图片描述
然后左边 2%、右边 2%、中间 2%，但是中间的 2% 被平分成了两个 1%，这样左边的红线代表 left: 2%;，右边的两条绿线加在一起就是 51%，代表 right: 51%。

在这里插入图片描述
.

3. 弹性布局

    /* 找到直接父元素 */
    body {
      /* 显示为弹性盒子 */
      display: flex;
      /* 令其子元素在水平方向上均匀分布 */
      justify-content: space-evenly;
    }
    div {
      /* 这里类似于width: 48% */
      flex-basis: 48%;
      /* 给个高度 */
      height: 100%;
      /* 白色背景 */
      background: white;
    }
    >...
<body>
  <div></div>
  <div></div>
</body>

效果同 “多列属性” 。

  • 子元素一般会用 flex-basis属性来表示在父元素所占的长度。因为 flex 盒子不仅有横着的，还会有竖着的。假如竖着的再叫宽就不太合适了，所以取了 flex-basis 这么一个名字作为新的属性来表示长度( 横着的时候代表宽，竖着的时候代表高 )。

.

4. 网格布局

网格布局实现双列布局

5.中文布局css

chinese-layout + chinese-gradient

6. 双列布局简单实例（弹性盒子为例）

  • 实例演示
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 在这里用link标签引入中文渐变色 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
  <style>
    /* 清除默认样式 */
    * { padding: 0; margin: 0; }

    /* 找到直接父元素 */
    body {
      /* 显示为弹性盒子 */
      display: flex;

      /* 令其子元素在水平方向上均匀分布 */
      justify-content: space-evenly;

      /* 给一个好看的背景色 */
      background: var(--霾灰);
    }

    ul {
      /* 这里类似于width: 42% */
      flex-basis: 42%;

      /* 给个高度 */
      height: 100%;
    }

    li {
      /* 清除默认样式 */
      list-style: none;

      /* 给个合适的高度 */
      height: 150px;

      /* 给个合适的外边距 */
      margin: 20px 0;

      /* 给一个好看的背景色 */
      background: var(--极光绿);
    }
  </style>
</head>
<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>
</html>

效果如下：
在这里插入图片描述

.

▶吕形布局

吕字就是上面一个矩形，下面一个矩形。上面的矩形高度较小，通常固定在屏幕上，不会随着用户滑动手机而进行任何的移动。目前流行的方案一种是直接默认显示上栏，另一种是随着屏幕的滑动而慢慢显示出上栏。

在这里插入图片描述

1. 中文布局css库

同上。

2. 固定定位

将上栏固定在屏幕的特定位置，然后下栏添加合适的上边距。

  • 实例演示
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 在这里用link标签引入中文渐变色 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
  <style>
    /* 清除默认样式 */
    * { padding: 0; margin: 0; }
    /* 令html和body全屏显示 */
    html, body { height: 100% }
    /* 上面的那栏 */
    .top {
      /* 设置为固定定位 */
      position: fixed;
      /* 距离上边左边为0 */
      top: 0;
      left: 0;
      /* 宽度铺满屏幕 */
      width: 100%;
      /* 给个合适的高度 */
      height: 80px;
      /* 白色文字 */
      color: white;
      /* 蓝色背景 */
      background: var(--靛蓝); //便于看到滑动效果
    }
    .main {
      /* 给个合适的上边距 */
      margin-top: 90px;
      /* 给个合适的高度 */
      height: 1000px;
      /* 渐变背景 */
      background: var(--天蓝);
    }
  </style>
</head>
<body>
  <div class="top" style="font-size: 30px;">无论你怎么滑动屏幕，我都是固定不变的</div>
  <div class="main"></div>
</body>
</html>

效果如下：
在这里插入图片描述
.

3. 外边距的作用

外边距作用：固定定位的盒子不占用任何的空间（脱离默认文档流），所以为了弥补这段失去的空间，我们应该在主盒子上加入一个上边距。

4. 非固定定位

将上栏和主盒子都在屏幕的那个位置不动。

需要用到的属性：overflow-y

  • 实例演示
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 在这里用link标签引入中文渐变色 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
  <style>
    /* 清除默认样式 */
    * { padding: 0; margin: 0; }
    /* 令html和body全屏显示 */
    html, body { height: 100% }
    /* 上面的那栏 */
    .top {
      /* 设置一个合适的高度 */
      height: 10%;
      /* 蓝色背景 */
      background: var(--靛蓝);
    }
    /* 主显示区 */
    .main {
      /* 给个合适的高度 */
      height: 90%;
      /* 给个好看的渐变色 */
      background: var(--天蓝);
      /* 竖直方向的溢出设置为自动 */
      overflow-y: auto;
    }
    /* 盒子的默认样式 */
    div {
      font-size: 30px;
      color: white;
    }
  </style>
</head>
<body>
  <div class="top"></div>
  <div class="main">
    这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子
  </div>
</body>
</html>

效果如下：
在这里插入图片描述

可以看到这个案例虽然文字撑开了内容导致溢出，然后出现滚动条可以上下滚动，但背景色却没有变化，这是因为我们是在主盒子上面加的背景色。

这种靠子元素来撑开内容的溢出应该把样式全部写在子元素上面去，父元素只提供一个高度和一个 overflow-y 即可：

    /* 上面的那栏 */
    .top {
      /* 设置一个合适的高度 */
      height: 10%;
      /* 蓝色背景 */
      background: var(--靛蓝);
    }
    /* 主显示区 */
    .main {
      /* 给个合适的高度 */
      height: 90%;
      /* 竖直方向的溢出设置为自动 */
      overflow-y: auto;
    }
    .child {
      height: 1000px;
      /* 给个好看的渐变色 */
      background: var(--天蓝);
    }
    /* 盒子的默认样式 */
    div {
      font-size: 30px;
      color: white;
    }
    ...
<body>
  <div class="top"></div>
  <div class="main">
    <div class="child"></div>
  </div>
</body>

效果如下：
在这里插入图片描述

  • 上栏和下栏的宽度加起来要刚好是屏幕的高度；
  • 下栏一定要写 overflow-y: auto；
  • 想达到背景动态的效果，下栏的背景最好写在子元素上。

.

5. 吕形布局简单实例

  • 实例演示
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 在这里用link标签引入中文渐变色 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
  <style>
    /* 清除默认样式 */
    * { padding: 0; margin: 0 }

    /* 令html和body全屏显示 */
    html, body { height: 100% }

    /* 上面的那栏 */
    .top {
      /* 设置为固定定位 */
      position: fixed;

      /* 距离上边左边为0 */
      top: 0;
      left: 0;

      /* 宽度铺满屏幕 */
      width: 100%;

      /* 给个合适的高度 */
      height: 80px;

      /* 令其透明 */
      opacity: 0;

      /* 蓝色背景 */
      background: var(--靛蓝);
    }

    .main {
      /* 给个合适的高度 */
      height: 1000px;

      /* 渐变背景 */
      background: var(--湖蓝);
    }
  </style>
</head>
<body>
  <div class="top"></div>
  <div class="main"></div>

  <script>
    // 获取固定栏
    const dom = document.getElementsByClassName('top')[0]

    window.addEventListener('scroll', _ => {
      // 获取偏移值
      const top = document.documentElement.scrollTop

      // 设置一个合适的范围
      if (top <= 150) {
        // 对opacity作计算，透明度从起始到1随偏移值而改变
        const opacity = top / 150

        // 令上栏的透明度变成计算后的透明度
        dom.style.opacity = opacity
      } else {
        // 在移动一定范围后令其完全不透明
        dom.style.opacity = 1
      }
    })
  </script>
</body>
</html>

效果如下：
在这里插入图片描述
常见页面效果：

在这里插入图片描述

  • 这里就不用再给主盒子加上边距，因为在最上面的时候上栏是透明的，不会覆盖住内容的。
EM.27
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值