记录一下前端布局的知识点

在实际需求当中，最常见的布局需求就是各种各样的居中，水平居中、垂直居中、水平垂直居中，我常常记不住，然后又去翻文档(说白了就是代码写少了>_<)。
不 bb 了，直接上代码吧

margin 0 auto + 绝对定位

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
<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  .container {
    position: relative;
    width: 80%;
    height: 400px;
    margin: 0 auto;
    background-color: red;
  }

  .box {
    position: absolute;
    width: 50%;
    background-color: yellow;
    height: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
</body>

总结：
这里使用margin: 0 auto 让 container 水平居中，然后使用绝对定位，让 box 相对于 container 水平垂直居中，简单且粗暴，但是不要忘记定位。

弹性盒子 flex 和 网格布局 grid

这俩更加的简单与粗暴

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
<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  .container {
    display: flex;
    width: 80%;
    height: 400px;
    margin: 0 auto;
    background-color: red;
    justify-content: center;
    align-items: center;
  }
  .box {
    width: 50%;
    background-color: yellow;
    height: 80%;
  }
</style>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
</body>

但是需要注意的是，当 display 设置成grid的时候，子box 要给一个具体的宽度，不然不显示。

让我头疼的 background

这个属性算是我比较头疼的一个属性，因为很多属性值都记不住。

这里写一下给一个元素设置一个背景颜色，给的图片很小或者很大，都没法占满指定的盒子。

其实设置 background-size:contain;就能解决了，并且不要忘记设置 no-repeat。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
  .box {
    width: 30%;
    background-color: yellow;
    height: 80%;
    background: url(./img.jpg) no-repeat;
    background-size: contain;
  }
</style>

<body>
  <div class="container">
    <div class="box"></div>
  </div>
</body>

你的 flex 怎么塌下去了？

今天项目提的一个 bug

很明显是这样显示出来很难看，找了一上午的原因，是 flex 没设置好，导致内容超出整体盒子宽度之后产生了一个奇奇怪怪的样式。

项目需求是要属性名是和属性值在一行，超出盒子后要显示一个省略号。并且当鼠标 hover 上去之后，得显示所有的字段的值。

直接看代码吧，怎么实现这个需求

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
<style>
  * {
    padding: 0;
    margin: 0;
  }
  .box {
    display: flex;
    flex-direction: row;
    width: 100%; /* 确保.box占满整个容器宽度 */
  }
  .box > span:first-child {
    flex-shrink: 0; /* 防止标题缩小 */
    white-space: nowrap; /* 保持标题在一行显示 */
  }
  .box > span:last-child {
    flex-grow: 1; /* 允许内容部分扩展填充剩余空间 */
    white-space: nowrap; /* 保持内容在一行显示 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
  }
</style>

<div class="box">
  <span>我是标题</span>
  <span
    >我是内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi,
    laudantium provident? Et necessitatibus amet architecto commodi vel harum
    hic ipsam tempore perferendis nemo quibusdam, corrupti dolorum facere?
    Nostrum, ea quaerat!</span
  >
</div>

再来看看效果图

ok 今天更新到这了