微信登录

通用属性 - display:; - 框的类型

作用：框的整体

  1. display:inline;默认，前后没有换行符，可能要加float: right;才生效
  2. display:none;不显示
  3. display:block;前后有换行符
  4. display:inline-block;前后没有换行符，顶对齐    vertical-align: top;
  5. display:inherit;父元素继承 display 属性的值
  6. display: flex; 弹性布局，这个有点6，在检查里可以调 一维布局
  7. display: grid; 网格布局（栅栏布局） 二维布局 划分成"行"和"列"，并产生单元格

display:flex 弹性布局

display: flex;
好文章
https://www.cnblogs.com/hellocd/p/10443237.html

有子容器、父容器的分别
https://blog.csdn.net/weixin_46380993/article/details/104572253

display:grid 网格布局（栅栏布局）

当一个元素div 设置为 display:grid 或者 display:inline-grid 后
div就变成了一个网格容器，内容内的所有子元素将成为网格元素。
分布 grid-template-columns 指定列的大小，以及网格布局中设置列的数量 /
分布 grid-template-rows 指定行的大小 /
分布 grid-template-columns: 1fr 1fr 1fr 一个 fr 代表网格容器中可用空间的一等份 实现三栏均分布局
分布 grid-template-rows: 1fr 1fr 1fr 一个 fr 代表网格容器中可用空间的一等份 实现三栏均分布局
分布 grid-template-columns: 40px 50px auto 50px 40px; / /
分布 grid-template-rows: 25% 100px auto; / /
间距 grid-column-gap 设置列之间的间距 /
间距 grid-row-gap 设置行之间的间距 /
间距 grid-gap 表示grid-column-gap 和 grid-row-gap属性的缩写 /
grid-column 表示grid-column-start 和 grid-column-end属性的缩写 /
grid-column：1 / 5 表示从第 1 列开始，第 5 列结束 /
grid-row 表示grid-row-start 和 grid-row-end属性的缩写 /
grid-row：1 / 5 表示从第 1 行开始，第 5 行结束 /
grid-template-areas 划定区域 /
顺序 grid-auto-flow 排列顺序 /
对齐 justify-items 控制单元格内容的水平对齐 /
对齐 align-items 控制单元格内容的垂直对齐 /
对齐 place-items justify-items和align-items的合并简写形式 /
位置 justify-content 控制整个内容区域在容器中的水平位置 /
位置 align-content 控制整个内容区域在容器中的垂直位置 /
位置 place-content justify-content和align-content的合并简写形式 /
grid-auto-columns 用来设置浏览器自动创建的多余网格的列宽和行高 /
grid-auto-rows 用来设置浏览器自动创建的多余网格的列宽和行高 /
通用属性 - display:; - 框的类型