一，Grid
1，Grid可以同时控制水平和竖直方向
2，
水平标尺为column,竖直标尺为row
3,
<!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>
.grid_container {
display: grid;
width: 500px;
height: 500px;
background-color: #eee;
/* 垂直方向分五个格子 */
grid-template-rows: 100px 100px 100px 100px 100px;
/* 水平方向分五个格子 */
grid-template-columns: 100px 100px 100px 100px 100px;
}
.ruler {
position: absolute;
top: 0;
left: 0;
width: 580px;
height: 580px;
background-image: url(https://codingstartup.com/assets/grid/grid.ruler.png);
border-style: 580px 580px;
}
body {
margin: 40px;
}
.cell1 {
background-color: blue;
/* 竖直从标尺1到第标尺4，占了3个格子 */
grid-row: 1/4;
/* 水平从标尺1到标尺3，占了两个格子 */
grid-column: 1/3;
/* 混合属性 第一个/第三个是竖，第二个/第四个是行 */
/* grid-area: 1/1/4/3 */
}
.cell2 {
background-color: yellow;
grid-row: 4/6;
grid-column: 2/ span 3;
}
</style>
</head>
<body>
<div class="ruler"></div>
<div class="grid_container">
<div class="cell1"></div>
<div class="cell2"></div>
</div>
</body>
</html>
-
- 实际中没有尺子，可以改写为从第几个格子延伸几格
.cell2 {
background-color: yellow;
grid-row: 4/6;
grid-column: 2/ span 3；
从第二个格子水平延伸3个格子
}
4，grid-area属性
<style>
.grid_container {
display: grid;
width: 500px;
height: 500px;
background-color: #eee;
/* 垂直方向分五个格子 */
grid-template-rows: 100px 100px 100px 100px 100px;
/* 水平方向分五个格子 */
grid-template-columns: 100px 100px 100px 100px 100px;
/* 正片开始 */
grid-template-areas: "header header header header header"
"nav main main main main"
"nav main main main main"
"nav main main main main"
". footer footer footer ."；
}
body {
margin: 40px;
}
.cell1 {
background-color: blue;
grid-area: header;
}
.cell2 {
background-color: yellow;
grid-area: main;
}
.cell3 {
background-color: orange;
grid-area: nav;
}
.cell4 {
background-color: black;
grid-area: footer;
}
</style>
</head>
<body>
<div class="ruler"></div>
<div class="grid_container">
<div class="cell1"></div>
<div class="cell2"></div>
<div class="cell3"></div>
<div class="cell4"></div>
</div>
</body>
- 若想盒子之间有距离（加完边距后，不受底边盒子控制了）
/* 竖直方向边距 */
row-gap: 10px;
/* 水平方向边距 */
column-gap: 10px;
5, fr(表示占有多少空间)
/* 垂直方向分五个格子 */
grid-template-rows: 1fr 1fr 1fr 1fr 1fr; #表示每份都是竖直空间的1/5
/* 水平方向分五个格子 */
grid-template-columns: 100px 100px 100px 100px 100px;
6，repeat()函数 （第一个参数是重复多少次，第二个参数是重复什么）
grid-template-rows: 2fr repeat(4
1fr);
二，BFC
一般用overflow: hidden;触发BFC
看了一篇文章太赞了，讲的很清晰，感谢知乎大佬分享-->一次弄懂css的BFC