写css注意的事项
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
}
.parent{
width: 400px;
height: 400px;
background: #dddddd;
margin: auto;
}
.children{
width: 50px;
height: 50px;
background: saddlebrown;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="parent">
<div class="children"></div>
<div class="children"></div>
</div>
</body>
</html>
-
注意外边距折叠
与其他大多数属性不同，上下的垂直外边距margin在同时存在时会发生外边距折叠。这意味着当一个元素的下边缘接触到另一个元素的上边缘时，只会保留两个margin值中较大的那个。解决外边距折叠的方法有很多种，对于初学者来说最简单的就是所有元素只使用一个方向上的margin，比如上下的外边距我们统统使用margin-bottom。
-
使用flex进行布局
-
重置元素的css样式
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
以上简单粗暴，网络上已经有成熟的css代码库为我们解决浏览器不一致问题，例如normalize.css、minireset和ress，可以在项目中引用它们。
-
所有元素设置为border-box
box-sizing属性有两个值：
-
content-box（默认） - 当我们设置一个元素的宽度或高度时，就是设置它的内容的大小。所有的padding和边框值都不包含。例如，一个div的宽度设置为100，padding为10，于是这个元素将占用120像素（100+2*10）。
-
border-box - padding与边框包含在元素的宽度或高度中，一个设置为width: 100px和box-sizing:
border-box的div元素，他的总宽度就是100px，无论它的内边距和边框有多少。
将所有元素都设置为border-box，可以更轻松的改变元素的大小，而不必担心padding或者border值会将元素撑开变形或者换行显示。
-
将图片作为背景
-
更好的表格边框
有很多重复的边框，看起来很不好看。这里有一个快速的方法来删除所有的双倍边框：border-collapse: collapse
-
更友好的注释
-
短横线命名
当class或者id包含多个单词时，应使用连字符（-），css不区分大小写，因此不能使用驼峰式命名。同样，css中也不建议使用下划线连接的命名方式。
-
不要重复设置
大多数css属性的值都是从dom树中向上一级的元素继承的，因此才被命名为级联样式表。以font属性为例-它总是从父级继承的，您不必为页面上的每个元素都单独设置。
只需将要设置的字体样式添加到<html>或<body>元素中，然后让它们自动向下继承。
-
使用transform属性来创建动画
-
保持选择器的低权重
id (#id) > class (.class) > type (例如 header)
-
不要使用!important
-
使用autoprefixer达到更好的兼容性
上一篇： select下拉箭头样式重置
下一篇： 数据结构学习之线性表（二）