css小得

1.多行文本溢出显示省略号(…)全攻略

WebKit浏览器或移动端的页面
Css代码

P{
overflow : hidden;
text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

参考网站：http://www.css88.com/archives/5206
···

2.表单验证正则：数字

<input  type='text'  "(this.v = function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)" "this.v();" placeholder="	请输入电话"/>

3.Fullpage布局

宽度的单位用百分比，em，rem，vw这类

margin-top:50%;
-webkit-transform: translate(0,-50%);
-moz-transform: translate(0,-50%;
-ms-transform: translate(0,-50%);
-o-transform: translate(0,-50%);
transform: translate(0,-50%);

4.百度header box-shadow颜色

shadow: 0 0 5px #888;

5.字母转大小写

h1 {text-transform:uppercase} 全大写
h2 {text-transform:capitalize} 第一个大写
p {text-transform:lowercase}全小写

6.Flex布局 justify-content

div { display: flex; justify-content: space-around/*左右两边*/; space-between/*顶在两边*/;center/*都集中在中间*/}

justify-content: flex-start || flex-end || center || space-between || space-around || space-evenly


.honor_main{
    width: 100%;
    display: flex;
    justify-content:space-around;
    flex-direction:row;//内容横向排列；
    flex-wrap: wrap;自动换行
    align-content: flex-start;
}

7.背景颜色渐变

background:linear-gradient(red 0%,blue 60%,green 100%);

8.等分页面

（1）父元素display: table;子元素display:table-cell;（直接把table等分，子元素设置高度没用）
（2）父元素display: flex;子元素flex:1;
参考链接：https://blog.youkuaiyun.com/xiaobing_hope/article/details/51285695

9. 响应式布局尺寸：

超小屏幕：（手机，小于768px）。

小屏幕：（平板，大于等于768px）。

中等屏幕：（桌面显示器，大于等于992px）。

大屏幕：（大桌面显示器，大于等于1200px）。

@media only screen and (max-width:768px){ } 小于768px 0-767px

@media only screen and (min-width:768px){ } 大于等于768px 768-991px

@media only screen and (min-width:992px){ } 大于等于992px 992-1199px

@media only screen and (min-width:1200px){ } 大于等于1200px 1200px+