前端第四天知識總結

行間距

在CSS中并沒有直接提供設置行間距的方式筝尾,我們只能通過設置行高來間接的設置痰驱,行高越大行間距越大
使用line-height來設置行高
行高類似于我們上學用的單線本肩民,單線本是一行一行的蔽豺,線與線之間的距離就是行高
網(wǎng)頁中的文字實際上也是寫在一個看不見的線中的,而文字會默認在行高中垂直居中顯示
行間距 = 行高 - 字體大小

通過設置line-height可以間接的設置行高
可以接收的值:
1.直接接收一個大小
2.可以指定一個百分數(shù)棘利,則會相對于字體去計算行高
3.可以直接傳一個數(shù)值橱野,則行高會設置字體大小相應的倍數(shù)

對于單行文本來說,可以將行高設置為和父元素的高度一致赡译,這樣可以是單行文本在父元素中垂直居中

在font中也可以指定行高
在字體大小后可以添加/行高仲吏,來指定行高,該值是可選的蝌焚,如果不指定則會使用默認值

文本的樣式

text-transform可以用來設置文本的大小寫
可選值:
1.none 默認值,該怎么顯示就怎么顯示誓斥,不做任何處理
2.capitalize 單詞的首字母大寫只洒,通過空格來識別單詞
3.uppercase 所有的字母都大寫
4.lowercase 所有的字母都小寫

text-decoration可以用來設置文本的修飾
可選值:
1.none:默認值,不添加任何修飾劳坑,正常顯示
2.underline 為文本添加下劃線
3.overline 為文本添加上劃線
4.line-through 為文本添加刪除線

超鏈接會默認添加下劃線毕谴,也就是超鏈接的text-decoration的默認值是underline
如果需要去除超鏈接的下劃線則需要將該樣式設置為none

letter-spacing可以指定字符間距
word-spacing可以設置單詞之間的距離,實際上就是設置詞與詞之間空格的大小

text-align用于設置文本的對齊方式
可選值:
1.left 默認值距芬,文本靠左對齊
2.right 文本靠右對齊
3.center 文本居中對齊
4.justify 兩端對齊
通過調(diào)整文本之間的空格的大小涝开,來達到一個兩端對齊的目的

text-indent用來設置首行縮進
這個值一般都會使用em作為單位
當給它指定一個正值時,會自動向右側縮進指定的像素
如果為它指定一個負值框仔,則會向左移動指定的像素
通過這種方式可以將一些不想顯示的文字隱藏起來

盒子的模型

使用width來設置盒子內(nèi)容區(qū)的寬度
使用height來設置盒子內(nèi)容區(qū)的高度
width和height只是設置的盒子內(nèi)容區(qū)的大小舀武,而不是盒子的整個大小,盒子可見框的大小由內(nèi)容區(qū)离斩,內(nèi)邊距和邊框共同決定

為元素設置邊框
要為一個元素設置邊框必須指定三個樣式
1.border-width:邊框的寬度
2.border-color:邊框顏色
3.border-style:邊框的樣式

使用border-width可以分別指定四個邊框的寬度
如果在border-width指定了四個值則四個值會分別設置給上银舱、右、下跛梗、左寻馏,按照順時針的方向設置的
如果指定三個值則三個值會分別設置給上、左右核偿、下
如果指定兩個值則兩個值會分別設置給上下诚欠、左右
如果指定一個值,則四邊全都是該值

除了border-width,CSS中還提供了四個border-xxx-width
xxx的值可能是top right bottom left 專門用來設置指定邊的寬度

設置邊框的顏色
和寬度一樣轰绵,color也提供四個方向的樣式粉寞,可以分別指定顏色

設置邊框的樣式
可選值:
1.none,默認值藏澳,沒有邊框
2.solid 實線
3.dotted 點狀邊框
4.dashed 虛線
5.double 雙線

style也可以分別指定四個邊的邊框樣式仁锯,規(guī)則和width一致,同時它也提供border-xxx-style四個樣式翔悠,來分別設置四個邊

邊框

設置邊框
大部分的瀏覽器中业崖,邊框的寬度和顏色都是有默認值,而邊框的樣式默認值都是none

border邊框的簡寫樣式蓄愁,通過它可以同時設置四個邊框的樣式双炕,寬度,顏色撮抓, 而且沒有任何的順序要求
border一指定就是同時指定四個邊不能分別指定border-top border-right border-bottom border-left妇斤,可以單獨設置四個邊的樣式,規(guī)則和border一樣丹拯,只不過它只對一個邊生效

內(nèi)邊距

