字体和背景的知识点回顾

1.字体：
font-size字体大小 单位px 默认十六
font-family字体 默认微软雅黑 可以添加多个字体用逗号隔开 要是第一个字体不加载就加载第二个字体
color：字体颜色 也可以用rgb （0-255） / #十六进制
font-weght：加粗 范围100-900 100最细 400正常
font-style：倾斜 italic 斜体 正常normal oblique更倾斜
text-align 常用 justify 两端对齐
line-heigth 行高
letter-spacing 字符间距 word-spacing 字母间距 这就不拆单词 可以取负值 会交叉
text-indent：2em 两个字体大小 用于首行缩进
text-decoration 文字修饰； 一般使用在a连接上 ，underline 下划线 ；overline上划线 line-through 删除线
text-transform 字体大小写 capitalize 首字母大写 lowercase 全部小写字母 uppercase全部大写 none 没设置
font：可以对文本设置进行简写 顺序：font-style（倾斜）、font-weight（字体加粗） 、font-size字体大小 /line-heigth 行高、font-family字体

2.背景属性
background-color 颜色
background-image 背景图片
background-repeat 平铺
repeat默认 repeat-x x轴平铺 repeat-y y轴平铺 no-repeat 没有平铺
background-position 图片位置（图片定位） 放的是x y值，也可以填百分比
background-size：数值、百分数 或者设置cover和contain
cover把图片放的足够大 但是不能保证显示特定的区域 进行裁剪
contain延伸最大尺寸 完全适应图片大小 但是无法填满全部内容 不裁剪
background-attachment 图片固定
fixed固定，相对于浏览器固定 ，而不是盒子固定，跳出盒子了，要是没有承接的盒子， 图片会消失
background：color url（） repeat(是否平铺) position（位置） attchement（背景的悬浮方式）

3.浮动属性：
float：left左浮 right 右浮 none没有浮动
几个盒子都加上 float：left 会并列排 先来后到 谁先浮动谁在前面 但是 前面面积大的 其他的会见缝插针，但是文字不会被覆盖

5.网格布局 grid布局
含义：将网页划分一个个网格，可以组合任意不同的网格，做出各种各样的布局
grid布局和flex布局相同点：都可以指定容器内多个项目的位置
不同点：
flex是轴线布局，只能针对项目的轴线位置进行布局。可以当做一维布局。
触发网格布局display：grid 能触发变成块级元素网格（设置宽高）
display：inline-grid 是设置行内块级的网格