CSS学习

• CSS新增了box-sizing属性

# 此元素的内边距和边框不再会增加它的宽度
  * {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  }

• 块级元素（block）

一般是其他元素的容器，可容纳内联元素和其他块状元素，
块状元素排斥其他元素与其位于同一行，
宽度(width)高度(height)起作用。
常见块状元素为div、p、h1、li。

• 内联元素（inline）

内联元素只能容纳文本或者其他内联元素，
它允许其他内联元素与其位于同一行，
其宽度(width)和高度(height)只与其包含的内容有关，
通过CSS设置高度和宽度不起作用。
常见内联元素为a、span
  li{
  display:inline;        /*将内联元素设置为块级元素*/
}
 span{
  display:block;        /*将块级元素设置为内联元素*/
}

• position

被 position: static 修饰的元素不会受到top, bottom, left, right影响。
# 绝对定位（fixed）
元素的位置相对于浏览器窗口固定，配合top、right、bottom、left进行定位，脱离标准文档流，不会受到父元素overflow:hidden影响

• 选择器的优先级

# 简单选择器的优先级
   HTML标签属性 > id选择器 > 类选择器 > 元素选择器
# 同类型选择器的优先级
   CSS规则写在最后面的生效
# 选择器的优先级
   判断优先级：我们约定   id 选择器的权重为100， 类选择器权重为10， 标签选择器权重为1。
   一个复杂的选择器的权重等于所有选择器的权重之和。一般，选择器越特殊，优先级(权重)越  高。
 # !important
   样式最高优先级：无视优先级，在样式的一条声明的最后分号前加上，使该样式起作用。