內(nèi)邊距(padding)站超,指的是盒子的內(nèi)容區(qū)與盒子邊框之間的距離,一共有四個方向:padding-top乖酬、padding-right死相、padding-bottom、padding-left咬像,內(nèi)邊距會影響盒子的可見框的大小算撮,元素的背景會延伸到內(nèi)邊距

盒子的大小由內(nèi)容區(qū)、內(nèi)邊距和邊框共同決定
盒子可見框的寬度 = border-left-width + padding-left + width + padding-right + border-right-width
盒子可見框的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width

使用padding可以同時設置四個邊框的樣式县昂,規(guī)則和border-width一致

外邊距

外邊距指的是當前盒子與其他盒子之間的距離肮柜,他不會影響可見框的大小,而是會影響到盒子的位置
盒子有四個方向的外邊距:margin-top倒彰、margin-right审洞、margin-bottom、margin-left
由于頁面中的元素都是靠左靠上擺放的狸驳,所以注意當我們設置上和左外邊距時预明,會導致盒子自身的位置發(fā)生改變,而如果是設置右和下外邊距會改變其他盒子的位置
外邊距也可以指定為一個負值耙箍,如果外邊距設置的是負值撰糠,則元素會向反方向移動

margin還可以設置為auto,auto一般只設置給水平方向的margin
如果只指定辩昆,左外邊距或右外邊距的margin為auto則會將外邊距設置為最大值
垂直方向外邊距如果設置為auto阅酪,則外邊距默認就是0
如果將left和right同時設置為auto,則會將兩側的外邊距設置為相同的值,就可以使元素自動在父元素中居中
所以我們經(jīng)常將左右外邊距設置為auto术辐,以使子元素在父元素中水平居中
外邊距同樣可以使用簡寫屬性 margin砚尽,可以同時設置四個方向的外邊距,規(guī)則和padding一樣

外邊距的重疊

垂直外邊距的重疊
在網(wǎng)頁中相鄰的垂直方向的外邊距會發(fā)生外邊距的重疊
所謂的外邊距重疊指兄弟元素之間的相鄰外邊距會取最大值而不是取和
如果父子元素的垂直外邊距相鄰了,則子元素的外邊距會設置給父元素

瀏覽器默認樣式

瀏覽器為了在頁面中沒有樣式時辉词,也可以有一個比較好的顯示效果必孤,所以為很多的元素都設置了一些默認的margin和padding,而它的這些默認樣式瑞躺,正常情況下我們是不需要使用的敷搪。
所以我們往往在編寫樣式之前需要將瀏覽器中的默認的margin和padding統(tǒng)統(tǒng)的去掉

內(nèi)聯(lián)元素的盒模型

盒模型分成內(nèi)容區(qū)、內(nèi)邊距 幢哨、邊框 赡勘、外邊距四個部分,內(nèi)聯(lián)元素不能設置width和height

內(nèi)聯(lián)元素可以設置水平方向的內(nèi)邊距捞镰,內(nèi)聯(lián)元素可以設置垂直方向內(nèi)邊距闸与,但是不會影響頁面的布局,內(nèi)聯(lián)元素可以設置邊框岸售,但是垂直的邊框不會影響到頁面的布局践樱,
內(nèi)聯(lián)元素支持水平方向的外邊距,為右邊的元素設置一個左外邊距凸丸,水平方向的相鄰外邊距不會重疊映胁,而是求和,內(nèi)聯(lián)元素不支持垂直外邊距

display和visibility

將一個內(nèi)聯(lián)元素變成塊元素
通過display樣式可以修改元素的類型
可選值:
1.inline:可以將一個元素作為內(nèi)聯(lián)元素顯示
2.block: 可以將一個元素設置塊元素顯示
3.inline-block:將一個元素轉換為行內(nèi)塊元素甲雅,可以使一個元素既有行內(nèi)元素的特點又有塊元素的特點,既可以設置寬高坑填,又不會獨占一行
4.none: 不顯示元素抛人,并且元素不會在頁面中繼續(xù)占有位置
display: none:使用該方式隱藏的元素,不會在頁面中顯示脐瑰,并且不再占據(jù)頁面的位置

visibility可以用來設置元素的隱藏和顯示的狀態(tài)
可選值:
1.visible 默認值妖枚,元素默認會在頁面顯示
2.hidden 元素會隱藏不顯示
使用 visibility:hidden;隱藏的元素雖然不會在頁面中顯示,但是它的位置會依然保持

overflow

