知识点
如何让div的背景图片不随页面滚动而发生移动
div {
background-attachment: fixed;
}
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: 1;
border: blueviolet 5px solid;
}
盒模型
标准盒模型
标准 W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分
width:margin*2+border*2+padding*2+width;
height:margin*2+border*2+padding*2+height;
IE盒模型
IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 padding