css规范及总结

.demo{

    显示属性：display  visibility

    定位属性：position

    浮动属性：float

    尺寸：width  height

    盒子模型：padding  border  margin

    背景属性：background

    文本属性：text-align  text-indent

    字体属性：font-size

}

这个css样式可以截为三块来讲，显示属性，定位属性，浮动属性合为一块。尺寸，盒子模型，背景属性为另一块。文本属性，字体属性则为最后一块。

首先是第一块，由于前三个属性都会影响到文档流，他们对页面的影响是最大的，所以归为一块，并写在前面。另外定位和浮动不可以同时使用，如果同时使用的话，由于定位的优先级较高，浮动属性就会失效。还有就是display：inline-block和float属性也不要一起用，一起用了的话就会出现很骚的问题，不好改动。定位的话，我个人认为尽量少用为好。

接着是第二块，如果说第一部分强调的是位置的话，那么这部分的内容强调的则是内容，尺寸调大小，最好是不要把宽和高都定死，定死的话，就好比有一个场景，你设定的div里有一行很长的文字，然后你把宽定死了，他这行文字多出来的部分就会被挤到下一行，这样就出现了问题。说到这里，我提一嘴关于margin的小操作，margin：0 auto是居中操作，如果你在它之前写margin就会失效，而在他下面写就不会失效。

最后这一块，就是内容里具体的东西了，你可以设置关于他的居中，左对齐，右对齐，文本缩进各种各样的对齐方式，字体大小，类型，颜色等属性。这一块也是有点小坑在里边的，你会发现text-align：center居中经常失效，为什么呢？有两种可能，一是你没有宽度无法居中，也就是比如说你想让一个div中的按钮水平居中，但是你忘了设置div的宽度，但是外面这层div还是存在的，并不会消失，这就导致了div和你的按钮一样大，他根本无法居中。二是他已经居中了，但看起来并没有居中，这个问题一般是由于你上边有脱离文档流的东西，他刚好有一部分和你要居中的div重叠在了一起，你可以把它理解成被削去了一块。

element.style（style=""）里的属性是优先级最高的，如果你想不用它里面的属性，你需要在你的属性内加一个！important才行