# 小知识点

# 如何让div的背景图片不随页面滚动而发生移动

div {
  background-attachment: fixed;
}

1
2
3

# inline元素设置margin和padding有效吗

行内元素设置宽高无效，margin与padding只有水平方向有效，垂直方向无效

# z-index

定义： z-index 属性指定了一个具有定位属性的元素及其子代元素的 z-order
初始值： auto (IE为0)

z-index为auto的元素不参与层级关系的比较

# 自适应宽度三等分布局

.main {
    display: flex;
    height: 100vh;
}
.main > div {
    /* flex-grow flex-shrink flex-basis */
    flex: 1;
    border: blueviolet 5px solid;
}

1
2
3
4
5
6
7
8
9

# CSS中可继承的样式

color cursor font-family font-size font-style font-weight line-height list-style text-align text-indent visibility 等。

# 子选择器和后代选择器的区别

/* 子选择器:超过一代则无效，如.btn的子元素无效 */
.click > .btn {
    ...
}
/* 后代选择器:.btn的子元素有效 */
.click .btn {
    ...
}

1
2
3
4
5
6
7
8

# 两种隐藏元素的方式

# display:none

不占文本流,从渲染树中移除，触发重排

# visibility:hidden

不会触发重排，因为没有位置变化

# flex

flex=flex-grow+flex-shrink+flex-basis(初始大小)

← 长度单位小结水平垂直居中方法 →