體驗css03

《字詞間距和文本縮進》

Letter-spacing:表示字間距簿姨。單位可以是px也可以是em堕扶;

Word-spacing:詞間距爱沟;注釋:實際上這個東西設置的就是空格的大小徊件。

Text-indent:表示文本縮進奸攻; 一般的值是 2em表示縮進兩個字蒜危。

總結:對于一段文本來講如果文本內(nèi)沒有空格那么詞間距是不會生效的。但是字間距在任何時候都會生效睹耐。

【CSS繼承性和層疊性】

Css的鍵值對屬性分為兩大類文字控制屬性和區(qū)塊控制屬性辐赞,然后由于所有的文字控制屬性都是控制的內(nèi)容,所以說所有文字控制屬性都具備繼承能力硝训,簡單的說就是你給父級寫所有的子集也能生效响委。 但是由于所有的區(qū)塊控制屬性都是控制的自身所以區(qū)塊控制屬性不會繼承。

《層疊性》

簡單的說就是CSS先寫的屬性會被后寫的屬性覆蓋掉窖梁,那么這個性質(zhì)就叫CSS的層疊性赘风。利用這個性質(zhì)將來可以對項目中的某些CSS模板進行重寫而不去修改它內(nèi)部的代碼。

【超鏈接的偽類】

簡介:偽類表示一種狀態(tài)纵刘,或者一種功能邀窃,它并不是默認的普通樣式,它的樣式必須在被觸發(fā)以后才會生效彰导。

a:hover ?表示當鼠標移上超鏈接以后的樣式蛔翅;

在css中所有的偽類都是以冒號開頭的。

a:visited 表示訪問過的超鏈接樣式 ?(現(xiàn)在這個偽類企業(yè)站幾乎不用位谋。你寫個人站的時候盡量不要加除非遇到特殊需求)

【復合選擇器的權重】

簡介:復合選擇器就是由多個基礎選擇器組成的復雜選擇山析。在實際制作網(wǎng)站的過程當中由于網(wǎng)站比較復雜會產(chǎn)生大量的復合選擇器,有的復合選擇器會比較長掏父。所以會產(chǎn)生復雜的權重問題笋轨。一定要注意復合選擇器的權重和css的層疊性質(zhì)無關。

注意事項:當選擇器的權重相同的時候才會產(chǎn)生層疊性的關系后寫的會覆蓋先寫的赊淑,但是當選擇器的權重不同的時候肯定是權重更高的樣式條會生效爵政。

《復合選擇器權重計算方法》

第一:你可以通過火狐直接審查元素來看 右側css樣式中最上面的就是權重最高的。

第二:自己計算的方法

互聯(lián)網(wǎng)上的一個權重計算公式陶缺;

一個標簽選擇器 = 1克钾挟;

一個類選擇器 = 1斤;

一個id選擇器 = 1噸饱岸;

【溢出隱藏】

簡介:這個屬性非常重要掺出,將來會經(jīng)常用來調(diào)試css的兼容或者分區(qū)的一些高度計算錯誤都可以靠它來解決。

基本結構: overflow:hidden苫费; 表示超出的尺寸會被修剪掉(隱藏)

它還有另外的一個值是auto汤锨;作用是可以讓超出的地方自動添加一個滾動條。

注意事項:當你希望實現(xiàn)真正的溢出隱藏效果的時候千萬切記一定要事先指定好固定的寬高百框。否則是不生效的闲礼。

【外邊距塌陷】

簡介:外邊距確實有這樣的一個現(xiàn)象就叫做外邊距塌陷,發(fā)生情況當兩個盒子的垂直外邊距緊挨在一起的時候就會自動發(fā)生合并,合并的結果以最大的外邊距為主不是相加柬泽。我們可以認為這是瀏覽器中存在的一個bug慎菲,而且只有垂直外邊距才會發(fā)生,水平外間距不會發(fā)生此問題聂抢。

《解決方法》

外邊距塌陷有兩種情況一個是垂直排列的盒子上下外邊距發(fā)生合并钧嘶,這種情況不用解決,不會造成麻煩琳疏;

情況2:嵌套的盒子內(nèi)部的盒子添加margin-top的時候會將外部的盒子帶下來有决,產(chǎn)生外邊距合并。 這種情況較多發(fā)生 解決方法 ?給外邊的盒子添加overflow:hidden屬性即可空盼;(將內(nèi)部的小盒子浮動有時候也可以解決)

【CSS屬性整理】

文字控制類屬性

屬性名稱

作用

備注

color

文本顏色

font-size

字號

Font-family

字體

Font-weight

文本加粗

