css笔记

CSS起作用遵循权值原则+就近原则
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

注意：还有一个权值比较特殊–继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
相同权值，离标签近的起作用
可以用!important（写在;前面）改变权值为最高
关系选择器
, 与选择器
  后代元素
>选择第一代子元素
+ 紧跟之后的同级元素
~ 元素之后的同级所有元素
 空格选择后代所有元素
属性选择器
E[attr]
伪类选择器
E:nth-child()
伪对象选择器
E::after
标签的文字效果可以继承
letter-spacing为字母之间的距离
word-spacing为单词之间的距离
border-width的值可以为thin|medium|thick，但是常用的为px
三种布局模型
1. 流动模型
2. 浮动模型
3. 层模型

层模型的三种形式
1. 绝对定位（position:absolute）
2. 相对定位（postion:relative）
3. 固定定位（postion:fixed）

font-variant
值 描述
normal 默认值。浏览器会显示一个标准的字体。
small-caps 浏览器会显示小型大写字母的字体。
inherit 规定应该从父元素继承 font-variant 属性的值。
margin,padding,backgroud,font都可以缩写，节省带宽
font缩写时必须指定font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。font-size 与 line-height 中间要加入“/”斜扛。
内联元素水平居中：text-align:center
定宽块状元素水平居中：margin:0 auto
不定宽块状元素水平居中有三种方法
1. 加入table标签
2. 设置display:inline
3. 设置父级元素position:relative;left:50%，后代元素position:relative;left:-50%

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。
父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种：

方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
方法二：在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：

position : absolute
float : left 或 float:right
元素会自动变为以 display:inline-block 的方式显示，当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。