三种选择器
- id选择器；
# 选择器名 {属性：属性值} 优先级第一
- 类选择器；
. 选择器名 {属性：属性值}优先级第二
- 标签名选择器；
标签名 {属性：属性值}优先级第三
所以id选择器的样式会覆盖掉其它给它的样式；
同种选择器的优先级
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5样式布局</title>
<style>
div{
border:1px solid red;
}
div{
border:1px solid black;
}
</style>
</head>
<body>
<div>1111</div>
<div>1111</div>
<div>1111</div>
</body>
</html>
- 同样给div设置了红色和黑色，两个选择器优先级别相同，但是浏览器会用第二个覆盖掉第一个，所以是黑色；
CSS的书写顺序
- display
- position
- position相关的left,top,right,bottom,z-index;
- float;
- clear;
- width;
- height;
- margin;
- padding;
- border;
- background;
- color;
- font;
- text-decoration;
- text-align;
- vertical-align;
- white-space;
margin
- 可以理解为，当前元素与父级元素或其他兄弟级元素之间的距离；
padding
