1.怪异盒模型
(1)在了解怪异盒模型之前我们先来了解一下标准盒模型的特点
标准盒模型:
width,height设置旳是内容区域的大小
整个盒子的大小 = width + 左右的padding + 左右的border
在width给定的情况下，标准盒模型增加paddding、border都会扩大盒子的尺寸
(2)然后再看怪异盒模型的特点
怪异盒模型：
width，height设置的是整个盒子的大小
内容区域的大小 = width - 左右的padding - 左右的border
在width给定的情况下，怪异盒模型增加padding，border时盒子尺寸不变，会向内挤压内容 区域。
(3)使用方式：
通过 * 号选择器（通配符设置所有盒子为怪异盒模型）
如：
*{
box - sizing: border - box;
}
(4)怪异盒模型优缺点
优点：由于设计图上读取大部分都是总尺寸，使用怪异盒模型免去了内容区计算问题，可以做到看到多少尺寸就写多少尺寸。
缺点：兼容性问题。IE9以下浏览器 box - sizing:border-box 无效
2.弹性盒子
弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间。本文将解释所有的基本原理。
方法：
（1）display: flex;
1.控制子级的排列方式
2.控制子级在水平方向的位置
3.控制子级在垂直方向的对齐位置
（2）flex - direction: row;
1.控制自己的排列方式：row（水平排列） column（垂直排列）
（3）justify-content: space - between;
1.控制子级的水平位置
2.flex-start:位置居左（默认值）
center：位置居中
flex-end：位置居右
space-between:水平方向子级位置平均分配（最常使用）
space-around:水平方向子级带两侧间隙位置平均分配
（4）align-items:center;
1.控制子级在垂直方向上的对齐方式
2.strech（默认）：拉伸对齐，所有的盒子高度都被拉伸到一致，与该行最大高度保持一致
flex-start：所有盒子高度不再被拉伸，顶对齐
center：所有盒子高度不再被拉伸，居中对齐
flex-end:所有盒子高度不再被拉伸，底对齐
（5）flex-wrap:wrap;
1.控制同行子级排列顺序，是否可以换行
2.nowrap：默认值强制不换行，如果空间不够，压缩盒子宽度
wrap：保持盒子宽度设置，空间不够，就换行
3.常见的CSS样式（自身样式）
背景样式
1.设置盒子的背景颜色：
颜色的描述方式：红 绿 蓝
rgba(0-255 , 0-255, 0-255) //二进制
#FF0000 //十进制
73344 //二进制
那么设置背景颜色：
backgroud-color:rgba(255,0,0); // 后面也可以用后两种设置颜色的方法
2.设置背景图
background-image:url(图片的位置)；
3.设置背景图平铺风格
background-repeat:no-repeat;
4.设置背景图大小
background-size:100px auto;
可以直接设置具体的宽高，也可以用cover或者contain
background-size:cover; //背景占满框，等比例缩放（有可能显示不全）
background-size:contain; //等比例缩放，完全显示（有可能占不满）
5.背景图位置设置
background-postion:100px 100px; // 位置坐标/原点坐标在盒子的左上角
字体样式
1.字体颜色
color:prink
2.字型
font-family:monospace;
3.字体粗细
lighter 细体 normal 正常 bold 粗体 bolder 更粗
font-weight:bold;
4.字体行高
给一个不带单位的数字，表示是当前盒子字体大小的倍数
line-height: 1.5;
5.字体下划线
text-decoration: underline;
文字位置特性
1.文字居中
text-align：center
2.文字缩进
1em 等于 1倍当前盒子的font-size大小
text-indent: 2em;
3.文字强制不执行
white-space: nowrap;
4.超出盒子可视区，隐藏
overflow: hidden;
5.文字溢出样式设置
clip：切割掉 elipsis：省略号
text-overflow:elipsis;