这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
CSS
用于定义页面元素的样式，包括设置字体和颜色，设置位置以及元素大小，为元素添加动画效果。因为CSS属性比较多，所以本文主要介绍几种布局方式的使用。
常规布局
标签按照规定好默认方式排列。块级元素独占一行，自上而下排列；行级元素按顺序，从左到右排列，遇到父元素边缘自动换行。传统布局就是通过浮动和定位去调整元素的位置。
浮动
浮动元素会一行内显示并且元素顶部对齐
如果元素都设置了浮动，则它的子元素会按照属性值一行内显示并顶端对齐排列，中间不留空隙，多出的盒子另起一行对齐
.box {
float: left | right;
}
定位
.box {
position: relative | absolute | fixed;
}
相对定位relative：元素保存位置
绝对定位absolute：元素不保留位置，以上一个设置了相对定位的元素为参照
固定定位fixed：元素不保留位置，以浏览器可视窗口为参照，与父元素无关，不随滚动条滚动
一般采取“子绝父相”的布局策略。
弹性布局
display: flex;
容器属性：
flex-direction
row(从左往右) | row-reverse(从右往左) | column(从上往下) | column-reverse(从下往上)
flex-wrap
nowrap(不换行) | wrap(正常换行) | wrap-reverse(换行但是第一行在最下面)
规定一行中元素如何排列：
justify-content
flex-start(居左) | flex-end(居右) | center(居中) | space-between(两端对齐) | space-around(元素间隔相等)
align-items
flex-start(居上) | flex-end(居下) | center(居中) | baseline(基线对齐) | stretch(占满一行高度)
规定所有元素在整个容器中的垂直排列
align-content
flex-start(居上) | flex-end(居下) | center(居中) | space-between(两端对齐) | space-around | stretch(每一行之间间隔相等)
网格布局
display: grid;
容器属性：
grid-template-columns 定义列的宽度
grid-template-rows 定义行的高度
grid-column-gap 设置网格列间距
grid-row-gap 设置网格行间距
grid-gap 第一个参数为行间距，第二个参数为列间距
grid-auto-flow row 按行排列，另起一行，column 按列排列，另起一列
justify-items 元素内容的水平分布
align-items 元素内容的垂直分布
place-items 第一个参数指定align-items，第二个参数指定justify-items
justify-content 规定所有元素在整个容器中的水平排列
align-content 规定所有元素在整个容器中的垂直排列
place-content 第一个参数指定align-content，第二个参数指定justify-content
