第二十天：定位—子绝父相/网格布局

一、四大定位属性

1. static 静态定位
   默认定位，无偏移，top/left 无效
2. relative 相对定位

位置相对于自身原来位置偏移

不脱离标准流，原位置保留

3. absolute 绝对定位，脱离标准流，不占位置，找最近已定位父元素做参照，父无定位 → 参照浏览器窗口

4. fixed 固定定位

• 脱离标准流，固定在浏览器可视区
• 滚动页面位置不变，常用于导航、返回顶部

top: 距离顶部距离; left: 距离左侧距离; right: 距离右侧距离; bottom: 距离底部距离;

网格布局

网格布局通常使用于：图片加文字水印，导航下拉菜单，商品标签（热卖、折扣），盒子居中、侧边悬浮元素

一、四大定位属性

static 静态定位

默认定位，无偏移，top/left 无效

relative 相对定位

位置相对于自身原来位置偏移

不脱离标准流，原位置保留

absolute 绝对定位

脱离标准流，不占位置

找最近已定位父元素做参照

父无定位 → 参照浏览器窗口

fixed 固定定位

脱离标准流，固定在浏览器可视区

滚动页面位置不变，常用于导航、返回顶部

我们可以用这串代码来开启网格.container { display: grid; }

固定高度：grid-template-columns: 100px 200px 100px;

混合写法：grid-template-columns: 200px 1fr 2fr;

水平对齐方式：justify-content: start | center | end | space-between | space-around

简居中代码：.box { display: grid; place-items: center; }