grid了解

结构

   <div class="grid"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div></div>

css

.grid {width: 300px;height: 300px;border: 2px solid red;display: grid;margin: 0 auto;grid-template-rows: repeat(4, 1fr);grid-template-columns: repeat(3, 1fr);row-gap: 10px;column-gap: 10px;/* gap: 10px; */}.grid div {background-color: green;background-clip: content-box;border: 1px solid yellow;}

开启网格布局 

display: grid

行间距

row-gap: 10px

列间距
column-gap: 10px

简写，行列间距
 gap: 10px

定义行-4行，每行等分

grid-template-rows: repeat(4, 1fr);

定义列-3列，每列等分
grid-template-columns: repeat(3, 1fr);

 <div class="grid1"><div>1</div></div>

  .grid1 {width: 500px;height: 500px;margin: 0 auto;display: grid;grid-template-rows: repeat(4, 1fr);grid-template-columns: repeat(4, 1fr);column-gap: 10px;border: 1px red solid;}.grid1 div {border: 1px black solid;}.grid1 div:first-child {grid-row-start: 2;grid-column-start: 2;grid-row-end: 4;grid-column-end: 4;background-color: red;}

定义开始行

        grid-row-start: 2;

定义开始列
        grid-column-start: 2;

定义结束行
        grid-row-end: 4;

定义结束列
        grid-column-end: 4;

结构

 <div class="grid2"><div>1</div><div>2</div><div>3</div></div>

css样式

 .grid2 {width: 300px;height: 300px;border: 1px solid green;margin: 0 auto;display: grid;grid-template-rows: repeat(2, 1fr);grid-template-columns: repeat(2, 1fr);}.grid2 div {background-clip: content-box;background-color: red;padding: 10px;}.grid2 div:first-child {grid-row-start: 1;grid-column-start: 1;grid-row-end: 3;grid-column-end: 1;}

 结束也可以使用偏移量写法

       .grid4 {width: 300px;height: 300px;border: 3px solid black;margin: 0 auto;display: grid;grid-template-rows: repeat(2, 1fr);grid-template-columns: repeat(2, 1fr);}.grid4 div {background-clip: content-box;background-color: green;padding: 10px;}.grid4 div:first-child {background-clip: content-box;background-color: green;padding: 10px;grid-row-start: 1;grid-column-start: 1;grid-row-end: span 2;}

   <div class="grid4"><div>1</div><div>2</div><div>3</div></div>

 实现一个上下固定，左侧固定，右侧自适应

 定义行列--定义边线名

 .box {width: 100vw;height: 100vh;display: grid;grid-template-rows: 60px 1fr 60px;grid-template-columns: 60px 1fr;grid-template-areas: 'header header' 'nva main' 'footer footer';/* grid-column-gap: 10px; */}

结构

 <div class="box"><header></header><nva></nva><main></main><footer></footer></div></body>

 设置背景色，内边距

     header,nva,main,footer {border: 1px black solid;background-clip: content-box;background-color: green;padding: 10px;}

合并命名盒子

  header {grid-area: header;}nva {grid-area: nva;}main {grid-area: main;}footer {grid-area: footer;}

不用上面写法-使用偏移量写法--效果相同

header {grid-row-start: 1;grid-column-start: 1;grid-column: span 2;}footer {grid-row-start: 3;grid-column-start: 1;grid-column: span 2;}

结构

<div class="grid4"><div>1</div><div>2</div><div>3</div><div>4</div>
</div>

css

      .grid4 {width: 300px;height: 300px;border: 3px solid black;margin: 0 auto;display: grid;grid-template-rows: repeat(3, 1fr);grid-template-columns: repeat(3, 1fr);}.grid4 div {background-clip: content-box;background-color: green;padding: 10px;}.grid4 div:first-child {grid-column: 1 / span 2;}.grid4 div:nth-child(2) {grid-column: 2 / span 1;}

 栅格容器--让后面子元素自动填满

  grid-auto-flow: row dense;

结构 

 <div class="grid5"><div>1</div><div>2</div><div>3</div></div>

css

 .grid5 {width: 300px;height: 300px;border: 3px solid black;margin: 0 auto;display: grid;grid-template-rows: repeat(1, 1fr);grid-template-columns: repeat(3, 1fr);}.grid5 div {background-clip: content-box;background-color: green;padding: 10px;}

子元素未设置宽高-默认拉伸

 设置元素在栅格内的排序方式

 justify-items: start;align-items: end;

单独设置某一个元素

 .grid5 div:nth-child(2) {align-self: start;}.grid5 div:nth-child(3) {justify-self: end;}

 

-----------------------伪元素使用----------------------------------------------------------

结构

 <span class="box">你好</span>

使用伪元素-设置下边线

  .box {font-size: 100px;position: relative;}.box::before {content: '';//设置内容position: absolute;//绝对定位width: 50px;//绝对定位属性盒子，可以设置宽高border: 1px solid black;//设置边线bottom: 0px;//定位到底部left: 50%;//居中父盒子左侧50%transform: translate(-50%);//反方向移动自身50%}

 实现效果

使用伪元素清除浮动

    <div class="one clear"><div>1</div><div>2</div></div><div>999</div>

   .one {width: 100vw;justify-content: space-between;}.one div:nth-child(1) {float: left;min-width: 20%;border: 1px solid black;}.one div:nth-child(2) {float: right;min-width: 20%;border: 1px solid rgb(130, 45, 45);}.clear::after {content: '';display: block;clear: both;}

未清除时

父盒子，因为子元素浮动，无法撑开，下方盒子上移---（圣杯布局？）

 加入之后,恢复正常

------------------------------------------粘性布局使用--------------------------------------------------

结构

<body><div>1</div><div class="scroll"></div>
</body>

样式

  <style>* {margin: 0;padding: 0;box-sizing: border-box;}div:first-child {position: sticky;width: 100px;height: 100px;top: 0;left: 0;background-color: red;margin-top: 90vh;}.scroll {height: 5000px;}</style>