css布局技巧|青训营01. place-items: center——Super 大居中 1.指定 grid 作为 d

01. place-items: center——Super 大居中

1.指定 grid 作为 display 方法

2.在同一个元素写入 place-items: center。

3.place-items 是同时设置 align-items 和 justify-items 的快速方法。align-items 和 justify-items 也都设置了 center。

.parent {
  display: grid;
  place-items: center;
}

图片中的网格布局，就用到了 minmax 函数。我们在这里做的是将侧边栏最小设置为 150px ，但在更大的屏幕上，让它伸展出 25% 。侧边栏将始终占据其父级水平空间的 25%，直到 25% 变得小于 150px 。

将以下值添加为 grid-template-columns 的值：minmax(150px, 25%) 1fr 。

在第一列（在这种情况下，侧边栏）的项目其 minmax 为 150px（在25% ），

第二列项目（这里指 main 部分）占据其余的空间作为单一的 1fr 轨道。

.parent {
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
}

绝对定位是脱离文档流的，不占据其原来未移动时的位置，是相对于父级元素或更高的祖先元素中有relative (相对)定位并且离本元素层级关系上最近元素的左上角进行定位。如果在祖先元素中没有设置relative定位时，就默认相对于body进行定位。

固定定位是绝对定位的一种特殊形式， 是以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

当对元素设置固定定位后，该元索将脱离标准文档流的控制，始终依据浏览器窗口的左上角来定义自己的显示位置。不管浏览器滚动条如何滚动，也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

clear属性规定元素的哪一侧不允许出现浮动元素。在CSS中是通过自动为清除元素(即设置了clear属性的元素)增加上外边距实现的。

例如：图像的左侧和右侧均不允许出现浮动元素。

img{float:left;     /* 左浮动*/clear:both;     /* 左右两侧都不允许出现浮动*/
}