写css注意的事项

　　<!DOCTYPEhtml>

　　<htmllang="en">

　　<head>

　　<metacharset="UTF-8">

　　<metaname="viewport"content="width=device-width,initial-scale=1.0">

　　<metahttp-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>

　　<divclass="Parent">

　　<divclass="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达到更好的兼容性

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h54931.shtml