单词不换行 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 属性是一个简写属性，用于设置四个过渡属性：
-
- transition-property 规定设置过渡效果的 CSS 属性的名称。
- transition-duration 规定完成过渡效果需要多少秒或毫秒。
- transition-timing-function 规定速度效果的速度曲线。
- transition-delay 定义过渡效果何时开始。
- 例子
<!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>