Get Started
• Grid布局
——功能最强大的布局方案
• 补充
• 区别
• 一个div的分层
• position 的五个取值
• 层叠上下文
Grid布局
二维布局用Grid，一维布局用Flex
Grid也分container和items，分别记忆
- 成为container
.container{ display: grid;/*or inline-grid*/ } ``` - 行和列
.container{ grid-template-columns: 40px 50px auto 50px 40px; grid-template-rows: 25% 100px auto; } - item可以设置范围
.item-a{ grid-column-start: 2; grid-column-end: five; grid-row-start: row1-start; grid-row-end: 3; } ``` - fr - free space（巧计：份）
主要用作平均布局 - 空隙gap
.container{ grid-column-gap:10px; grid-row-gap:10px; } - 分区grid-template-areas
在areas的字符串里把相应位置用.代替可以空出相应部分.container{ min-height:100vh; display: grid; grid-template-rows:60px auto 60px; grid-template-columns:100px auto 100px; grid-template-areas: "header header header" "aside main ad" "footer footer footer" } .container>*{ border:1px solid red; } .container>header{ grid-area: header; } .container>aside{ grid-area: aside; } .container>main{ grid-area: main; } .container>.ad{ grid-area: ad; } .container>footer{ grid-area: footer; }
补充
Ø 可以根据网格的开始和结束位置来定义一个网格项，你也可以用span关键词来指定你要跨越的宽度。请注意span只能是正值。
grid-column-end: span 2;
Ø grid-column-start和grid-column-end的缩写
grid-column: 2 / 4;
grid-column: 2 / span 3;
Ø 如果你觉得同时输入grid-column和grid-row也很复杂，我们还有另一种缩写。grid-area属性接受4个由'/'分开的值：grid-row-start, grid-column-start, grid-row-end, 最后是grid-column-end。
grid-area: 1 / 1 / 3 / 6;
Ø 如果网格项不是以grid-area、grid-column、grid-row 等显示的，它们会自动按照它们在源程序中出现的位置摆放。同样我们也可以使用order属性来重写它的顺序，这也是网格布局优于表格布局的好处之一。
默认情况下，所有的网格项的order都是0，但是顺序也可以被任意设置为正数或者负数，就像z-index一样。
grid-template-columns: repeat(5, 20%);
CSS布局和定位有什么区别
布局是屏幕平面上的
定位是垂直于屏幕的
首先从文档流和盒模型说起
背景的范围是从哪到哪？
• border外边沿围成的区域
验证：border半透明试试
border: 5px solid rgba(255,0,0,1);
一个div的分层
文字是按照出现的先后顺序覆盖的
浮动元素脱离文档流，其实就浮起来一点点，比文字低
position:fixed
固定在视口，但是后来新出的属性（transform）可以无视这个，强制停留也页面
• 使用场景
烦人的广告
回到顶部按钮
• 配合z-index
• 经验
手机上尽量不要用这个属性，坑很多
步心你搜索一下【移动端fixed】
position 的五个取值
新属性-position
• static 默认值，待在文档流里
relative 相对定位，升起来，但不脱离文档流
absolute 绝对定位，定位基准是祖先里的非static
fixed 固定定位，定位基准是viewport（有诈）
sticky 粘滞定位，适合导航栏，在下拉时停留在顶部
• 经验
如果写了absolute，一般都得补个relative
如果写了absolute或fixed，一定要补top和left
sticky兼容性很差
position:relative
• 使用场景
用于做位移（很少用）
用于给absolute元素做爸爸
• 配合z-index
z-index:auto 默认值，不创建新层叠上下文（为0）
z-index:0/1/2 （哪个大哪个在上）
z-index:-1/-2
• 经验
学会管理z-index
position:absolute
• 使用场景
脱离原来的位置，零七一层，比如对话框的关闭按钮
鼠标提示
• 配合z-index
• 经验
很多彩笔都以为absolute是相对于relative定位的
absolute是相对于祖先元素中最近的一个定位元素来定位的
某些浏览器上如果不写top/left会位置错乱
善用left:100%
善用left:50%;加负margin
• Note
white-space: nowrap;不准换行
transform: translateX(-50%);居中（设置位置可用）
button span{ display: none; } button:hover span{ display: inline-block; }
默认不显示，悬浮时才显示
在调试工具右侧button的style>输入栏右侧的hov先择两次，可以常亮显示
层叠上下文
z-index:10和5哪个更高？
• 比喻
每一个层叠都是一个新的小世界（作用域）
这个小世界里面的z-index跟外界无关
处在同一个小世界的z-index才能比较
• 哪些不正交的属性以可创建它
MDN文档有写
需要记忆的有z-index/flex/opacity/transform
忘了就搜【层叠上下文MDN】
没有单独一个属性做这个事
• Note
只要加上z-index就有一个层叠上下文的关系，包括0（条件有position：relative/absolute/fixed 只要有fixed就有层叠，其他需要z-index不为auto）
opacity的作用域包括它所在的元素以及在它之内的所有元素（例如文字），而背景色的半透明只有背景色
