1. 网页元素大小与间距规范
2. div标签
<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分
<div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化
3. CSS
HTML 标签用于定义文档内容，CSS定义如何显示 HTML 元素
3.1. 选择器
要在HTML元素中设置CSS样式，需要在元素中设置id或class选择器（ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用）
id 选择器
CSS 中 id 选择器以 #来定义
<html>
<head>
<meta charset="utf-8">
<title>样式</title>
<style>
#para1
{
text-align:center;
color:blue;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
</body>
</html>
class 选择器
class 选择器有别于id选择器，class可以在多个元素中使用
CSS中class 选择器以一个点 . 号定义
<html>
<head>
<meta charset="utf-8">
<title>菜</title>
<style>
.center {
text-align:center;
}
.color {
color:#ff0000;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center color">段落居中，颜色为红色。</p>
</body>
</html>
3.2. CSS 盒子模型(Box Model)
页面可以看成是由一个个盒子堆砌而成，盒子里面装的就是元素的内容
盒子的从外到内分别是
- Margin(外边距) 是该盒子和其他元素之间的空白区域，大小通过margin 相关属性设置
- Border(边框) 包裹在内边距和内容外的边框，大小通过border相关属性设置
- Padding(内边距) 包围在内容区域外部的空白区域，大小通过padding 相关属性设置
- Content(内容) 这个区域是用来显示内容，大小可以通过设置width和height
盒子的范围到边框为止 —— 不会延伸到margin
3.3. Grid 网格布局
Flex 布局是轴线布局，只能指定”项目”针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成”行”和”列”，产生单元格，然后指定”项目所在”的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
