网格布局
网格其实就是最近比较火的 Grid 布局，原理就是把父元素分割成个的小格子，然后子元素指定自己具体在那个格子上，有点类似于表格布局。
<!DOCTYPE html>
<html lang="en">
<head>
< charset="UTF-8">
< name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除认样式 */
* { padding: ; margin: ; }
/* 令html和body全屏, 并有灰色背景 */
html, body { height: ; background: gray; }
/* 找到直接父元素 */
body {
/* 为网格布局 */
display: grid;
/* 设置垂直方向为两列 */
grid-template-columns: repeat(, fr);
/* 列之间距为10像素 */
gap: px;
}
div {
/* 给个高度 */
height: ;
/* 白色背景 */
background: white;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
运行结果：
可以看到这个列间距只会针对于列与列之距离，所以这两列和屏幕之距离为 0，那么该如何进行改进呢：
<!DOCTYPE html>
<html lang="en">
<head>
< charset="UTF-8">
< name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除认样式 */
* { padding: ; margin: ; }
/* 令html和body全屏, 并有灰色背景 */
html, body { height: ; background: gray; }
/* 找到直接父元素 */
body {
/* 为网格布局 */
display: grid;
/* 设置垂直方向为五列 */
grid-template-columns: repeat(, px fr) px;
}
div {
/* 给个高度 */
height: ;
/* 白色背景 */
background: white;
}
/* 设置左侧列的位置 */
.left { grid-area: / / / ; }
/* 设置右侧列的位置 */
.right { grid-area: / / / ; }
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
运行结果：
其实原理也很简单，我们把间距也设置成一列，这样的话算上间距一共就五列了：
然后将左侧列设置为父元素的第二列，右侧列设置为父元素的第四列即可。
602392714
清零编程群