CSS 常用方法小计

avwu 发布于2019-08-30 13:06 / 558人阅读

摘要：清除浮动是在处理兼容性问题单行多行文字超出省略号多行单行移动端删除默认的苹果工具栏和菜单栏控制状态栏显示样式顶部时间那一块浏览器设置成急速模式页面滚动穿透当弹出弹框的

1.清除浮动

1st:
.clear{
    clear:both; height: 0; line-height: 0; font-size: 0
}

2ed:
.over-flow{
    overflow: auto; zoom: 1; //zoom: 1; 是在处理兼容性问题
}

3rd:
.outer {zoom:1;}    /*IE6/7*/
.outer :after {
    clear:both;content:".";display:block;
    width: 0;height: 0;visibility:hidden;
}   /*FF/chrome/opera/IE8*/

2.单行多行文字超出省略号

多行：
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
word-break: break-all;

单行：
width: 500px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

3.移动端meta



apple-mobile-web-app-capable : 删除默认的苹果工具栏和菜单栏
apple-mobile-web-app-status-bar-style : 控制状态栏显示样式(顶部时间那一块)


360浏览器设置成急速模式

4.页面滚动穿透

当弹出 弹框的时候，给body设置overflow: hidden;
$("body").css("overflow","hidden");

弹框消失的时候，overflow: initial;
$("body").css("overflow","initial");

5.垂直水平居中

#parent {display: table}
#child{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

//css3
.verticalcenter{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

6.单词换行中间加上

hyphens:auto

7.输入框只能输入数字

8.跨浏览器透明度

.transparent {
    filter: alpha(opacity=50); /* internet explorer */
    -khtml-opacity: 0.5;      /* khtml, old safari */
    -moz-opacity: 0.5;       /* mozilla, netscape */
    opacity: 0.5;           /* fx, safari, opera */
}

9.CSS开启硬件加速

.cube {
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
   /* Other transform properties here */
}

//webkit内核
.cube {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
  /* Other transform properties here */
}

10.Chrome and Safari中，使用CSS transforms 或者 animations闪烁

.cube {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;
 
   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   perspective: 1000;
   /* Other transform properties here */
}

11.placeholder 不垂直居中

    line-height: normal;
    
    input::-webkit-input-placeholder { /* WebKit browsers */
      line-height: 1.5em;
    }
    input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      line-height: 1.5em;
    }
    input::-moz-placeholder { /* Mozilla Firefox 19+ */
      line-height: 1.5em;
    }
    input:-ms-input-placeholder { /* Internet Explorer 10+ */
      line-height: 1.5em;
    }

12.placeholder 颜色



:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #f00;  
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #f00;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #f00;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #f00;
}

云服务器 GPU云服务器 query常用方法深度学习常用方法 file类常用方法 jquery常用的方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115308.html

2018.12.24 无障碍学习小计

摘要：在中的规范，包括关于角色可以使用哪些元素和不使用哪些元素的指导英不启用将网页某个部分标记为，以便及时向用户显示更新内容，而不是用户浏览这部分网站时更新可能位于初始页面加载中不同的屏幕阅读器和辅助技术对不同更改的响应不同，如果辅助技术不 ARIA 在 HTML 中的规范，包括关于 ARIA 角色可以使用哪些 HTML 元素和不使用哪些 HTML 元素的指导 https://www.w3....

Fundebug 2019-08-30 15:55 评论0 收藏0
2018.12.24 无障碍学习小计

摘要：在中的规范，包括关于角色可以使用哪些元素和不使用哪些元素的指导英不启用将网页某个部分标记为，以便及时向用户显示更新内容，而不是用户浏览这部分网站时更新可能位于初始页面加载中不同的屏幕阅读器和辅助技术对不同更改的响应不同，如果辅助技术不 ARIA 在 HTML 中的规范，包括关于 ARIA 角色可以使用哪些 HTML 元素和不使用哪些 HTML 元素的指导 https://www.w3....

masturbator 2019-08-02 13:58 评论0 收藏0
2018.12.24 无障碍学习小计

摘要：在中的规范，包括关于角色可以使用哪些元素和不使用哪些元素的指导英不启用将网页某个部分标记为，以便及时向用户显示更新内容，而不是用户浏览这部分网站时更新可能位于初始页面加载中不同的屏幕阅读器和辅助技术对不同更改的响应不同，如果辅助技术不 ARIA 在 HTML 中的规范，包括关于 ARIA 角色可以使用哪些 HTML 元素和不使用哪些 HTML 元素的指导 https://www.w3....

weapon 2019-08-23 14:16 评论0 收藏0
工作技术点小计14条 hybrid + animate 方向

摘要：设置动画的时候直接设置和变化值不会起作用需要先设置等一小会再设置变化值安卓端窗口不可见时为关键帧图片动画响应式坑若设置的动画为中代表阶段分五步阶段分步达到关键帧响应式设计方法为以为例图片要按照计算后实际尺寸做动画然后在两帧之间按照图的总帧设置transition 动画的时候 , js直接设置duration 和变化值不会起作用 , 需要先设置duration , 等一小会再设置变...

mikasa 2019-08-21 17:37 评论0 收藏0