如何让自己的文字和图片不乱跑,如何让网站适配手机端?

CSS有很多的历史问题

网上搜索一下如何让元素居中就有十几种方法,而且也很难适配电脑和手机

但是Flex的出现以很简单的方式解决了大部分布局问题,一举成为了现代网站的主流布局方式

所以大家以后尽量用flex去布局,特殊的再用其他属性,Flex翻译: 弹性

html标签会把内容分成小盒子,使用醉最多的div,display: block .如果改为一下变成:display: flex就变成弹性盒子

弹性盒子: 可以控制下级盒子的位置

弹性盒子有坐标轴

坐标轴分为主轴和交叉轴

下级盒子会按照这两个轴排列

image-20250313183957604.png

image-20250313184204541.png

默认是占满交叉轴位置的,如果改为center,可以看到三个子盒子跑到了交叉轴的中间

image-20250313184327655.png

改成flex-end 就会跑到尾部.

在flex盒子中不仅仅是主盒子能控制下级盒子,下级盒子也可以控制自己.比如说:

image-20250313184102787.png

跑到主轴开头怎么办?

得用margin: auto .

image-20250313184417987.png

还有一个比较常用的就是下级盒子上的flex:1 属性

看效果:它会占满上级盒子的剩余全部位置,常见于多端适配场景

image-20250313184528005.png

如果给其他下级盒子也加上,它们就会平分,如果把其中一个变成2,那么就会占分配比例的两倍,不管我们的屏幕是大是小,他都会按比例分配,剩下一些属性就不多罗列,可以看这篇文章: 深度解析 CSS Flexbox 布局 - 2020年最新版在 CSS flexbox 布局出现以前，如果要控制 HTM - 掘金

只要理解怎么使用就行

实际案例:

image-20250313185032917.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex 布局</title>
  <style>
    body {
      margin: 0;
      height: 100vh;
      background-color: #eee;
    }

    /* * {
      border: 1px solid black;
    } */

    .yingYing {
      box-shadow: rgb(0, 0, 0 / 20%) 0px 2px 1px -1px,
        rgb(0, 0, 0 / 14%) 0px 1px 1px 0px, rgb(0, 0, 0 / 12%) 0px 1px 3px 0px;
    }

    .flex {
      display: flex;
    }

    .baiSe {
      background-color: white;
    }

    /* 主区域要占满除了侧边栏以外的所有地方 */
    .flex1 {
      flex: 1;
    }

    .column {
      flex-direction: column;
    }

    .mg8 {
      margin: 8px;
    }

    .mgr8 {
      margin-right: 8px;
    }

    .mgt8 {
      margin-top: 8px;
    }

    .daoHang {
      padding: 10px 20px;
      border-bottom: 1px solid rgb(196, 187, 187);
      font-size: 14px;
      color: #666;
    }
  </style>
</head>

<body class="flex">
  <!-- 侧边栏 -->
  <div style="width: 200px;z-index: 2;" class="baiSe .yingYing">
    <!-- 头像栏 -->
    <div style="padding: 10px;align-items: center;justify-content: center; border-bottom: 1px solid #f8f3f3;"
      class="flex">
      <img src="./头像.png" width="40px" alt="">
      <div style="margin-left: 10px;font-size: 20px;">YJY</div>
    </div>

    <!-- 导航栏 -->
    <div class="flex1">
      <div class="daoHang">导航</div>
      <div class="daoHang">导航</div>
      <div class="daoHang">导航</div>
      <div class="daoHang">导航</div>
      <div class="daoHang">导航</div>
    </div>
  </div>


  <!-- 主区域 -->
  <div class="flex1 flex column">
    <!-- 头部栏 -->
    <div style="height: 60px;z-index: 1;" class="baiSe .yingYing"></div>
    <!-- 内容区 -->
    <div style="overflow: auto;" class="flex1 flex">
      <!-- 左区 -->
      <div style="flex: 3;" class="flex column mg8">
        <!-- 数据区 -->
        <div class="flex">
          <!-- 数据块 -->
          <div style="height: 100px;" class="flex1 baiSe mgr8 .yingYing"></div>
          <div style="height: 100px;" class="flex1 baiSe mgr8 .yingYing"></div>
          <div style="height: 100px;" class="flex1 baiSe mgr8 .yingYing"></div>
          <div style="height: 100px;" class="flex1 baiSe .yingYing"></div>
        </div>
        <!-- 列表区 -->
        <div class="flex column">
          <!-- 列表项 -->
          <div style="height: 160px;" class="baiSe mgt8 .yingYing"></div>
          <div style="height: 160px;" class="baiSe mgt8 .yingYing"></div>
          <div style="height: 160px;" class="baiSe mgt8 .yingYing"></div>
          <!-- 如果列表项很多 给内容区加一个overflow: auto 让它们只在内容区上下滚动 -->
          <div style="height: 160px;" class="baiSe mgt8 .yingYing"></div>
          <div style="height: 160px;" class="baiSe mgt8 .yingYing"></div>
          <div style="height: 160px;" class="baiSe mgt8 .yingYing"></div>

        </div>
        <!-- 右区 -->
        <div style="flex: 1;" class="flex column mgr8 mgt8">
          <!-- 提升区 -->
          <div style="height: 150px;" class="baiSe .yingYing"></div>
          <!-- 消息区 -->
          <div style="height: 300px;" class="baiSe mgt8 .yingYing"></div>
        </div>
      </div>
    </div>

