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就会超出了
参考链接
Establishing grid containers
阮一峰Grid
Grid for layout, Flexbox for components
1-Line Layouts