值bold

Text-align

文本對齊方式

Text-decoration

文本裝飾

值:underline书幕,overline,line-through,下上中

Font-style

文本風格

Italic文本傾斜

Line-height***

行高

值跟容器一樣大可以垂直居中

Text-indent

文本縮進

值2em

Letter-spacing

字間距

Word-spacing

詞間距

控制空格的大小

區(qū)塊控制屬性

屬性

作用

備注

width

height

background

背景色

值:顏色 圖片 平鋪方式 水平位置 垂直位置 圖片模式揽趾;

平鋪方式:repeat台汇,no-repeat,repeat-x,repeat-y

圖片模式:fixed;

display

顯示模式

Inline篱瞎,block苟呐,inline-block

float

浮動對齊方式

只有左右,浮動的標簽顯示模式會自動轉為行內(nèi)塊

border

邊框

值:粗細 固態(tài) 顏色;

margin

外邊距

有外邊距塌陷的bug俐筋;

padding

內(nèi)邊距

Padding沒有塌陷的毛睬K亍;

以上這3個屬性都可以通過 top澄者,left笆呆,right,bottom來單獨設置某一個方向的距離

overflow

溢出隱藏

值:hidden粱挡,auto赠幕;

List-style

列表樣式

值:none;

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末询筏,一起剝皮案震驚了整個濱河市榕堰,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌嫌套,老刑警劉巖局冰,帶你破解...
    沈念sama閱讀 222,104評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異灌危,居然都是意外死亡,警方通過查閱死者的電腦和手機碳胳,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,816評論 3 399
  • 文/潘曉璐 我一進店門勇蝙,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人挨约,你說我怎么就攤上這事味混〔ⅲ” “怎么了?”我有些...
    開封第一講書人閱讀 168,697評論 0 360
  • 文/不壞的土叔 我叫張陵翁锡,是天一觀的道長蔓挖。 經(jīng)常有香客問我,道長馆衔,這世上最難降的妖魔是什么瘟判? 我笑而不...
    開封第一講書人閱讀 59,836評論 1 298
  • 正文 為了忘掉前任,我火速辦了婚禮角溃,結果婚禮上拷获,老公的妹妹穿的比我還像新娘。我一直安慰自己减细,他們只是感情好匆瓜,可當我...
    茶點故事閱讀 68,851評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著未蝌,像睡著了一般驮吱。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上萧吠,一...
    開封第一講書人閱讀 52,441評論 1 310
  • 那天左冬,我揣著相機與錄音,去河邊找鬼怎憋。 笑死又碌,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的绊袋。 我是一名探鬼主播毕匀,決...
    沈念sama閱讀 40,992評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼癌别!你這毒婦竟也來了皂岔?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,899評論 0 276
  • 序言:老撾萬榮一對情侶失蹤展姐,失蹤者是張志新(化名)和其女友劉穎躁垛,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體圾笨,經(jīng)...
    沈念sama閱讀 46,457評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡教馆,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,529評論 3 341
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了擂达。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片土铺。...
    茶點故事閱讀 40,664評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出悲敷,到底是詐尸還是另有隱情究恤,我是刑警寧澤,帶...
    沈念sama閱讀 36,346評論 5 350
  • 正文 年R本政府宣布后德,位于F島的核電站部宿,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏瓢湃。R本人自食惡果不足惜理张,卻給世界環(huán)境...
    茶點故事閱讀 42,025評論 3 334
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望箱季。 院中可真熱鬧涯穷,春花似錦、人聲如沸藏雏。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,511評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽掘殴。三九已至赚瘦,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間奏寨,已是汗流浹背起意。 一陣腳步聲響...
    開封第一講書人閱讀 33,611評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留病瞳,地道東北人揽咕。 一個月前我還...
    沈念sama閱讀 49,081評論 3 377
  • 正文 我出身青樓,卻偏偏與公主長得像套菜,于是被迫代替她去往敵國和親亲善。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,675評論 2 359

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案逗柴? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,759評論 1 92
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表蛹头,主要用...
    寥寥十一閱讀 1,839評論 0 6
  • ?前端面試題匯總 一、HTML和CSS 21 你做的頁面在哪些流覽器測試過戏溺?這些瀏覽器的內(nèi)核分別是什么? ...
    Simon_s閱讀 2,221評論 0 8
  • 轉載請聲明 原文鏈接地址 關注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    程序員poetry閱讀 16,560評論 32 459
  • 每個人 都要經(jīng)受 來自 生活的 磨礪 最終會 沉淀出 一種 叫做"歲月"的 風情
    Annie大講堂閱讀 252評論 1 2