css 【实用】

CodeSheep 发布于2019-08-30 15:56 / 273人阅读

摘要：可以用来多行文本的情况下，用省略号隐藏超出范围的文本。设置或检索伸缩盒对象的子元素的排列方式。限制在一个块元素显示的文本的行数。

实用样式

以下内容：要背要背要背要背要背要背要背要背要背要背要背要背要背要背要背要背要背要背要背要背

慎用宽高 尽量不要加 容易出现 bug 及兼容问题

清除浮动 在浮动的父级加

/* css */

.className::after{
    content:"";
    display: block;
    clear:both;
}

rem算法

/* css */

html { font-size: 62.5%; } /* IE9以下兼容 */
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

单行溢出变点点：

/* css */

.className{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

多行溢出变点点：

/* css */

.className{
    overflow: hidden;    
    display: -webkit-box;               // 将对象作为弹性伸缩盒子模型显示 。
    text-overflow: ellipsis;        // 可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。
    -webkit-box-orient: vertical;       // 设置或检索伸缩盒对象的子元素的排列方式 。
    -webkit-line-clamp: 2;              // 限制在一个块元素显示的文本的行数。

}

文字两端对齐：

css 

/* 中文文字两端对齐 */

.className1{ 
    text-align:justify;
    text-justify:inter-ideograph
}

/* 英文文字两端对齐 */
.className1{ 
    text-align:justify;
    text-justify:newspaper
}

css中如何让第一个和最后一个不被选中?

tr:not(:first-child):hover {
        background: #ffffdd;
    }
/* 如果上面的代码出现问题，使用下面的会更安全 或者 :not(class) */
.b:not(.b-n):hover {
    background: #ffffdd;
}

图片变灰与原色

/* css */

.gray {  //灰色
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
    filter: grayscale(100%);
    
    filter: gray;
}

.init {  //原色
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    
    filter: grayscale(0%);
    
    filter: ;
}

清除a的默认样式

/* css */

.className1{ 
    text-decoration:none;
    out-line:none;
}

点击跳转页面

/* html */
在新窗口跳转至百度
在当前窗口跳转至百度

服务器托管云服务器漂亮实用实用实用函数比较实用

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

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

实用的 CSS — 动画性能对比

摘要：欢迎移步我的博客阅读实用的动画性能对比前言在现代浏览器中，渲染页面所要负责的线程主要有两个主线程和排版线程。经过上面的实验，我们对属性有了比较好的了解同时我们对上述动画性能也有一个了解。欢迎移步我的博客阅读：《实用的 CSS — 动画性能对比》前言在现代浏览器中，渲染页面所要负责的线程主要有两个：主线程和排版线程。主线程运行 JS 计算 HTML 元素的 CSS 样式布局...

jonh_felix 2019-08-29 12:57 评论0 收藏0
CSS进阶篇--CSS实用技巧制作三角形

摘要：实现如图所示的三角形图标代码样式需要猛点该文字，百度云盘下载实现如图所示的三角形图标：showImg(https://segmentfault.com/img/bVpG2N); html代码： css样式： body{background:#faf7ef;} div{margin:20px auto} div.arrow-up { width:0px; height...

Steven 2019-08-28 18:15 评论0 收藏0
js实用方法记录-js动态加载css、js脚本文件

摘要：测试动态加载到标签并执行回调方法调用加载成功动态加载脚本地址回调函数加载样式站中下载打开方法测试页面跳转到微信中不能打开其他安卓手机尝试调用未指定需要打开的可参考自定义协议参数转换参考参数转对象使用对象转参数 js实用方法记录-动态加载css/js 1.动态加载js文件到head标签并执行回调方法调用：dynamicLoadJs(http://www.yimo.link/static/...

shusen 2019-08-23 13:10 评论0 收藏0
js实用方法记录-js动态加载css、js脚本文件

摘要：测试动态加载到标签并执行回调方法调用加载成功动态加载脚本地址回调函数加载样式站中下载打开方法测试页面跳转到微信中不能打开其他安卓手机尝试调用未指定需要打开的可参考自定义协议参数转换参考参数转对象使用对象转参数 js实用方法记录-动态加载css/js 1.动态加载js文件到head标签并执行回调方法调用：dynamicLoadJs(http://www.yimo.link/static/...

Dogee 2019-08-02 11:59 评论0 收藏0
js实用方法记录-js动态加载css、js脚本文件

摘要：测试动态加载到标签并执行回调方法调用加载成功动态加载脚本地址回调函数加载样式站中下载打开方法测试页面跳转到微信中不能打开其他安卓手机尝试调用未指定需要打开的可参考自定义协议参数转换参考参数转对象使用对象转参数 js实用方法记录-动态加载css/js 1.动态加载js文件到head标签并执行回调方法调用：dynamicLoadJs(http://www.yimo.link/static/...

sanyang 2019-08-29 17:14 评论0 收藏0