HTML&CSS重點復(fù)習(xí)

一氓鄙、CSS選擇器

  1. !important的用法:
  • 可以處理一些兼容性問題荆忍,因為在IE6下面無法識別本冲,IE7可以識別厨埋;而且!important是最優(yōu)先級邪媳;
    例:
a{ color: red !important;}
a{color: blue;}

這里a鏈接仍然會呈現(xiàn)出紅色,即使在上面荡陷,因為!important擁有最優(yōu)先級雨效;

  1. :first-of-typef&:first-cihld&:nth-of-type(n)&:nth-child(n)
  • :first-of-type用在你想要用的元素上,:first-child用在你想要選擇的元素的父元素身上废赞,但若是所選元素的是第一位而父元素下面這個元素不是第一位的話是選不出來的徽龟。舉例的話就是:
    區(qū)別
  1. :after和 :before
    這兩個偽元素都是內(nèi)聯(lián)元素,必須要有content屬性唉地;本質(zhì)作用就是用來減少標簽的使用据悔,:after常用于清除浮動传透;舉例:
clearfix:after{
  content: "";
  display: block;
  clear: both;
}
  1. 選擇器的優(yōu)先級
    從高到低:
  • !important
  • 內(nèi)聯(lián)樣式
  • id選擇器
  • class選擇器
  • 偽類選擇器
  • 屬性選擇器
  • 標簽選擇器
  • 通配符*
  • agent user style
  1. 屬性選擇器
  • input[type="text"]{}
  • input[type="button"]{}
  1. 關(guān)于繼承
  • 所有關(guān)于文字類的樣式都是會繼承的;

二屠尊、負Margin的用法

  1. 負margin和position:relative;的區(qū)別旷祸,負margin不會占位,position:relative;沒有脫離文檔流讼昆,會占位托享;
  2. 負margin和position:absolute可以使用可以垂直水平居中;舉例
  3. 去除列表最后一個li元素的border-bottom浸赫;舉例
  4. 圣杯布局雙飛翼布局 還有兩種兩欄布局
    這里主要應(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縮起來浇坐,而不是向外延展
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末睬捶,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子近刘,更是在濱河造成了極大的恐慌擒贸,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,639評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件跌宛,死亡現(xiàn)場離奇詭異,居然都是意外死亡积仗,警方通過查閱死者的電腦和手機疆拘,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來寂曹,“玉大人哎迄,你說我怎么就攤上這事回右。” “怎么了漱挚?”我有些...
    開封第一講書人閱讀 157,221評論 0 348
  • 文/不壞的土叔 我叫張陵翔烁,是天一觀的道長。 經(jīng)常有香客問我旨涝,道長蹬屹,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,474評論 1 283
  • 正文 為了忘掉前任白华,我火速辦了婚禮慨默,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘弧腥。我一直安慰自己厦取,他們只是感情好,可當我...
    茶點故事閱讀 65,570評論 6 386
  • 文/花漫 我一把揭開白布管搪。 她就那樣靜靜地躺著虾攻,像睡著了一般。 火紅的嫁衣襯著肌膚如雪更鲁。 梳的紋絲不亂的頭發(fā)上霎箍,一...
    開封第一講書人閱讀 49,816評論 1 290
  • 那天,我揣著相機與錄音岁经,去河邊找鬼朋沮。 笑死,一個胖子當著我的面吹牛缀壤,可吹牛的內(nèi)容都是我干的樊拓。 我是一名探鬼主播,決...
    沈念sama閱讀 38,957評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼塘慕,長吁一口氣:“原來是場噩夢啊……” “哼筋夏!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起图呢,我...
    開封第一講書人閱讀 37,718評論 0 266
  • 序言:老撾萬榮一對情侶失蹤条篷,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后蛤织,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體赴叹,經(jīng)...
    沈念sama閱讀 44,176評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,511評論 2 327
  • 正文 我和宋清朗相戀三年指蚜,在試婚紗的時候發(fā)現(xiàn)自己被綠了乞巧。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,646評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡摊鸡,死狀恐怖绽媒,靈堂內(nèi)的尸體忽然破棺而出滓窍,到底是詐尸還是另有隱情壤圃,我是刑警寧澤互站,帶...
    沈念sama閱讀 34,322評論 4 330
  • 正文 年R本政府宣布昙啄,位于F島的核電站,受9級特大地震影響获三,放射性物質(zhì)發(fā)生泄漏旁蔼。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,934評論 3 313
  • 文/蒙蒙 一石窑、第九天 我趴在偏房一處隱蔽的房頂上張望牌芋。 院中可真熱鬧,春花似錦松逊、人聲如沸躺屁。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽犀暑。三九已至,卻和暖如春烁兰,著一層夾襖步出監(jiān)牢的瞬間耐亏,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評論 1 266
  • 我被黑心中介騙來泰國打工沪斟, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留广辰,地道東北人。 一個月前我還...
    沈念sama閱讀 46,358評論 2 360
  • 正文 我出身青樓主之,卻偏偏與公主長得像择吊,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子槽奕,可洞房花燭夜當晚...
    茶點故事閱讀 43,514評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案几睛? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 13,737評論 1 92
  • CSS 是什么 css(Cascading Style Sheets),層疊樣式表粤攒,選擇器{屬性:值所森;屬性:值}h...
    崔敏嫣閱讀 1,475評論 0 5
  • 本課來自http://www.imooc.com/learn/9請不要用作商業(yè)用途。 HTML5 HTML介紹 H...
    PYLON閱讀 3,210評論 0 5
  • 01. 小麥是我高中時的同學(xué)晴弃,出身書香門第,長得身材好氣質(zhì)佳、膚白貌美是我們?nèi)喙J的美女肝匆。一次與小琴小聚聊到了她...
    木暖霏閱讀 626評論 8 5
  • 筆者長期戰(zhàn)斗在紀檢監(jiān)察工作一線,切身體會到了基層紀檢干部的辛酸與無奈顺献。尤其是十八大后旗国,黨和國家深入推進黨風(fēng)廉政建設(shè)...
    462c8fd539ec閱讀 496評論 12 35