一氓鄙、CSS選擇器
- !important的用法:
- 可以處理一些兼容性問題荆忍,因為在IE6下面無法識別本冲,IE7可以識別厨埋;而且!important是最優(yōu)先級邪媳;
例:
a{ color: red !important;}
a{color: blue;}
這里a鏈接仍然會呈現(xiàn)出紅色,即使在上面荡陷,因為!important擁有最優(yōu)先級雨效;
- :first-of-typef&:first-cihld&:nth-of-type(n)&:nth-child(n)
- :first-of-type用在你想要用的元素上,:first-child用在你想要選擇的元素的父元素身上废赞,但若是所選元素的是第一位而父元素下面這個元素不是第一位的話是選不出來的徽龟。舉例的話就是:
區(qū)別
- :after和 :before
這兩個偽元素都是內(nèi)聯(lián)元素,必須要有content屬性唉地;本質(zhì)作用就是用來減少標簽的使用据悔,:after常用于清除浮動传透;舉例:
clearfix:after{
content: "";
display: block;
clear: both;
}
- 選擇器的優(yōu)先級
從高到低:
- !important
- 內(nèi)聯(lián)樣式
- id選擇器
- class選擇器
- 偽類選擇器
- 屬性選擇器
- 標簽選擇器
- 通配符*
- agent user style
- 屬性選擇器
- input[type="text"]{}
- input[type="button"]{}
- 關(guān)于繼承
- 所有關(guān)于文字類的樣式都是會繼承的;
二屠尊、負Margin的用法
- 負margin和position:relative;的區(qū)別旷祸,負margin不會占位,position:relative;沒有脫離文檔流讼昆,會占位托享;
- 負margin和position:absolute可以使用可以垂直水平居中;舉例
- 去除列表最后一個li元素的border-bottom浸赫;舉例
-
圣杯布局和雙飛翼布局 還有兩種兩欄布局
這里主要應(yīng)用了負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可以改變寬度
- **前提是這個元素的寬度是沒有設(shè)置的可以是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)
[資料二:關(guān)于負margin](http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812)
### 三闰围、BFC和外邊距合并
1. 什么是BFC?
- 首先BFC是一個名詞,他指的是一個獨立的布局環(huán)境既峡,我們可以理解成是一個箱子(是看不見摸不著的)羡榴,箱子里面的物品的擺放是不受外界影響的;BFC中的元素的布局是不受外界影響的(我們往往利用這個特性來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響)运敢,并且在一個BFC中校仑,塊盒與行盒(行盒由一行中所有的內(nèi)聯(lián)元素所組成)都會垂直的沿著其父元素的邊框排列。BFC的知識主要涉及float传惠、絕對定位和margin collapse中迄沫;
2. 如何形成一個BFC?
-
### 四卦方、水平垂直居中方法總結(jié)
1. **用inline-block和vertical-align來實現(xiàn)居中**:這種方法適合于未知寬度高度的情況下羊瘩。
![方法一](http://upload-images.jianshu.io/upload_images/2775927-c445a848d8f0d161.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
2. **使用table-cell,inline-block實現(xiàn)水平垂直居中**:適合高度寬度未知的情況盼砍,這種方式的話比較局限尘吗,當父元素寬度沒有設(shè)定時,table-cell的特性會使得父元素的width縮起來浇坐,而不是向外延展