工作中遇到一些不会写的样式

　　　　　　单词不换行 word-break:"break-all"

text-overflow: ellipsis; 超出部分用...代替
overflow: hidden;超出不分隐藏
字体显示在一行 white-space:"nowrap"
想要字体换行显示 max-height:"";
background:transparent; //背景透明
text-indent: 3px; 首行缩进
word-break: break-all; //单词自动换行

<del>原价</del> //已删除的内容

=============iframe 在ios中不能滚动的兼容问题========================

.popup .popup-form-frame {
// padding: 2px;
// height: 90%;
// -webkit-overflow-scrolling: touch;
// overflow-y: scroll;
// position: relative;
// top: 15px;

padding: 2px;
height: 93%;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
position: relative;
top: 20px;
}

==============end===========================================

5. transition

transition 属性是一个简写属性，用于设置四个过渡属性：

- 例子
```
<!DOCTYPE html>
<html>
<head>
<style> 
div
{
100px;
height:100px;
background:blue;
transition-property: width height;
transition-duration: 2s;   //过度时间
transition-delay:1s;       //过度推迟时间（1少秒后开始）


-moz-transition-property: width height; /* Firefox 4 */
-moz-transition-duration: 2s; /* Firefox 4 */
-moz-transition-delay:1s;  //过度推迟时间

-webkit-transition-property: width height; /* Safari and Chrome */
-webkit-transition-duration: 2s; /* Safari and Chrome */
-webkit-transition-delay:1s; //过度推迟时间
```
```
-o-transition-property: width height ; /* Opera */
-o-transition-duration: 2s; /* Opera */
-o-transition-delay:1s;  //过度推迟时间
}

div:hover
{
300px;
height:300px;
}
```
  #heart:after {
  left: 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg); ---旋转---
  -webkit-transform-origin: 100% 100%; ---基于哪个点旋转 ---
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin :100% 100%;
  }
  #heart:before, #heart:after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  50px;
  height: 80px;
  background: red;
  -moz-border-radius: 50px 50px 0 0;
  border-radius: 50px 50px 0 0; ---左上右上右下左下
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
  }
```
</style>
</head>
<body>

<div></div>

<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>
```