笔记会不定时更新，检查自己知识漏洞。

并集选择器

多个选择器通过逗号连接而成的。

例：h1, h2, p {color : red; }

|-所有字相关的CSS都可以从父元素继承，如：color、text-系列、font-系列、line-系列、curor、·letter-spacing字间距

块级元素：可以设置宽度、高度、位置（独占一行）。

行内元素：不可设宽度、高度、位置（都是根据内容而定的），padding、margin可设；！！！注意规范：不可在行内元素放块级元素。

行内块元素：集合块级和行内的特点，如：img，input，td，（a特殊）。可以使用display修改（重点）。

CSS的三大特性：层叠性、继承性、特殊性。

    ·层叠性：多种同名css会叠加，重复则后替代前。

    ·继承性：子标签会继承某些父标签属性。

    ·特殊性：用于衡量权重大小。 specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

````

继承或者* 的贡献值  0,0,0,0

每个元素（标签）贡献值为  0,0,0,1

每个类，伪类贡献值为  0,0,1,0

每个ID贡献值为  0,1,0,0

每个行内样式贡献值  1,0,0,0

每个!important贡献值  ∞ 无穷大

````

权重是可以叠加的 比如的例子：

````

   div ul li   ------>      0,0,0,3

   .nav ul li   ------>      0,0,1,2

   a:hover      -----—>      0,0,1,1

   .nav a       ------>      0,0,1,1  

   #nav p       ----->       0,1,0,1

````

background属性

·background-position:x,y;只写一个时另一个默认center·background-repeat设置是否平铺·background-attachment设置背景是否跟内容滚动（一般用于做视差滚动效果）。·background:rgba(red, green, blue, alpha)设置背景透明度·background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

border边框属性（重点）

boder-collapse:collapse;(合并边框)

boder-radius(设置圆角)

padding内边距属性（重点）

！！！注意：如果设置了盒子的width或height，设置padding会改变其宽度或高度。

margin外边距属性（重点）

外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

1. 必须是块级元素。   

2. 盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

实际工作中常用这种方式进行网页布局，示例代码如下：

```

    .header{ width:960px; margin:0 auto;}

```

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

解决方案：

1. 可以为父元素定义1像素的上边框或上内边距。

2. 可以为父元素添加overflow:hidden。 待续。。。。

content宽度和高度

使用宽度属性width和高度属性height可以对盒子的大小进行控制。

```

 /*外盒尺寸计算（元素空间尺寸）*/ 

 Element空间高度 = content height + padding + border + margin 

 Element 空间宽度 = content width + padding + border + margin 

 /*内盒尺寸计算（元素实际大小）*/ 

 Element Height = content height + padding + border （Height为内容高度） 

 Element Width = content width + padding + border （Width为内容宽度）

```

注意：

1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。

2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。

3、如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding 不会影响本盒子大小。

 盒子模型布局稳定性

分不清内外边距的使用，什么情况下使用内边距，什么情况下使用外边距？其实他们大部分情况下是可以混用的。  

就是说，你用内边距也可以，用外边距也可以。 你觉得哪个方便，就用哪个。按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。

原因：

1. margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。

2. padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。

3. width 没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做。## 盒子阴影（CSS3）box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影;（前两个必写）

transition过渡效果属性

transition: property duration timing-function delay;

值描述

transition-property规定设置过渡效果的 CSS 属性的名称。

transition-duration规定完成过渡效果需要多少秒或毫秒。

transition-timing-function规定速度效果的速度曲线。

transition-delay定义过渡效果何时开始。

浮动float（重点）

浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。

元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。

版心和布局流程

“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。

布局流程

为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：

1、确定页面的版心（可视区）。

2、分析页面中的行模块，以及每个行模块中的列模块。

3、制作HTML结构 。

4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

一列固定宽度且居中

最普通的，最为常用的结构

两列左窄右宽型

通栏平均分布型