正文：
1.强制文本单行显示：white-space:nowrap;
2.设置溢出文本显示为省略标记：text-overflow:ellipsis;
(注：text-overflow:clip | ellipsis | ellipsis-word;（css3新增加的）
其中clip表示直接裁切溢出的文本；
值ellipsis表示文本溢出时，显示省略标记(…)，省略标记代替最后一个字符；
值ellipsis-word表示文本溢出时，也是显示省略标记(…),不同的是，省略标记代替的是最后一个词)
3.例如一段代码：
当点击a标签里面的图片的时候，有虚线框，IE中图片还有边框，如何解决？
解决办法：
a{outline:none;}//主要是针对火狐等浏览器，但IE不行
img{border:0;}
a:active{noOutline:expression(this.onfocus=this.blur());}//解决IE6，IE7中的虚线框。
对于a标签来说，一般简单的解决办法是：
在a标签里加入js控制，当a标签被聚焦时，强制取消焦点，这时候a标签自然不会有虚线框。
测试
但是当连接太多的时候，一个一个的加这段代码不实用
4.HTML中两张图横向回车导致间隙,怎么才能去除成为无间隙？
例如：div 宽300px ; img 宽100px; border:0px;
代码如下:
这种情况就无法在横向显示三张图，因为回车导致两图间有间隙。
解决办法就是让图片浮动。
5.css ie6、ie7中overflow:hidden无效解决办法
产生原因：
当父元素的直接子元素或者下级子元素的样式拥有position:relative 属性时，父元素的overflow:hidden 属性就会失效。
解决办法：
我们在IE 6、7 内发现子元素会超出父元素设定的高度，即使父元素设置了overflow:hidden。
解决这个bug很简单，在父元素中使用 *position:relative; 即可解决该bug
6.表格语法
代码如下:
7.CSS text-transform
text-transform 属性控制文本的大小写。
可能的值
值 描述
none 默认。定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母，仅有小写字母。
inherit 规定应该从父元素继承 text-transform 属性的值。
- letter-spacing
letter-spacing 属性增加或减少字符间的空白（字符间距）。
例如： letter-spacing: 2px;
9.textarea去掉右侧滚动条，去掉右下角拖拽
代码：
10.css中透明度兼容代码：filter: alpha(opacity=80);opacity:0.8;
11.根据input的type来控制css样式
a. 用css中的type选择器
input[type=“text”] { background-color:#FFC; }
b.用css的expression判断表达式
input{ background-color:expression(this.type==“text”?’#FFC’:’’); }
c.用javascript脚本实现(觉得没必要，省略…)
12：text-stroke
[ text-stroke-width ]：设置或检索对象中的文字的描边厚度 [ text-stroke-color ]：设置或检索对象中的文字的描边颜色
13：text-stroke
text-stroke(文本描边)和text-fill-color(文本填充色)注意点：
目前这两个属性只有webkit内核的Safari和Chrome支持，例如： -webkit-text-stroke: 3.3px #2A75BF;
text-fill-color：颜色值，和color属性差不多都是文字的样式；
同时使用text-fill-color和color属性，text-fill-color将覆盖color属性的颜色值；
text-fill-color可以使用透明值，即：text-fill-color：transparent
14：text-shadow
text-shadow:0px 0px 0px #333333;
属性值依次：水平方向位移（支持负值）、垂直方向位移（支持负值）、模糊半径、阴影颜色
text-shadow对同一个text，可设置多个阴影，与box-shadow类似，使用逗号","分割，前一个设置效果在后一个设置效果之上。
15.设置字体
代码如下:
- css强制性换行
复制代码代码如下:
{
word-break:break-all; /支持IE，chrome，FF不支持/
word-wrap:break-word;/支持IE，chrome，FF/
}
17.CSS :first-child 选择器,:last-child选择器,:nth-child(IE7,8无效，不识别)
:nth-child(2)选取第几个标签，“2可以是你想要的数字”
:nth-child(2n)选取偶数标签，2n也可以是even
:nth-child(2n-1)选取奇数标签，2n-1可以是odd
:nth-child(3n+1)自定义选取标签，3n+1表示“隔二取一”
- css3实现背景颜色渐变
代码如下:
background:-webkit-linear-gradient(top,#FFF,#cb1919);
background:-o-linear-gradient(top,#FFF,#cb1919);
background:-ms-linear-gradient(top,#FFF,#cb1919);
background:-moz-linear-gradient(top,#FFF,#cb1919);
background:linear-gradient(top,#FFF,#cb1919);
第一个参数：设置渐变的起始位置
第二个参数：设置起始位置的颜色
第三个参数：设置终止位置的颜色
IE 浏览器
IE浏览器实现渐变只能使用IE自己的滤镜去实现
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);
第一个参数：渐变起始位置的颜色
第二个参数：渐变终止位置的颜色
第三个参数：渐变的类型
0 代表竖向渐变 1 代表横向渐变
19 IE8不识别rgba写法
20 css3的RGB颜色和HSL颜色
其中RGB颜色的原理是通过定义不同的红绿蓝色值来组成一个颜色。color:rgb(254,2,8);
其中HSL是通过色相、饱和度、亮度模式来申明颜色的。color:hsl(359,99%,40%);
如果需要设置透明背景 则可以用到他们：
background-color:hsla(0,0%,100%,0.8);
background-color:rgba(255,255,255,0.8);
不使用opacity的原因是：opacity使里面的元素也透明了，而上面的不会。
20.初始化em，u的斜体
em,u{font-style: normal;}
animation
@keyframes -> 使 div 元素匀速向下移动
div{
animation:myanimation 5s infinite;
}
@keyframes myanimation {
from {top:0px;}
to {top:200px;}
}
注:animation ->Css3动画属性 myanimation->随便命名 infinite 可重复 ,去掉就不重复了 top可以改为宽高,或者方向 form 开始 to结束
background: linear-gradient(to bottom, #D8D8D8,#fff, #D8D8D8); 上#D8D8D8 中#fff 下#D8D8D8 的颜色渐变
background:linear-gradient(#d0d0d0, white);颜色渐变(上到下)
-webkit-filter: grayscale(100%); filter: grayscale(100%); 滤镜 使图片变为黑白色
position: absolute; 绝对定位（相对于外面一层div的绝对定位）
text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); 文字阴影
box-shadow: 5px 5px 5px #666; -moz-box-shadow: 5px 5px 5px #666; -webkit-box-shadow: 5px 5px 5px #666; 盒子阴影
position:fixed; right: 20rpx;定位到右边 相对于浏览器窗口进行定位。
float:right; 浮动是针对上级 clear: both;清除浮动
text-decoration: line-through 原价效果(文字中间有斜杠)
display: flex;
justify-content: center;
flex-direction: column-reverse; 竖向排列并且倒序,按比例居中
display: flex;
flex-direction: column; 纵向 display: flex; flex-direction: row; 横向
\n空格
下划线
空格 text-align: center;文本居中
disabled input禁用 Alt+0165 美元符号
display 属性 block，可以让行内元素表现得像块级元素一样,图片变得没有外边距 none，让生成的元素根本没有框。
display: none; 隐藏 display: block; 显示
display: inline 使段落生出行内框 inline-block 让块级元素变为行内元素
letter-spacing:5rpx; 字间距
text-align: right; 文本靠右
text-align:center; margin:0 auto; width:200rpx; 让本盒子居中,盒子内的文字也居中 margin:0 auto;需要配合宽度一起使用
width: 200rpx;
align-items: center;
display: flex;
margin: 0 auto; 让盒子(包括图片)居中显示
display: flex; justify-content: space-around; 让盒子(包括图片)居中显示,但是中间会留有空白(小程序貌似不能用)
margin: 0 auto; width: 25%;
height: 120rpx; 商品导航的效果(边距根据窗口自适应,宽度25%,会自动换行)
font-weight: bold 文本加粗 letter-spacing : 5rpx; 文字间隔
placeholder = “input提示”
.tl{text-align: left; || text-align: center;|| text-align: right; 文本对齐方式
border: 1px solid #d0d0d0; border-radius:10rpx; 边框加圆角
display: flex; flex-wrap:wrap 7 让弹性盒元素在必要的时候拆行
overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
width:500rpx; 文本不换行并且超出宽度的文字显示省略号
width: 500rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; 文字超出两行省略
display: -webkit-box;
font-size: 28rpx;
color: #000;
margin: 10rpx 10rpx 0 10rpx;
text-align: left;
line-height: 40rpx;
word-break: break-all;
-webkit-box-orient:
vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;width:100%;
height: 30%;
-webkit-filter:blur(20px);
z-index: -1;
position:absolute; 虚拟背景图片
微信小程序分类导航图标的样式
导航
.big-logos {
display: flex;
padding-top: 10rpx;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
} 智能布局for外
.logoinfo {
display: flex;
flex-direction: column;
align-items: center;
width: 150rpx;
height: 150rpx;
} 智能布局for内
商品
.cont {
display: flex;
flex-wrap: wrap;
margin-top: 50rpx;
width: 100%;
}
.cont .pr {
background: #fff;
width: 46%;
border: 1px solid #ededed;
margin-left: 18rpx;
}
html分类导航图标的样式
.nav {-webkit-flex-wrap: wrap;flex-wrap: wrap;}
.nav_list {display: inline-block;padding: 25px;width: 25%;height: 120px;}
background-image:url(…/img/demo.jpg); background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%; 背景图片,并自适应
我是跑马灯标签