CSS布局-grid和CSS定位

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

         .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;
          }
  

  在areas的字符串里把相应位置用.代替可以空出相应部分

补充

Ø 可以根据网格的开始和结束位置来定义一个网格项，你也可以用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的分层

image.png

文字是按照出现的先后顺序覆盖的
浮动元素脱离文档流，其实就浮起来一点点，比文字低
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的作用域包括它所在的元素以及在它之内的所有元素（例如文字），而背景色的半透明只有背景色