CSS样式--实际开发总结

2022-10-22 09:12:31

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;
   }

超出长度显示省略号

一般要指定宽度，然后给如下四个属性。

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的黑色

后续补充……

码农公寓

超出长度显示省略号

相关文章