墨滴

廖小新

V1

2023/04/05阅读：30主题：默认主题

前端那些你不知道的小技巧（CSS篇）

前端那些你不知道的小技巧（CSS篇）

复位CSS

CSS复位可以在不同的浏览器上保持一致的样式风格。
您可以使用CSS reset 库normalize.css等，也可以使用一个更简化的复位方法，代码如下：

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

继承box-sizing

让box-sizing继承html。

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

优化显示文本

有时，字体并不能在所有设备上都达到最佳的显示，所以可以让设备浏览器来帮助你：

html {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

注：请负责任地使用optimizeLegibility。此外，IE/Edge没有text-rendering支持。

给body添加行高

你不需要给每个标签都设置line-height，只要添加到body即可：

body {
    line-height: 1;
}

这样文本元素就可以很容易地从body继承。

使用not()取消菜单列表第一位或者最后一位的边框

我们通常使用的写法：

// 给列表增加右边框
.nav li {
    border-right: 1px solid #666;
}

// 去除最后一个元素的右边框
.nav li:last-child {
    border-right: none;
}

直接使用not():

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

或者使用兄弟选择符~:

// 排除第一个元素的左边框
.nav li:first-child ~ li {
    border-left: 1px solid #666;
}

这两种写法更简洁、更具语义化，也更好理解。

妙用::before和::after伪元素

  1. ::before用来创建一个伪元素，其将成为匹配选中的元素的第一个子元素
  2. ::after用来创建一个伪元素，作为已选中元素的最后一个子元素
  3. 常通过 content 属性来为一个元素添加修饰性的内容
  4. 此元素默认为行内元素
  5. 由::before和::after生成的伪元素，只能用于包含在元素格式框内，如<div></div>、<p></p>等双闭合标签
  6. 不能用于替换元素上， 比如<img />或<br />等单闭合标签（自闭合标签）

hover提示

<span data-info="JavaScript is the programming language of HTML and the Web.">Javascript</span>
span::after {
    content: attr(data-info);
    display: inline;
    position: absolute;
    top: 22px;
    left: 0;
    width: 230px;
    font-size: 13px;
}

把::after伪元素的content属性设置为attr(data-info)，具体代码和效果查看demo

使用属性选择器用于空链接

当<a>元素没有文本值，但 href 属性有链接的时候显示链接：

a[href^='http']:empty::before {
    content: attr(href);
}

清除浮动

.clearfix {
    zoom: 1; // 兼容IE
}

.clearfix::after {
    display: block;
    content: '';
    height: 0;
    line-height: 0;
    visibility: hidden;
    clear: both;
}

逗号分隔的列表

// 给每个`li`标签后面增加`,`，排除掉最后一个列表
ul > li:not(:last-child)::after {
    content: ',';
}

给input占位符placeholder设置样式

伪元素::placeholder可以选择一个表单元素的占位文本，它允许开发者和设计师自定义占位文本的样式。

<input placeholder="我是红色的！">
input::placeholder {
    color: red;
    font-size: 12px;
    font-style: italic;
}

妙用border绘制三角形

<div class="b-tool-tip"></div>
.b-tool-tip {
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent transparent #464646;
}

查看demo效果

使用负的nth-child选择项目

在CSS中使用负的nth-child选择项目1到项目n。

li {
    display: none;
}

/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
    display: block;
}

对未知高度的纯CSS滑块使用max-height做过渡动画

.slider ul {
    max-height: 0;
    overflow: hidden;
}

.slider:hover ul {
    max-height: 300px;
    transition: 500ms ease;
}

表格单元格等宽

表格工作起来很麻烦，所以务必尽量使用table-layout: fixed来保持单元格的等宽：

.table {
    display: table;
    table-layout: fixed;
}

对图标使用SVG

.logo {
    background: url("logo.svg");
}

SVG对所有的分辨率类型都具有良好的扩展性，并支持所有浏览器都回归到IE9。这样可以避开.png、.jpg或.gif文件了。

使用text-transform属性，转换大小写

text-transform CSS属性指定如何将元素的文本大写。它可以用于使文本显示为全大写或全小写，也可单独对每一个单词进行操作。

<p>I am a front-end engineer</p>
p {
    // 每个单词的首字母转换为大写
    // text-transform: capitalize;

    // 所有字符被转换为大写
    text-transform: uppercase;

    // 所有字符被转换为小写
    // text-transform: lowercase;
}

查看demo效果

文本超长使用省略号（...）

<p>I am a front-end engineer.</p>
p {
    width: 100px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

查看demo效果

解决 display: inline-block 左右相邻元素的空白问题

产生的原因：因为连续多个空白符（空格，换行符，回车符等）引起的

解决方案：

  1. 子元素div之间紧挨着，不留换行和者空格
  2. 给父级元素设置font-size: 0, 子元素再设回原来的字体大小 
<!-- 解决方案一：子元素div之间紧挨着，不留换行和者空格 -->
<!-- <div class="wrapper">
    <div class="item">this is item</div><div class="item">this is item</div><div class="item">this is item</div>
</div> -->

<!-- 解决方案二：给父级元素设置`font-size: 0`, 子元素再设回原来的字体大小 -->
<div class="wrapper">
    <div class="item">this is item</div>
    <div class="item">this is item</div>
    <div class="item">this is item</div>
</div>
.wrapper {
    font-size: 0;
}
.item {
    display: inline-block;
    background: blue;
    font-size: 16px;
}

查看demo效果

给文字设置渐变效果

<p>这是有渐变效果的文字</p>
p {
    max-width: 300px; // 因为块级元素width默认为100%，为了查看效果，把width设小一点
    background-image: -webkit-linear-gradient(0deg, red, green, blue); // 设置颜色与渐变方向
    -webkit-background-clip: text; // 主要用于剪掉文字以外的区域
    -webkit-text-fill-color: transparent; // 设置文本的填充颜色
}

查看demo效果

更多CSS使用技巧，可以查看You-Dont-Need-JavaScript中的demo

持续更新中，欢迎大家留言，收集更多的实用小技巧，共同学习，共同进步

相关链接：

分类：

前端

标签：

CSS

作者介绍

廖小新
V1

公众号：小新的前端笔记，分享前端领域技术