css 【实用】

2024年5月30日 190次阅读 来源: Tong_sunshine

实用样式

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

慎用宽高 尽量不要加 容易出现 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 */
<div onclick="window.open('http://www.baidu.com')">在新窗口跳转至百度</div>
<div onclick="window.open('http://www.baidu.com','_self')">在当前窗口跳转至百度</div>
    原文作者：Tong_sunshine
    原文地址: https://segmentfault.com/a/1190000018424057
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