HTML和CSS的提升
1、CSS的高级技巧
1.1 精灵图
精灵技术主要是针对于背景图片使用，就是把多个小背景图片整合到一张大图片中
- 移动背景图片时，可以只用background-position
- 移动的距离就是这个目标图片的x 和y 坐标
- 数值为负值
- 使用精灵图时要精确测量，每个背景图片的大小和位置
1.2 字体图标
字体图标展示的是图标，本质属于字体
优点：
- 轻量级：一个图标字体要比一系列的图像要小，只要字体加载了图标就会渲染出来，减少了服务器请求
- 灵活性：本质是文字，可以随意更改颜色、大小、透明效果等
- 兼容性：几乎支持所有的浏览器
（1）字体图标的下载：
下载网站：
- icomoon字库：https://icomoon.io/
- 阿里 iconfont 字库：http://www.iconfont.cn/
步骤：
- 打开网站，点击IcoMoon App,选中图标，点击cenerate font
- 点击download
（2）字体图标的引入：
- 把下载包里面的fonts 文件夹放到页面根目录下
- 在CSS样式中全局声明字体（把字体文件通过CSS引入页面）
- 在解压缩文件的style.css 文件中获取声明
声明
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?c9i3f2');
src: url('fonts/icomoon.eot?c9i3f2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?c9i3f2') format('truetype'),
url('fonts/icomoon.woff?c9i3f2') format('woff'),
url('fonts/icomoon.svg?c9i3f2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
具体使用方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体图标</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?c9i3f2');
src: url('fonts/icomoon.eot?c9i3f2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?c9i3f2') format('truetype'), url('fonts/icomoon.woff?c9i3f2') format('woff'), url('fonts/icomoon.svg?c9i3f2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
span::after {
font-family: 'icomoon';
}
</style>
</head>
<body>
<span></span>
</body>
span盒子中的图标，为复制下图右下角图标：
（3）字体图标的追加：
步骤：
- 打开网站，点击IcoMoon App,选中图标
- 点击import Icons，选择 selection.json 文件打开
- 选定需要追加的图标，点击cenerate font
- download
- 删除旧文件，把新下载的文件加入
1.3 CSS的三角形
（1）等腰三角
语法示例：
div {
width: 0;
height: 0;
line-height: 0; /*照顾兼容性*/
font-size: 0;
border: 10px solid transparent;
border-left-color: red; /*左侧三角*/
}
效果：
（2）直角三角形
语法示例：
div {
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 20px 8px 0 0; /*将上边框增大，左下边框设为0*/
}
效果：
1.4 用户界面样式
用户界面样式：更改一些用户操作样式
（1）更改用户鼠标样式
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标的形状
语法示例：
li { cursor: pointer;}
| 属性值 | 描述 |
|---|---|
| default | 小白（默认） |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
（2）取消表单轮廓线和防止拖拽文本域
取消表单轮廓线：
- 给表单添加outline： 0; 或者 outline：none; 可以去掉默认的蓝色边框
input {outline: none;}
防止拖拽文本域：
- 给文本域添加热size：none; 可以防止拖拽文本域
textarea { resize: none; }
1.5 行内块和文字居中对齐
vertical-align 属性：设置图片或表单（行内元素）和文字垂直对齐
注意：只对行内元素或行内块元素有效
语法：
vertical-align: baseline | top | middle | bottom ;
| 值 | 描述 |
|---|---|
| baseline | 默认值，元素放置在父元素的基线上 |
| top | 把元素的顶端与行中的最高元素的顶端对齐 |
| middle | 把元素放置在父元素的中部 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐 |
特别注意：图片底侧空白缝隙的解决方案
- 给图片添加vertical-align：middle | top | bottom 等
- 把图片转化为块级元素 display：block；
1.6 溢出文字的省略号显示
（1）单行文本溢出显示省略号
white-space: nowrap; /*强制一行内显示文本*/
overflow: hidden; /*超出部分隐藏*/
text-overflow: ellipsis; /*用省略号代替超出的部分*/
（2）多行文本溢出显示省略号
多行文本溢出显示省略号有较大的兼容性问题，适合于webKit 浏览器或移动端
overflow: hidden; /*超出部分隐藏*/
text-overflow: ellipsis; /*用省略号代替超出的部分*/
display: -webkit-box; /*弹性伸缩盒子模型显示*/
-webkit-line-clamp: 2; /*限制在一个块元素的文本的行数*/
-webkit-box-orient: vertical; /*设置或检索伸缩盒对象的子元素的排列方式*/
1.7 常见的布局技巧
（1）margin 负值的运用
- 让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框
- 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位，如果有定位，则加z-index）
li:hover {
position: relative; /*相对定位*/
border: 1px solid red;
}
或：
li:hover {
z-index: 1;
border: 1px solid red;
}
（2）文字围绕浮动元素巧妙运用
浮动元素不会压住文字
图片盒子左浮动效果图：
（3）行内块元素的巧妙运用
- 两个行内块元素中间默认有距离，本身有大小
- 行内块元素给父级添加text-align: center; 可以使整个行内块元素水平居中
效果：
1.8 CSS的初始化
示例：
/*把所有标签的内外边距清零*/
* {
margin: 0;
padding: 0;
}
/*斜体的文字不倾斜*/
em,
i {
font-style: normal;
}
/*去掉li的小圆点*/
li {
list-style: none;
}
img {
border: 0; /*照顾低版本浏览器：图片包含链接的边框问题*/
vertical-align: middle; /*取消图片底侧有空白缝隙的问题*/
}
/*定义鼠标经过button按钮时鼠标的样式为 pointer*/
button {
cursor: pointer;
}
/*所有链接的颜色、取消下划线*/
a {
color: #666;
text-decoration: none;
}
/*鼠标经过链接变成绿色*/
a:hover {
color: green;
}
/*所有button、input指定字体*/
button,
input {
font-family:Microsoft YaHei,Hei ti SC;
}
/*指定body的一些元素样式*/
body {
-webkit-font-smoothing: antialiased; /*抗锯齿性，让文字显示更加清晰*/
background-color: #fff;
font: 12px/1.5 Microsoft YaHei;
color
}
/*清除浮动*/
.clearfix: after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1; /*IE6、7 专有*/
}
2、CSS的新特性
注意：
- 新增的CSS3 特性有兼容性问题，IE9+才支持
- 移动端支持优于PC端
- 现阶段主要学习：新增选择器和盒子模型以及其他特性
2.1 选择器
（1）属性选择器
属性选择器可以根据元素特定属性的来选择元素，可以实现不借助类或id选择器实现功能。
| 选择符 | 说明 |
|---|---|
| E[att] | 选择具有 att 属性的 E 元素 |
| E[att=“val”] | 选择具有 att 属性且属性值等于 val 的 E 元素 |
| E[att^=“val”] | 选择具有 att 属性且属性值以 val 开头的 E 元素 |
| E[att$=“val”] | 选择具有 att 属性且属性值以 val 结尾的 E 元素 |
| E[att*=“val”] | 选择具有 att 属性且属性值中含有 val 的 E 元素 |
注意：
- 类选择器、属性选择器、伪类选择器，权重都为10
（2）结构伪类选择器
结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器里面的子元素。
| 选择符 | 说明 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素 E |
| E:last-child | 匹配父元素中的最后一个 E 元素 |
| E:nth-child(n) | 匹配父元素中第 n 个子元素 E |
| E:first-of-type | 指定类型 E 的第一个 |
| E:last-of-type | 指定类型 E 的最后一个 |
| E:nth-of-type(n) | 指定类型 E 的第 n 个 |
nth-child(n)：
- n 可以是数字，关键字和公式
- n 如果是数字，就是选择第 n 个子元素，里面数字从 1 开始
- n 可以是关键字：even 偶数，odd 奇数
- n 可以是公式：如果 n 是公式，则从 0 开始计算，但是第 0 个元素或超出元素的个数会被忽略
nth-child(n) 和 nth-of-type(n) 的区别：
- nth-child(n) 会把所有盒子都排列序号，执行时先看 nth-child(n)，然后回去看nth-child(n)前面的盒子，如果匹配，则可以选择，如果不匹配则不选择
- nth-of-type(n) 会把指定元素的盒子排列序号，执行时先找出左右指定元素的第 n 个
（3）伪元素选择器
伪元素选择器可以帮助我们利用 CSS 创建新标签元素，而不需要 HTML 标签，简化HTML结构。
语法：
element::before{}
基本使用：
div::before {
display: inline-block; /*为了可以使盒子可以定义宽高*/
content: ''; /* '' 中间可以内容可*编辑*/
width: 30px;
height: 30px;
background: pink;
}
| 选择符 | 说明 |
|---|---|
| ::before | 在元素内部的前面插上内容 |
| ::after | 在元素内部的后面插上内容 |
- before 和 after 创建一个元素，但是不属于行内元素
- 新创建的这个元素在文档树中是找不到的
- before 和 after 必须有 content 属性
- before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
- 伪元素在父元素选择器和标签选择器一样，权重为 1
2.2 盒子模型 border-box
CSS3 可以通过 box-sizing 来指定盒模型，有 2 个值：content-box、border-box。使得计算盒子大小的方式发生变化。
- box-sizing: content-box 盒子大小为 width + padding + border
- box-sizing: border-box 盒子大小为 width
- 如果盒子模型我们改为了 box-sizing：border-box ，那 padding 和 border 就不会撑大盒子（前提是padding 和 border 不会超过 width 宽度）
开发中使用：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
2.3 filter 和 calc
（1）图片变模糊
CSS 滤镜filter：将模糊或颜色偏移等图形效果运用于元素
语法：
filter: 函数();
示例：
filter: blur(5px); /* blur函数：模糊处理，数值越大越模糊*/
（2）计算盒子宽度 width: clac 函数
calc函数：在声明 CSS 属性值时执行一些计算
语法：
width: calc(100% - 20px); /*可以使用 + - * / 来进行计算*/
2.4 过渡 transition
transition 属性让 CSS 具有动画的效果，常与 :hover 搭配使用。
语法：
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
- 属性：想要变化的 CSS 属性，宽度高度、背景颜色、内外边距都可以，如果想要所有属性都变化过渡写一个 all 就可以
- 花费时间：单位是秒，必须写
- 运动曲线：默认为 ease ，可以省略。linear 匀速、ease 逐渐慢下来、ease-in 加速、ease-out 减速、ease-in-out 先加速后减速
- 何时开始：单位是秒，默认为 0s，可以省略
3、常用的HTML5的新特性
HTML5 的新增特性都有兼容性问题，基本上是IE9+ 以上的版本才支持
3.1 标签
（1）语义化标签
- 这些标签主要是针对搜索引擎
- 在页面中可以使用多次
- 在IE9 中，需要把这些元素转换为块级元素
- 移动端无兼容性问题
<header>：头部标签
<nav>： 导航标签
<article>：内容标签
<section>：定义文档某个区域
<aside>：侧边栏标签
<footer>：尾部标签
（2）视频标签video
在不使用插件的情况下，可以原生的支持视频格式文件播放
视频标签：video 的兼容性
| 浏览器 | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | yes | no | no |
| Chrome | yes | yes | yes |
| Firefox | yes（从Firefox 21 版本开始） | yes | yes |
| Safari | yes | no | no |
| Opera | yes | yes | yes |
语法：
<video src="文件地址" controls="controls"></video>
兼容性写法：
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
video 常见属性：
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 视频就绪自动播放（谷歌浏览器需要添加 muted 属性） |
| controls | controls | 想用户显示播放控件 |
| width | 像素 | 设置播放器宽度 |
| height | 像素 | 设置播放器高度 |
| loop | loop | 循环播放 |
| preload | auto（预先加载视频），none（不应加载视频） | 规定是否预加载视频（如果有autoplay 就忽略该属性） |
| src | url | 视频URL地址 |
| poster | imgurl | 加载等待的画面图片 |
| muted | muted | 静音播放 |
（3）音频标签audio
音频标签兼容性：
| 浏览器 | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer | yes | no | no |
| Chrome | yes | yes | yes |
| Firefox | yes | yes | yes |
| Safari | yes | yes | no |
| Opera | yes | yes | yes |
语法：
<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地址 |
3.2 input 表单
input 类型：
| 属性值 | 说明 |
|---|---|
| type=“email” | 限制用户输入必须为Email类型 |
| type=“url” | 限制用户输入必须为URL类型 |
| type=“date” | 日期类型 |
| type=“time” | 时间类型 |
| type=“month” | 月类型 |
| type=“week” | 周类型 |
| type=“number” | 数字类型 |
| type=“tel” | 手机号码 |
| type=“search” | 搜索框 |
| type=“color” | 生成一个颜色选择表单 |
表单属性：
| 属性 | 值 | 说明 |
|---|---|---|
| required | required | 表单拥有该属性表示某内容不能为空 |
| placeholder | 提示文本 | 表单的提示信息，存在默认值将不显示 |
| autofocus | autofocus | 自动聚焦属性，页面加载完成自动聚焦到指定表单 |
| autocomplete | off / on | 当用户在字段开始键入时，浏览器基于之前输入过的值，应该显示出在字段中填写的选项。默认已经打开，需要放在表单内，加上name属性，同时成功提交 |
| multiple | multiple | 可以多选文件提交 |