子元素默認是存在于父元素的內(nèi)容區(qū)中苍在,理論上講子元素的最大可以等于父元素內(nèi)容區(qū)大小绝页,如果子元素的大小超過了父元素的內(nèi)容區(qū),則超過的大小會在父元素以外的位置顯示寂恬。超出父元素的內(nèi)容续誉,我們稱為溢出的內(nèi)容。父元素默認是將溢出內(nèi)容初肉,在父元素外邊顯示酷鸦,通過overflow可以設置父元素如何處理溢出內(nèi)容:
可選值:
1.visible,默認值,不會對溢出內(nèi)容做處理臼隔,元素會在父元素以外的位置顯示
2.hidden, 溢出的內(nèi)容嘹裂,會被修剪,不會顯示
3.scroll, 會為父元素添加滾動條摔握,通過拖動滾動條來查看完整內(nèi)容寄狼。該屬性不論內(nèi)容是否溢出,都會添加水平和垂直雙方向的滾動條

  1. auto氨淌,會根據(jù)需求自動添加滾動條泊愧,需要水平就添加水平,需要垂直就添加垂直宁舰,都不需要就都不加
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末拼卵,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子蛮艰,更是在濱河造成了極大的恐慌腋腮,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,839評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件壤蚜,死亡現(xiàn)場離奇詭異即寡,居然都是意外死亡,警方通過查閱死者的電腦和手機袜刷,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評論 2 382
  • 文/潘曉璐 我一進店門聪富,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人著蟹,你說我怎么就攤上這事墩蔓。” “怎么了萧豆?”我有些...
    開封第一講書人閱讀 153,116評論 0 344
  • 文/不壞的土叔 我叫張陵奸披,是天一觀的道長。 經(jīng)常有香客問我涮雷,道長阵面,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,371評論 1 279
  • 正文 為了忘掉前任洪鸭,我火速辦了婚禮样刷,結果婚禮上,老公的妹妹穿的比我還像新娘览爵。我一直安慰自己置鼻,他們只是感情好,可當我...
    茶點故事閱讀 64,384評論 5 374
  • 文/花漫 我一把揭開白布拾枣。 她就那樣靜靜地躺著沃疮,像睡著了一般盒让。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上司蔬,一...
    開封第一講書人閱讀 49,111評論 1 285
  • 那天邑茄,我揣著相機與錄音,去河邊找鬼俊啼。 笑死肺缕,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的授帕。 我是一名探鬼主播同木,決...
    沈念sama閱讀 38,416評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼跛十!你這毒婦竟也來了彤路?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,053評論 0 259
  • 序言:老撾萬榮一對情侶失蹤芥映,失蹤者是張志新(化名)和其女友劉穎洲尊,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體奈偏,經(jīng)...
    沈念sama閱讀 43,558評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡坞嘀,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,007評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了惊来。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片丽涩。...
    茶點故事閱讀 38,117評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖裁蚁,靈堂內(nèi)的尸體忽然破棺而出矢渊,到底是詐尸還是另有隱情,我是刑警寧澤枉证,帶...
    沈念sama閱讀 33,756評論 4 324
  • 正文 年R本政府宣布昆淡,位于F島的核電站,受9級特大地震影響刽严,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜避凝,卻給世界環(huán)境...
    茶點故事閱讀 39,324評論 3 307
  • 文/蒙蒙 一舞萄、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧管削,春花似錦倒脓、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,315評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽甘晤。三九已至,卻和暖如春饲做,著一層夾襖步出監(jiān)牢的瞬間线婚,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,539評論 1 262
  • 我被黑心中介騙來泰國打工盆均, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留塞弊,地道東北人。 一個月前我還...
    沈念sama閱讀 45,578評論 2 355
  • 正文 我出身青樓泪姨,卻偏偏與公主長得像游沿,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子肮砾,可洞房花燭夜當晚...
    茶點故事閱讀 42,877評論 2 345

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案诀黍? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,728評論 1 92
  • 學會使用CSS選擇器熟記CSS樣式和外觀屬性熟練掌握CSS各種選擇器熟練掌握CSS各種選擇器熟練掌握CSS三種顯示...
    七彩小鹿閱讀 6,306評論 2 66
  • 一、CSS入門 1仗处、css選擇器 選擇器的作用是“用于確定(選定)要進行樣式設定的標簽(元素)”眯勾。 有若干種形式的...
    寵辱不驚丶歲月靜好閱讀 1,584評論 0 6
  • CSS 指層疊樣式表(Cascading Style Sheets),是一種用來為結構化文檔(如 HTML 文檔或...
    神齊閱讀 2,081評論 0 14
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color疆柔,font咒精,text-align,li...
    love2013閱讀 2,303評論 0 11