1. div 嵌套,子div中内容超出范围可以设置: display:inline-block; overflow:auto 即可让子div中出现滚轴
2. 让div中内容垂直方向居中 设置:height:div高度;line-height:div高度 即可
3. img.animation { transition: all 400ms ease 0s;} img.animation:hover {transform: scale(1.1);}//块级元素包围img 块元素 添加overflow:hidden 可实现图片放大特效
4. 使span(或其他)显示在div中指定位置 <div style='position:relative'><span style='position:absolute; left:20px; height:30px'></span></div>
5. 给input placeholder设置样式
:-webkit-input-placeholder { /* WebKit browsers */
font-size:20px;
color: red;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
font-size:20px;
color: red;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
font-size:20px;
color: red;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
font-size:20px;
color: red;
}
6.
超出长度显示省略号
一般要指定宽度,然后给如下四个属性。
display:bolck;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
7. transform 使元素变形转换 主要 scale(放大缩小 默认1);tanslate(x,y)位移 http://www.w3cplus.com/content/css3-transform
ui li:hover{transform:scale(2)}//放大
ui li:hover{transform:translate(0,-80px)}//上移
8.transition :允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。http://www.w3cplus.com/content/css3-transition
ransition主要包含四个属性值:
执行变换的属性:transition-property, 默认属性 all
变换延续的时间:transition- duration,
在延续时间段,变换的速率变化 transition-timing-function,
1、ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
变换延迟时间transition-delay
ui li{transition: all 0.4s ease-in-out 0s;}
例如:3中的图片放大特效
9.隐藏div滚轴但div仍可以滚动
在div外面再套一个div。这个div设置overflow:hidden,而内容div设置 overflow-y: auto;overflow-x: hidden;然后再设置外层div的width小于内层div的width。
<div class="div-wrap">
<ul class="nav">
<li>sean</li>
</ul>
</div>
.div-wrap {float:left; min-height:500px;width: 95px;overflow: hidden; margin: 0px auto;}/*可以根据$(window).height()大写js控制div-wrap大小*/
.nav {padding-top: 46px; margin-bottom: 10px;height:90%;width: 220px;overflow-y: auto;overflow-x: hidden;}
10. css倒三角
<html>
<head>
<title></title>
<style type="text/css">
div{
width: 0px;
height: 0px;
border: solid;
border-color: #666 transparent;
border-width: 5px 5px 0 5px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
11.
background:rgba(0,0,0,0.5);透明度为0.5的黑色
后续补充……