....其他内容
```
但这种方式需要无意义的空标签，违背了结构和表现分离的精髓，所以这种方式现在已经不用了。
2.给父元素增加一个`overflow:auto`，或者也变成浮动。(就是把父元素变成`bfc`了)
3.使用 after 伪元素，在父元素上增加下面的样式
```css
.clearfix::before,
.clearfix::after {
content: " "; //使用一个空格或者.
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
zoom: 1;
}
```
4.使用 bfc
把容器变成 bfc 就可以了。
### html 中的空白字符
在对`li`设置成`inline-block`时，各个元素之间会有 3 像素的空隙，这个就是 html 中的空白字符，就是在编写 html 文件时，各个元素之间的换行符引起的。
解决方案：
1. 把所有的`li`元素都写在一行，这可读性太差
2. 把父元素的字体大小设置成 0，因为空白字符也属于字符
3. 把元素的关闭标签和下一个的开始标签写到一块
```
```
但是很多格式化工具都给格式化回去了。
4. 不闭合
```
```
5. 设置间隙为负值
```css
li {
margin-left: -3px;
}
```
> 设置 inline-block 的容器，font-size 设置成 0，不然有间隙。
## 文字不换行
```css
.notice {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
```
## 滤镜
下面是让图片显示成灰色
```css
filter: grayscale(100%);
```
## 更改浏览器分辨率插件
`Viewport Resizer`
## 使用媒体查询设置不同大小屏幕的样式
```css
@media only screen and (min-width: 800px) {
.header .top {
background-color: red;
}
}
@media only screen and (min-width: 400px) and (max-width: 800px) {
.header .top {
background-color: red;
}
}
```
### 媒体查询使用相对单位时的坑
上面已经把 html 的字体大小设置成了 1rem=10px 的关系
```css
@media only screen and (min-width: 80rem) {
.header .top {
background-color: red;
}
}
```
通过上面的设置会发现，80rem 转换后并不是 800px，而是一千多，这是为什么呢？
这是因为媒体查询的级别很高，它不是 html 下面的一个子元素，所以设置 html 的字体大小对它没影响，他使用的是浏览器的字体大小。chrome 默认是 16px；
```css
@media only screen and (min-width: 50em) {
.header .top {
background-color: red;
}
}
```
细心的同学发现了，上面单位改成了 em，而不是 rem，因为这个不需要针对 html，所以使用 em 也一样，并且 rem 的兼容性没有 em 好。
## 使用媒体查询设置打印样式
可以通过媒体查询设置打印显示的样式。
## 根据不同分辨率加载不同大小的图片
因为移动端屏幕小，不需要 pc 那样大的图片，并且大图片会导致加载慢，还费流量；所以需要根据不同的分辨率，加载不同尺寸的图片。如何解决呢？
### 使用 js 或者服务端返回
```js
const windowWidth = $(window).width();
if(windowWidth<=480px){
$('imgId').attr('src','480.png');
}
```
或者把尺寸信息放到 cookie 中传给服务端，服务端返回对应图片的地址。
### 使用新标记 srcset
```html
img { display: block; width: 100%; }
```
当屏幕分辨率小于等于 480px 时，使用 `ad001.png`，当大于 480px 小于等于 800px 时使用 `ad001-m.png`;
当分辨率被调整到大一级时再缩小回来，也会使用加载后最大的图片来显示，并不会再替换到对应小分辨率设置的图片。因为当加载过大的图片后，就被认为缓存了，再次加载不会造成影响。
> 注意：`img` 需要设置成块级元素，不然不管用。
这样有个问题，比如 img 图片是放在一个容器中，img 只是容器的 50%宽，这时图片的加载判断依据还是屏幕的大小，这其实不是很合适，当屏幕是 700px 时，按上面的条件，这时加载的是 800px 的图片，但是图片实际显示大小确实 350px，小于 480px，所以应该加载 480px 的图片。那么该如何设置图片判断的实际尺寸呢？这就需要用到另一个属性`sizes`
### 使用新标记 srcset 配合 sizes
```html
```
上面 sizes 设置成`50vw`，就是说图片按照视频宽度的 50%显示。这样上面的情况图片大小改变就符合实际了。
`sizes`的值是媒体查询和宽度组成，媒体查询可省略，默认就是所有的分辨率都适应，可以针对不同的分辨率设置不同的值。
```html
```
上面的配置就是当屏幕分辨率大于等于 800px 时，图片都是 800px，否则 100%视图宽度显示。
```
sizes="(min-width:800px) calc(100vw - 30em), 100vw"
```
计算大小，注意：减号两边带上空格
### 使用新标记 picture
HTML `picture` 元素通过包含零或多个 `source` 元素和一个 `img` 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 `source` 元素，如果没有匹配的，就选择 `img` 元素的 `src` 属性中的 `URL` 。然后，所选图像呈现在`img`元素占据的空间中。
```html
```
根据不同的媒体条件加载不同的图片。
上面第四个是横屏的设置。
注意几点：
1. media 的值必须被小括号括起来，不然不起作用、
2. 必须有 img 标签
`picture` 比 `img` 使用 `srcset` 要智能，即使放到最大再缩小回来，还是会加载对应条件的图片。
使用 svg 的图片
### 使用 svg 格式的图片
矢量图，它是根据一定的规则来绘制图片，而不是像素。在不同的分辨率下不会失真，且图片尺寸小。
在线绘制网站
[第一个](https://editor.method.ac/)
[第二个](https://icomoon.io/)
### 兼容性对比
IE 浏览器完全不支持 srcset 和 picture，安卓浏览器支持也不好，而 svg 是支持比较好的。但是有些图片色彩比较丰富，必须使用位图，使用位图，我们就是用 pictrue 或者 srcset 来做，然后通过 polyfill 来解决兼容性的问题。图片的 polyfill 我们使用 [Pictruefill](https://github.com/scottjehl/picturefill)的工具库来解决，下载并引用这个 js 库即可。=
> polyfill 就是泥瓦匠的那个腻子，往墙上抹水泥的那个。
### 压缩图片网站
[压缩 svg 网站](https://iconizr.com/)
[压缩 png 网站](https://tinypng.com/)
## 什么是 DPR
dpr 是设备像素比，就是物理像素和显示像素的比。
## 搭建服务
使用 http-server，也可以 serve 这些线程的 node.js 服务包
## 云测试网站
https://testin.cn/
[移动端虚拟机](http://genymotion.net/)
## 使用 hacks 来解决兼容性
[查看各浏览器或设备的 hacks 信息](http://browserhacks.com/)
使用 pollyfill 或 shiv 来解决兼容性
- [html5shiv](https://github.com/aFarkas/html5shiv)
- [一个有名的 pollyfile-Respond](https://github.com/scottjehl/Respond)
手动来检测是否支持一些特性
[https://modernizr.com/](https://modernizr.com/)
[省时的浏览器同步测试工具](http://browsersync.cn/)
就是启动一个会自动刷新的服务，但是多个设备上的网页操作是同步的，比如开了三个浏览器，滚动一个，其他两个也会滚动。包括更改内容，等等都是同步的。
## 部署
### 代码压缩
[代码压缩网站](https://javascript-minifier.com/)
使用一些第三方构建工具
- [gulp]
- [webpack]
## 响应式框架
- [Bootstrap](https://www.bootcss.com/)
- [Foundation]()
- [Semantic UI](https://semantic-ui.com/)
- [PureCSS](http://www.purecss.cn/)
## 原型设计的工具
- Balsamlq Mockups 3
- axure
- sketch (mac)
## 交互工具
- [flinto](http://www.flinto.com.cn/)
- [principleformac](https://principleformac.com/)
让图片动起来，用UI的设计图把交互工程连起来，还能导出 gif 动画。
