10个css小技巧

1.使用css复位

css复位可以在不同的浏览器上保持一致的样式风格。可以使用CSS RESET库NORMALIZE等&＃xff0c;也可以使用一个更简单的复位方法&＃xff1a;

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

现在元素的margin和padding已为0&＃xff0c;box-sizing可以管理css模型布局。

2. 继承box-sizing

从html元素继承box-sizing&＃xff1a;

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

如此在插件或其他组件里改变box-sizing变得简单。

3.使用unset而不是重置所有属性

重置元素的属性时&＃xff0c;不需要重置每个单独的属性&＃xff1a;

button{background: none;border: none;color: inherit;font: inherit;outline: none;padding: 0;
}

可以用all简写来指定所有元素的属性&＃xff0c;将该值设置为unset会将元素的属性更改为其初始值&＃xff1a;

button{all: unset;
}

4. 为body元素添加行高

不必为每一个

&＃xff0c;元素逐一添加line-height&＃xff0c;直接添加到body元素&＃xff1a;

body{line-height: 1.5;
}

文本元素可以很容易地继承body的样式。

5. 逗号分隔列表

使列表的每项都由逗号分隔&＃xff1a;

ul > li:not(:last-child)::after{content: ",";
}

因最后一项不加逗号&＃xff0c;可以使用&＃xff1a;not()伪类。

6. 使用max-height来建立纯css的滑块

max-height与overflow hidden一起来建立纯css的滑块&＃xff1a;

.slider{max-height: 200px;overflow-y: hidden;width: 300px
}.slider:hover{max-height: 600px;overflow-y: scroll;
}

鼠标移入滑块元素时增大它的max-height的值&＃xff0c;便可以显示溢出部分。

7. 创造格子等宽的表格

table-layout: fixed 可以让每个格子保持等宽&＃xff1a;

.calendar{table-layout: fixed;
}

8. 利用flexbox去除多余的外边距

与其使用nth- &＃xff0c; first- &＃xff0c; 和last-child去除列之间的多余的空袭&＃xff0c;不如使用flexbox的space-between属性&＃xff1a;

.list{display: flex;justify-content: space-between;
}.list .person{flex-basis: 23%;
}

列之间的间隙总是均与相等。

9. 利用属性选择器来选择空链接

当元素没有文本内容&＃xff0c;但有href属性的时候&＃xff0c;显示他的href属性

a[href&＃61;"http"]:empty::before{content: attr(href);
}

10. 给“默认”链接定义样式