</body>

</html>

image-20250313193311244.png

最后说一下怎么做移动端适配

CSS中有个媒体查询的功能

使用手机端: 具体大小屏幕可以查一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex 布局</title>
  <style>
    body {
      margin: 0;
      height: 100vh;
      background-color: #eee;
    }

    /* * {
      border: 1px solid black;
    } */

    .yingYing {
      box-shadow: rgb(0, 0, 0 / 20%) 0px 2px 1px -1px,
        rgb(0, 0, 0 / 14%) 0px 1px 1px 0px, rgb(0, 0, 0 / 12%) 0px 1px 3px 0px;
    }

    .flex {
      display: flex;
    }

    .baiSe {
      background-color: white;
    }

    /* 主区域要占满除了侧边栏以外的所有地方 */
    .flex1 {
      flex: 1;
    }

    .column {
      flex-direction: column;
    }

    .mg8 {
      margin: 8px;
    }

    .mgr8 {
      margin-right: 8px;
    }

    .mgt8 {
      margin-top: 8px;
    }

    .daoHang {
      padding: 10px 20px;
      border-bottom: 1px solid rgb(196, 187, 187);
      font-size: 14px;
      color: #666;
    }

    /* 当屏幕宽度小于600px 时要改变css*/
    @media (max-width: 600px) {
      .ceBian {
        display: none;
        /*这里可以查一下怎么点击一下弹出来*/
      }

      .neiRong {
        flex-direction: column;
      }

      .shuJuQu {
        flex-direction: column;
      }

      .youQu {
        margin-left: 8px;
      }

      .shuJu {
        margin: 0 0 8px;
        flex: auto;
      }


    }
  </style>
</head>

<body class="flex">
  <!-- 侧边栏 -->
  <div style="width: 200px;z-index: 2;" class="baiSe .yingYing">
    <!-- 头像栏 -->
    <div style="padding: 10px;align-items: center;justify-content: center; border-bottom: 1px solid #f8f3f3;"
      class="flex">
      <img src="./头像.png" width="40px" alt="">
      <div style="margin-left: 10px;font-size: 20px;">YJY</div>
    </div>

    <!-- 导航栏 -->
    <div class="flex1">
      <div class="daoHang">导航</div>
      <div class="daoHang">导航</div>
      <div class="daoHang">导航</div>
      <div class="daoHang">导航</div>
      <div class="daoHang">导航</div>
    </div>
  </div>


  <!-- 主区域 -->
  <div class="flex1 flex column">
    <!-- 头部栏 -->
    <div style="height: 60px;z-index: 1;" class="baiSe .yingYing"></div>
    <!-- 内容区 -->
    <div style="overflow: auto;" class="neiRong flex1 flex">
      <!-- 左区 -->
      <div style="flex: 3;" class="flex column mg8">
        <!-- 数据区 -->
        <div class="flex shuJuQu">
          <!-- 数据块 -->
          <div style="height: 100px;" class="shuJu baiSe mgr8 .yingYing"></div>
          <div style="height: 100px;" class="shuJu baiSe mgr8 .yingYing"></div>
          <div style="height: 100px;" class="shuJu baiSe mgr8 .yingYing"></div>
          <div style="height: 100px;" class="shuJu baiSe .yingYing"></div>
        </div>
        <!-- 列表区 -->
        <div class="flex column">
          <!-- 列表项 -->
          <div style="height: 160px;" class="baiSe mgt8 .yingYing"></div>
          <div style="height: 160px;" class="baiSe mgt8 .yingYing"></div>
          <div style="height: 160px;" class="baiSe mgt8 .yingYing"></div>
          <!-- 如果列表项很多 给内容区加一个overflow: auto 让它们只在内容区上下滚动 -->
          <div style="height: 160px;" class="baiSe mgt8 .yingYing"></div>
          <div style="height: 160px;" class="baiSe mgt8 .yingYing"></div>
          <div style="height: 160px;" class="baiSe mgt8 .yingYing"></div>

        </div>
        <!-- 右区 -->
        <div style="flex: 1;" class="flex column mgr8 mgt8 youQu">
          <!-- 提升区 -->
          <div style="height: 150px;" class="baiSe .yingYing"></div>
          <!-- 消息区 -->
          <div style="height: 300px;" class="baiSe mgt8 .yingYing"></div>
        </div>
      </div>
    </div>

</body>

</html>