css-grid布局(栅格布局)

css新世界-auto-fit

grid 一个比flex更强大的布局,适合做整体布局

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); auto-fit的话有strech效果
gap 不仅可以用于grid 也可用flex
. 在grid-template-areas表示这个位置空着
grid area 的 [a b]命名可重复命名表示的是同一根线, 感觉不如数字好用啊
min-content是一个尺寸关键字, 也可以表示width height…

在这里插入图片描述

  <style>.tb {display: grid;grid-template-columns: 3fr 5fr 3.5fr;grid-template-rows: 42px 300px;grid-template-areas: 'a b b' /* 目前喜欢这种的方式, 比较直观  . 表示这个位置空着 */'a c d'; /* 相同的名字 代表相同的区域 */gap: 10px;}.tb>div {background-color: #f1cbc5;border-radius: 10px;}.tb-cate {grid-area: a;}.tb-module {grid-area: b;}.tb-baner {grid-area: c;}.tb-user {grid-area: d;}</style><body><div class="tb"><div class="tb-module"></div><div class="tb-cate"></div><div class="tb-banner"></div><div class="tb-user"></div></div></body>

在这里插入图片描述

grid-template-columns / grid-template-rows

简写: grid: …行高 / … 列宽
支持 px % min-content max-content auto fr repeat() minmax() fit-content() 函数值
min-content 先找最大的, 然后取它的最小 content
auto 会受到 justfify-content align-content的影响
minmax(lenght | percentage | min-content | max-content | auto, 前面的 + fr) 也就是说 fr 只能放在第二个参数
fit-content(length | percentage) 内容越大尺寸越大, 但不超限定

min-content

先找到内容最大的那个,然后用它的最小尺寸(如果min-width大于内容的宽度, 则是min-width)

<div class="container"><item>css</item><item></item><item>css_world</item><item></item><item>css_new_world</item><item></item>
</div>

max-content

最大内容宽度.

fr 网格布局的专用单位

fr 总和小于1 的话是占不满的.
搭配固定值的话, fr表示的是剩余空间的比例
配合auto 是减去auto的 fit-content

在这里插入图片描述

repeat( | auto-fill | auto-fit, 1px auto 30px)

auto-fit 会把空白匿名网格折叠合并…
auto-fit 更符合常规的布局需求
repeat() 函数只能用于 grid-template-rows/columns

repeat(auto-fit,minmax(100px,1fr)) // 弹性的同时保证了最小宽度.
repeat() auto // 无效
repeat() 20% 可以

父盒子有padding 或者 border ? 子盒子的margin 才能撑开父盒子？？
1vw = 1%的屏幕宽度.
1rem = 根元素的字体大小.

· 就是这个点, PingFangSC字体下和 Microsoft YaHei

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.tb {display: grid;grid-template-columns: [f] 100px [t] 300px [e];grid-auto-rows: 150px 100px;/* [d]150px 100px; 搞不懂为什么加个命名就变小了.... */gap: 10px;}.left {grid-column: f / t;/* 数字和命名搭配搭配也可, 1 / t  注意如果是一个位置的话可省略, 比如 1 / 2  2 / 3  这里的2 3就可以省略*/grid-row: 1 / 3; /* g-r-start g-r-end 的简称 */}.tb>div {background-color: lightgreen;}</style></head><body><h1>[x] 100px [l]</h1><div class="tb"><div class="left">a</div><div>b</div><div>c</div></div></body></html>

在这里插入图片描述

.wrapper{   /* 容器 */display: grid;  /* 容器 inline-grid 行内 */grid-template-columns: 1fr 1fr 1fr; /*repeat(2, 1fr 100px) repeat(auto-fill, minmax(100px, 1fr))*/grid-template-rows: 100px 100px 100px; /* 行高  */grid-auto-rows: 100px; /* 如果该行没有被grid-template-rows设置, 比如这个就设置了三行, 结果有了4 5 6行..这个就生效了.. */row-gap: 10px; /* 行间距 */column-gap: 10px; /* 列间距 */ grid-gap: row-gap column-gap; /* 行列复合写法 */justify-items: center; /* 水平方向 start end  */align-items: center; /* 垂直方向 start end  */ place-items: center center; justify-content: center; /* 整体内容  space-evenly */grid-auto-flow:  row; / * [ row | column ]  ||  dense   */
}
.item{	grid-area: l; /* 这样比较方便直观 */	align-self: end;justify-self: end;  place-self: ; /* 上复合 */
}

盒模型

内容 => padding => border => margin
1.  block默认和父级盒子的宽度一样
2.  width auto是块级元素的默认值,  	100%; 的话会等于父级, 但是再加了padding border(content-box) 会溢出
3.  box-sizing: border-box; // line-height设置要减去padding和border 是内容区域的高度
4.  text-align: center; 内容区域
5.  居中(居中偏移固定的距离没有问题)box{box-sizing: border-box; /content-box/border: 10px;line-height: 100px; text-align: center; /内容区域/}
6.  设置了box-sizing: border-box;方便写盒子, 但是写line-height, 要减去padding和border了,
7.  text-align center也是内容区域
8.  width: auto 和 100%的区别; auto; 默认的是auto; 100% 如果是content-box就会超出了