HTML&CSS重点复习

一、CSS选择器

1. !important的用法：

• 可以处理一些兼容性问题，因为在IE6下面无法识别，IE7可以识别；而且!important是最优先级；
  例：

a{ color: red !important;}
a{color: blue;}

这里a链接仍然会呈现出红色，即使在上面，因为!important拥有最优先级；

2. :first-of-typef&:first-cihld&:nth-of-type(n)&:nth-child(n)

• :first-of-type用在你想要用的元素上，:first-child用在你想要选择的元素的父元素身上，但若是所选元素的是第一位而父元素下面这个元素不是第一位的话是选不出来的。举例的话就是:
  区别

3. :after和 :before
   这两个伪元素都是内联元素，必须要有content属性；本质作用就是用来减少标签的使用，:after常用于清除浮动；举例：

clearfix:after{
  content: "";
  display: block;
  clear: both;
}

4. 选择器的优先级
   从高到低：

• !important
• 内联样式
• id选择器
• class选择器
• 伪类选择器
• 属性选择器
• 标签选择器
• 通配符*
• agent user style

5. 属性选择器

• input[type="text"]{}
• input[type="button"]{}

6. 关于继承

• 所有关于文字类的样式都是会继承的；

二、负Margin的用法

1. 负margin和position:relative;的区别，负margin不会占位，position:relative;没有脱离文档流，会占位；
2. 负margin和position:absolute可以使用可以垂直水平居中；举例
3. 去除列表最后一个li元素的border-bottom；举例
4. 圣杯布局和双飞翼布局 还有两种两栏布局
   这里主要应用了负margin对浮动的影响：负margin对浮动元素的影响

- 圣杯布局: 
   ```

main{width: 100%;}

main,#sidebar-left, #sidebar-right{float:left;}

sidebar-left{margin-left: -100%; }

sidebar-right{margin-left: sidebar-width;}

content{padding: sidebar-width+板块之间所需margin;}

sidebar{position: relative;}

sidebar{left: +-padding;}

    - 双飞翼布局: 

main{width: 100%;}

main,#sidebar-left, #sidebar-right{float:left;}

sidebar-left{margin-left: -100%; }

sidebar-right{margin-left: width;}

main .wrap{margin: sidebar-width+板块之间所需margin;}

main{background-color: none;}

main .wrap{background: #####;}

 5.负margin可以改变宽度
- **前提是这个元素的宽度是没有设置的可以是auto的**,例

![负margin可以增宽度](http://upload-images.jianshu.io/upload_images/2775927-0a96585a0308296f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 

这里的用法：[中间有缝隙两边无缝隙](http://js.jirengu.com/jiyateyuxa/1/edit)

[资料一：其他用法](http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html)
[资料二：关于负margin](http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812)

### 三、BFC和外边距合并

1. 什么是BFC?
 - 首先BFC是一个名词，他指的是一个独立的布局环境，我们可以理解成是一个箱子（是看不见摸不着的），箱子里面的物品的摆放是不受外界影响的；BFC中的元素的布局是不受外界影响的（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响），并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。BFC的知识主要涉及float、绝对定位和margin collapse中；

2.  如何形成一个BFC？
 -

### 四、水平垂直居中方法总结

1. **用inline-block和vertical-align来实现居中**：这种方法适合于未知宽度高度的情况下。

![方法一](http://upload-images.jianshu.io/upload_images/2775927-c445a848d8f0d161.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

2. **使用table-cell，inline-block实现水平垂直居中**：适合高度宽度未知的情况，这种方式的话比较局限，当父元素宽度没有设定时，table-cell的特性会使得父元素的width缩起来，而不是向外延展