这是我参与第四届青训营笔记创作活动的的第3天
一 盒子模型
border
表示盒子的边框分为四个方向：
- 上top、右right、下bottom、左left
- border-top、border-right、border-bottom、border-left
外边距 margin
表示盒子的外边距，即盒子与盒子之间的距离，同样也分为四个方向，也可以简写（按顺时针方向，默认上下一样，左右一样）
margin：v1； 同时设置4个方向外边距
margin-top: auto //上下外边距无效 让块级元素本身在当前父元素内水平居中
margin-right:
margin-bottom:
margin-left:
内边距 padding
表示盒子的内边距，即内容与边框之间的距离，同样也分为四个方向，也可以简写（按顺时针方向，默认上下一样，左右一样）。
注意：如果上下冲突，则以上为准，如果左右冲突，则以左为准。而且它没有auto值。
padding:v1; 同时设置4个方向的内边距
padding-top;
padding-right;
padding-bottom;
padding-left;
二 定位
通过position属性实现对元素的定位，有四种定位方式，设置定位方式后，还要设置定位属性（偏移量）：top、bottom、left、right
常用取值：
| 取值 | 含义 | 说明 |
|---|---|---|
| static | 默认值 | 按照常规文档流进行显示 |
| relative | 相对定位 | 相对于标签原来的位置进行的定位 |
| absolute | 绝对定位 | 相对于第一个非static定位的父标签的定位 |
| fixed | 固定定位 | 相对于浏览器窗品进行定位 |
三 浮动
浮动属性
通过float属性来实现元素的浮动，可以让块级元素脱离常规的文档流，向左或向右移动，在同一行显示，如果一行显示不下，则会换行显示。
| 属性 | 含义 |
|---|---|
| left | 左浮动 |
| right | 右浮动 |
| none | 不浮动，默认值 |
设置float属性后，元素会浮在页面上层，此时父容器无法计算自己尺寸，如果我们还想显示父容器通常会在末尾添加一个清除了float属性的空的div来解决。
清除浮动
方法一：添加新的元素 应用 clear：both；
HTML:
<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="clear"></div>
</div>
CSS:
.clear{clear:both; height: 0; line-height: 0; font-size: 0}
方法二：父级div定义 overflow: auto（注意：是父级div也就是这里的 div.outer）
HTML:
<div class="outer over-flow"> //这里添加了一个class
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<!--<div class="clear"></div>-->
</div>
CSS:
.over-flow{
overflow: auto; zoom: 1; //zoom: 1; 是在处理兼容性问题
}
方法三 :after 方法（注意：作用于浮动元素的父亲）
原理：它就是利用:after和:before来在元素内部插入两个元素块，从而达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。
HTML:
<div class="outer clearfix">
CSS:
.outer {zoom:1;}
.outer:after {
clear:both;
content:'.';
display:block;
width: 0;
height: 0;
visibility:hidden;
}
布局
flex布局（弹性盒子）
能自适应屏幕大小，并且对于移动端的开发非常方便，当父元素设置flex时子 元素的float，clear，vertical-align将失效，盒子元素添加 display：flex 设置盒子为flex布局，一般是给父容器添加这个属性。
flex-direction属性
flex-direction 属性指定了弹性子元素在父容器中的位置。
语法
flex-direction: row | row-reverse | column | column-reverse
flex-direction的值有:
- row：横向从左到右排列（左对齐），默认的排列方式。
- row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
- column：纵向排列。
- column-reverse：反转纵向排列，从后往前排，最后一项排在最上面
align-items 属性
align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
语法
align-items: flex-start | flex-end | center | baseline | stretch
各个值解析:
- flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
- flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
- center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
- baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
- stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
flex-wrap 属性
flex-wrap 属性用于指定弹性盒子的子元素换行方式。
语法
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
各个值解析:
- nowrap:默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
- wrap:弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
- wrap-reverse:反转 wrap 排列。
justify-content 属性
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
justify-content 语法如下：
justify-content: flex-start | flex-end | center | space-between | space-around
各个值解析:
-
flex-start：:弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
-
flex-end：:弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
-
center：:弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
-
space-between：:弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
-
space-around：: 弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。
Grid布局
Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局，
将元素的
display属性设置成grid或者line-grid、subgrid即可。 当元素设置了网格布局，column、float、clear、vertical-align属性无效。
Grid布局与Flex布局的区别
Grid布局和flex布局是有实质性的区别的，flex是一维布局，只能处理一个维度上的布局，一行或者是一列。但是Grid布局是二维布局 ，将容器划分成了“行”和“列”，产生了一个个的网格，可以将网格元素放在行和列相关的位置上，从而达到了布局的目的。
flex布局示例：
Grid布局示例：
容器和项目
我们通过在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器。一旦我们这样做，这个元素的所有直系子元素将成为网格项目。
网格单元
一个网格单元是在一个网格元素中最小的单位，上图中 One、Two、Three、Four…都是一个个的网格单元。
网格线
划分网格的线即为网格线。需要注意的是，我们定义网格的时候，定义的是网格轨道。Grid会自动创建编号的网格线来定位每一个元素，m 列有 m + 1 根垂直的网格线，n 行有 n + 1 跟水平网格线。一般而言，是从左到右，从上到下，1，2，3 进行编号排序，从右到左，从下到上，则是按照 -1，-2，-3…顺序进行编号排序。
网格轨道
用grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。容器内部的水平区域称为行，垂直区域称为列。上图中 One、Two、Three 组成了一行，One、Four 则是一列。
grid-gap
grid-gap 属性是用来设置网格行与列之间的间隙。
注意： grid-gap 是 row-gap 和 column-gap 的简写形式。
auto-fill 关键字
表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格。grid-template-columns: repeat(auto-fill, 200px) 表示列宽是200px，但列的数量是不固定的，只要浏览器能够容纳得下，就可以放置元素。
fr 关键字
Grid布局还引入了一个另外的长度单位来帮助我们创建灵活的网格轨道。fr单位代表网格容器中可用空间的一等份。grid-template-columns: 200px 1fr 2fr表示第一个列宽设置为 200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3。演示如下：
.wrapper{ display: grid;
grid-template-columns: 200px 1fr 2fr;
grid-gap: 5px;
grid-auto-rows: 50px;
}
minmax() 函数
我们有时候想给网格元素一个最小和最大的尺寸，minmax() 函数产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。它接受两个参数，分别为最小值和最大值。grid-template-columns: 1fr 1fr minmax(300px, 2fr) 的意思是，第三个列宽最少也是要 300px，但是最大不能大于第一第二列宽的两倍。
.wrapper{
display: grid;
grid-template-columns: 1fr 1fr minmax(300px, 2fr);
grid-gap: 5px;
grid-auto-rows: 50px;
}
auto 关键字
由浏览器决定长度。通过 auto 关键字，我们可以轻易实现三列或者两列布局。grid-template-columns: 100px auto 100px 表示第一第三列为 100px，中间由浏览器决定长度。
.wrapper-5 {
display: grid;
grid-template-columns: 100px auto 100px;
grid-gap: 5px;
grid-auto-rows: 50px;
}
参考资料
字节青训营教学视频及PPT
