css 问题汇总

# css 问题汇总

# 1.flex 布局最后一行左对齐

grid 布局（repeat 不兼容 IE）

.container {
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-gap: 10px;
}
.list {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  margin-top: 5px;
}

1
2
3
4
5
6
7
8
9
10
11
12

float 布局
计算个数，用空 div 隐藏填补

# 1.绝对定位后面的 div 不能点击。

pointer-events:none;这样能够让鼠标事件穿透这个绝对定位层，

使之能点击到后面的 div，

然后再在这个绝对定位层里面需要接受事件的 div 上面添加：pointer-events:auto;

# 2.子级 margin-top 影响父级

父级或子元素使用浮动或者绝对定位 absolute，浮动或绝对定位不参与 margin 的折叠
父级 overflow:hidden;
父级设置 padding（破坏非空白的折叠条件）
父级设置 border

# 5.a 标签不记录历史跳转地址问题

资料来自：https://blog.csdn.net/qq_40963664/article/details/78561086

<a href="b.html" id="bbb">
  b.html
</a>;

var fnUrlReplace = function(eleLink) {
  if (!eleLink) {
    return;
  }
  var href = eleLink.href;
  if (href && /^#|javasc/.test(href) === false) {
    if (history.replaceState) {
      history.replaceState(null, document.title, href.split("#")[0] + "#");
      location.replace("");
    } else {
      location.replace(href);
    }
  }
};

document.getElementById("bbb").onclick = function(event) {
  if (event && event.preventDefault) {
    event.preventDefault();
  }
  fnUrlReplace(this);
  return false;
};

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

# 6.CSS 实现 div 的高度填满剩余空间

<div id="main">
  <div id="nav">nav</div>
  <div id="content">content</div>
</div>

1
2
3
4

#nav {
  background-color: #85d989;
  width: 100%;
  height: 50px;
}
#content {
  background-color: #cc85d9;
  width: 100%;
  position: absolute;
  top: 50px;
  bottom: 0px;
  left: 0px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# 7.解决 span 标签自带空格问题

span 标签改为 a 标签
没有文字的情况下设置父元素的 font-size 为 0

更新时间: 12/7/2021, 6:30:44 PM

← css 知识点总结 css 语法→