一 网页的布局演变
1 表格布局 （table）
2 定位布局 （position: fixed、absolute等）
3 浮动布局（使用float）
4 Flexbox布局(使用display:flex,可自定义灵活布局， 是一维布局系统)
5 网格布局（使用display: grid; 是二维布局系统）
二 使用的主要原理
1 css grid标准的使用，先定义网格单元的宽高列表（grid-template-columns），精确定义元素从第几列开始，第几列结束（grid-column）。从第几行开始，第几行结束（ grid-row）。
.container {
grid-template-columns: 60px 60px;
grid-template-rows: 90px 90px
}
.item-a {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.item-b {
grid-column: 5 / 6;
grid-row: 2 / 3;
}
.item-a在第 1 列网格线开始第 2 列网格线结束, .item-b在第 5 列网格线开始第 6 列网格线结束，但我们还没有定义第 5 或者第 6 列。因为我们引用的线不存在，0 宽度的隐式网格轨迹将被创建来填充这些空缺。
2 bootstrap的使用，把一个屏幕的平分为12列单位，可根据最小单位定义元素宽度，位移等。
内部实现了列宽单位的样式
.col-xs-x x为1~12，超小设备手机（<768px）
.col-sm-x 小型设备平板电脑（≥768px）
.col-md-x 中型设备台式电脑（≥992px）
.col-lg-x 中型设备台式电脑（≥992px）
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 响应式的列重置</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row" >
<div class="col-xs-6 col-sm-3"
style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>test1</p>
</div>
<div class="col-xs-6 col-sm-3"
style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>test2
</p>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3"
style="background-color: #dedef8;
box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>test3
</p>
</div>
<div class="col-xs-6 col-sm-3"
style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>test4
</p>
</div>
</div>
</div>
</body>
</html>
test1、test2、test3、test4样式描述，col-sm-3 表示在手机显示时占3个单位， col-xs-6 小型设备平板电脑显示时占6个单位
三引用
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout 《CSS Grid Layout》
https://getbootstrap.com/docs/4.3/layout/grid/ 《 bootstrap gridsystem》
http://www.runoob.com/bootstrap/bootstrap-grid-system.html 《网格系统》
https://www.w3cplus.com/css/css-layout-model.html 《布局演变史》
https://panxu.net/article/8306.html 《Div+Css布局简史：从1.0到3.0，最终又将走向哪里？》
网友评论