一.flex布局
1.弹性布局特点
（1）主轴与交叉轴：弹性容器具有主轴（main axis）和交叉轴（cross axis）。默认情况下，主轴是水平方向，交叉轴是垂直方向。
（2）弹性容器：通过将父元素的display属性设置为flex或inline-flex来创建弹性容器。
（3）子元素的弹性项目：弹性容器中的每个子元素都成为弹性项目。子元素可以指定各自在主轴和交叉轴上的大小、顺序以及对齐方式等。
（4）主轴对齐：弹性项目可以在主轴上按照一定比例分配空间，也可以使用justify-content属性定义主轴的对齐方式。
（5）交叉轴对齐：弹性项目可以在交叉轴上进行对齐，包括顶部对齐、底部对齐、居中对齐等，使用align-items属性定义交叉轴对齐方式。
（6）换行与自动调整：可控制弹性项目是否换行，并且具备自动调整元素大小的能力。
2.常用属性
（1）justify-contentjustify-content属性定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
常用属性值：
| 属性值 | 描述 |
|---|---|
| flex-start | 左对齐（默认值） |
| flex-end | 右对齐 |
| center | 居中 |
| space-between | 两端对齐，项目之间的间隔都相等 |
| space-around | 每个项目两侧的间隔相等 |
（2）align-items属性定义项目在交叉轴上如何对齐。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
常用属性值：
| 属性值 | 描述 |
|---|---|
| flex-start | 交叉轴的起点对齐 |
| flex-end | 交叉轴的终点对齐 |
| center | 交叉轴的中点对齐 |
| baseline | 项目的第一行文字的基线对齐 |
| stretch | 如果项目未设置高度或设为auto，将占满整个容器的高度（默认值） |
（3）flex-direction属性决定主轴的方向，水平或者垂直
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
常用属性值：
| 属性值 | 描述 |
|---|---|
| row | 主轴为水平方向，起点在左端（默认值） |
| row-reverse | 主轴为水平方向，起点在右端 |
| column | 主轴为垂直方向，起点在上沿 |
| column-reverse | 主轴为垂直方向，起点在下沿 |
（4）align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
常用属性值：
| 属性值 | 描述 |
|---|---|
| flex-start | 与交叉轴的起点对齐 |
| flex-end | 与交叉轴的终点对齐 |
| center | 与交叉轴的中点对齐 |
| space-between | 与交叉轴两端对齐，轴线之间的间隔平均分布 |
| space-around | 每根轴线两侧的间隔都相等 |
| stretch | 轴线占满整个交叉轴（默认值） |
（5）flex-wrap属性决定换行不换行以及换行的方向
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
常用属性值：
| 属性值 | 描述 |
|---|---|
nowrap | 不换行（默认值） |
| wrap | 换行，第一行在上方 |
| wrap-reverse | 换行，第一行在下方 |
二. css精灵图
精灵图(sprites)的使用 使用精灵图核心:
1.精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
2.这个大图片也称为sprites精灵图或者 雪碧图
3.移动背景图片位置，此时可以使用background-position .
4.移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同
5.因为一般情况下都是往上往左移动，所以数值是负值。
6.使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。
三.字体图标的使用
1.字体图标的下载
推荐下载网站:
●icomoon 字库 http://icomoon.io IcoMoon成立于2011年，推出了第一个自定义图标字体生成器。
●阿里iconfont字库iconfont-阿里巴巴矢量图标库 这个是阿里妈妈M2UX的一个iconfont 字体图标字库，包含了淘宝图标库和阿里妈妈图标库。
一旦选择了一套字体图标，就需要下载它。通常，会得到一个包含.ttf、.woff、.woff2、.eot和.svg等字体文件的压缩包，以及一个CSS文件。
2.将字体文件放入项目
将下载的字体文件放入项目中。通常，我们会将这些字体文件放在项目的fonts或assets目录下。
3.引入CSS文件
在HTML文件中引入字体图标的CSS文件。这通常是通过<link>标签完成的
<link rel="stylesheet" href="path/font-icons.css">
4.在CSS中使用字体图标
通常是通过在元素上应用特定的类名来完成的
.my-icon {
font-family: 'MyFontIcons'; /* 替换为字体图标名称 */
content: '\e800'; /* 替换为使用的图标的Unicode字符 */
}
在html中可使用
<i class="my-icon"> </i>
四.css小技巧-文本溢出
1.单行文本溢出显示省略号--必须满足三个条件
/*1.先强制一行内显示文本*/ white-space: nowrap; ( 默认normal 自动换行) /*2. 超出的部分隐藏*/ overflow: hidden; /*3. 文字用省略号替代超出的部分*/ text-overflow: ellipsisil;
2.多行文本溢出显示省略号
多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端(移动端大部分是webkit内核)
overflow: hidden; text-overflow: ellipsis; /*弹性伸缩盒子模型显示*/ display: -webkit-box; /* 限制在一个块元素显示的文本的行数*/ -webkit-line-clamp: 2; /* 设置或检索伸缩盒对象的子元素的排列方式*/ -webkit-box-orient: vertical;
五.html5和css3 新增特性
1.html5新增部分
1.1 HTML5 新增的语义化标签
<head>:头部标签
<nav>:导航标签
<article>:内容标签
<section>:定义文档某个区域
<aside>:侧边栏标签
<footer>:尾部标签
注意: 这种语义化标准主要是针对搜索引擎的这些新标签页面中可以使用多次
1.2 HTML5 新增的多媒体标签
(1)视频:<video>
语法
<video src="文件地址" controls="controls"></video> <video controls="controls" width="300"> <source src="move.ogg" type="video/ogg" ><source src="move.mp4" type="video/mp4" > <video>标签播放视频</ video >
常见属性
| 属性 | 值 | 描述 |
|---|---|---|
autoplay | autoplay | 自动播放 |
| controls | controls | 向用户显示播放控件 |
| width | pixels(像素) | 设置播放器宽度 |
| height | pixels(像素) | 设置播放器高度 |
| loop | loop | 播放完是否继续播放该视频，循环播放 |
preload | auto | 预先加载视频 |
src | url | 视频地址 |
| poster | Imgurl | 加载等待的画面图片 |
| muted | muted | 静音播放 |
（2）音频：<audio>
语法
<audio src="文件地址"controls="controls"></audio> < audio controls="controls" > <source src="happy.mp3"type="audio/mpeg" ><source src="happy.ogg" type="audio/ogg" > <audio>标签播放音频</ audio>
常见属性
| 属性 | 值 | 描述 |
|---|---|---|
autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮 |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放 |
src | url | 要播放的音频的URL |
1.3HTML5 新增的 input 类型
type="email" ：限制用户输入必须为Email类型
type="url" ：限制用户输入必须为URL类型
type="date" ：限制用户输入必须为日期类型
type="time" ：限制用户输入必须为时间类型
type="month" ：限制用户输入必须为月类型
type="week" ：限制用户输入必须为周类型
type="number" ：限制用户输入必须为数字类型
type="tel" ：手机号码
type="search" ：搜索框
type="color" ：生成一个颜色选择表单 1.4HTML5 新增的表单属性
required ：required（ 表单拥有该属性表示其内容不能为空，必填 ）
placeholder ：提示文本 （ 表单的提示信息，存在默认值将不显示 ）
autofocus ：autofocus （ 自动聚焦属性，页面加载完成自动聚焦到指定表单 ） multiple ：multiple （可以多选文件提交）
注：可以通过以下设置方式修改placeholder里面的字体颜色
input::placeholder {
color: pink;
}
2.css3新增部分
2.1CSS3 盒子模型
CSS3 中可以通过box-sizing来指定盒模型，有2个值:即可指定为content-box、border-box
可以分成两种情况:
（1）box-sizing: content-box盒子大小为width + padding + border(以前默认的)
（2）box-sizing: border-box盒子大小为 width
2.2CSS3 calc函数:
calc() 此函数让你在声明CSS属性值时执行一些计算。
width: calc(100%- 80px);
注：括号里面可以使用+-*/来进行计算
2.3CSS3 过渡
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
（1）属性: 想要变化的css属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以。
（2）花费时间:单位是秒(必须写单位)
（3）运动曲线:默认是ease(可以省略)
（4）何时开始:单位是秒(必须写单位)可以设置延迟触发时间默认是0s(可以省略)
