css-开发总结
1.重叠的外边距
当上下垂直的外边距同时存在时会发生外边距折叠。就是只保留两个margin值中较大的那个。
html:
<div class="div1">
<div class="div2"></div>
<div class="div2"></div>
</div>css:
.div1{
width: 600px;
height: 200px;
border: 1px solid #aaa;
margin: 0 auto;
}
.div2{
width: 50px;
margin: 20px;
border: 1px solid red;
height:50px;
}效果：
2.重置css样式
为了避免不同浏览器的不能默认样式所带来的的麻烦，重置css样式无疑是最好的选择。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}3.所有元素设置为Border-box
box-sizing属性有两个值：
- content-box（默认）： -内容的实际尺寸。所有的padding和边框值都不包含。
- border-box ： padding与边框包含在元素的宽度或高度中。
比如一个元素设置为：width: 100px;box-sizing:border-box,那么它的总宽就是100px,包括：padding与边框。
4.短横线命名
当class或者ID包含多个单词时，应使用连字符（-），CSS不区分大小写，因此不能使用驼峰式命名。同样，CSS中也不建议使用下划线连接的命名方式。
5.不要重复设置
善用继承样式，可以去掉很多重复代码。
6.使用transform属性来创建动画
最好使用transform()函数来创建元素的位移或大小动画，尽量不要直接改变元素的width，height以及left/top/bottom/right属性值。
7.注意选择器的权重
id>.class>el
8.慎用!important
因为!important的权重是最高的，它可以覆盖掉所以的样式
9.em, rem与px
- em - 设置元素为1em，其大小与父元素的font-size属性有关。这个单位用于媒体查询中，特别适用于响应式开发，但是由于em单位在每一级中都是相对于父元素进行计算的，所以要得出某个子元素em单位对应的px值，有时候是很麻烦的。
- rem - 相对于<html>元素的font-size大小计算，rem使得统一改变页面上的所有标题和段落文本大小变得非常容易。
- px - 像素单位是最精确的，但是不适用于自适应的设计。px单位是可靠的，并且易于理解，我们可以精细的控制元素的大小和移动到1px。
- 大型项目使用预处理器
Sass, Less, PostCSS, Stylus等css预处理器。它们提供诸如变量、CSS函数、选择器嵌套和许多其他很酷的功能，使CSS代码更易于管理，特别是在大型项目中。
11.压缩CSS文件
网页首要关注点就是加载速度，压缩文件无疑是其中较好的一种方式。
相关推荐
AlisaClass 2020-07-19
jiedinghui 2020-10-25
Ladyseven 2020-10-22
zuncle 2020-09-28
xiaohuli 2020-09-02
葉無聞 2020-09-01
nicepainkiller 2020-08-20
AlisaClass 2020-08-09
myloveqiqi 2020-08-09
buttonChan 2020-08-02
drdrsky 2020-07-29
Ladyseven 2020-07-25
nicepainkiller 2020-07-24
hellowzm 2020-07-19
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT
昔人已老 2020-07-19
骆驼的自白 2020-07-18
lanzhusiyu 2020-07-19
hellowzm 2020-07-19
CSSEIKOCS 2020-07-18