2019-03-25 字體你雌、盒子模型

1.字體

通過(guò)font-family可以指定標(biāo)簽中文字使用 的字體岭辣。

例如:p{font-family:Arial}

2.字體

通過(guò)font-family可以同時(shí)指定多個(gè)字體

例如:p{font-family:Arial,Helvetica,sans-serif}

字體分類

serif(襯線字體)

sans-serif(非襯線字體)

monospace(等寬字體)

cursive(草書字體)

fantasy(虛幻字體)

斜體和粗體

font-style用來(lái)指定文本的斜體。

指定斜體:font-style:italic

指定非斜體:font-style:normal

font-weight用來(lái)指定文本的粗體加勤。

指定粗體:font-weight:bold

指定非粗體:font-weight:normal

小型大寫字母

font-variant屬性可以將字母類型設(shè)置為小 型大寫胎食。在該樣式中扰才,字母看起來(lái)像是稍微縮小了尺寸的大寫字母。(font-variant:small-caps)

字體屬性的簡(jiǎn)寫

font可以一次性同時(shí)設(shè)置多個(gè)字體的樣式厕怜。

語(yǔ)法:font:加粗 斜體 小型大寫 大小/行高 字體衩匣。(這里前邊幾個(gè)加粗、斜體和小型大寫的順序無(wú)所謂粥航,也可以不寫琅捏,但是大小和字體 必須寫且必須寫到后兩個(gè))

行間距

line-height用于設(shè)置行高,行高越大則行 間距越大递雀。

行間距 = line-height – font-size

大寫化

text-transform樣式用于將元素中的字母全都變成大寫柄延。

大寫:text-transform:uppercase

小寫:text-tansform:lowercase

首字母大寫:text-transform:capitalize

正常:text-transform:none

文本的修飾

text-decoration屬性,用來(lái)給文本添加各種修飾缀程。通過(guò)它可以為文本的上方搜吧、下方或者中間添加線條市俊。

可選值:underline、overline滤奈、line-through秕衙、none

字母間距和單詞間距

letter-spacing用來(lái)設(shè)置字符之間的間距。

word-spacing用來(lái)設(shè)置單詞之間的間距僵刮。

這兩個(gè)屬性都可以直接指定一個(gè)長(zhǎng)度或百分?jǐn)?shù)作為值。正數(shù)代表的是增加距離鹦牛,而 負(fù)數(shù)代表減少距離搞糕。

對(duì)齊文本

text-align用于設(shè)置文本的對(duì)齊方式。

可選值:left:左對(duì)齊曼追,right:右對(duì)齊窍仰,justify:兩邊對(duì)齊,center:居中對(duì)齊

首行縮進(jìn)

text-indent用來(lái)設(shè)置首行縮進(jìn)礼殊。

該樣式需要制定一個(gè)長(zhǎng)度驹吮,并且只對(duì)第一行生效。

盒子模型

一個(gè)盒子我們會(huì)分成幾個(gè)部分:
內(nèi)容區(qū)(content)

內(nèi)邊距(padding)

邊框(border)

外邊距(margin)

內(nèi)容區(qū)

內(nèi)容區(qū):內(nèi)容區(qū)指的是盒子中放置內(nèi)容的區(qū)域晶伦,也就是元素中的文本內(nèi)容碟狞,子元素都是存在于內(nèi)容區(qū)中的。

通過(guò)width和height兩個(gè)屬性可以設(shè)置內(nèi)容區(qū)的大小婚陪。(通過(guò)width和height兩個(gè)屬性可以設(shè)置內(nèi)容區(qū)的大 小族沃。)

內(nèi)邊距: 內(nèi)邊距指的就是元素內(nèi)容區(qū)與邊框以內(nèi) 的空間。(?默認(rèn)情況下width和height不包含padding的大忻诓巍)

例如:padding:10px? 20px? 30px? 40px(這樣會(huì)設(shè)置元素的上脆淹、右、下沽一、左四個(gè)方向的內(nèi)邊距)

padding:10px20px 30px;分別指定上盖溺、左右、下四個(gè)方向的內(nèi)邊距

padding:10px 20px;分別指定上下铣缠、左右四個(gè)方向的內(nèi)邊距

padding:10px;同時(shí)指定上左右下四個(gè)方向的內(nèi)邊距)

邊框: 是元素可見框的最外部 烘嘱。

可以使用border屬性來(lái)設(shè)置盒子的邊框:border:1pxred solid;(上邊的樣式分別指定了邊框的寬度、顏色和樣式)

邊框的樣式

none(沒有邊框)dotted(點(diǎn)線)dashed(虛線)solid(實(shí)線)double(雙線)groove(槽線)ridge(脊線)inset(凹邊)

outset(凸邊)

外邊框:是元素邊框與周圍元素相距的空間 攘残。(margin)

當(dāng)將左右外邊距設(shè)置為auto時(shí)拙友,瀏覽器會(huì)將左右外邊距設(shè)置為相等,所以這行代碼margin:0 auto可以使元素居中歼郭。

display

我們不能為行內(nèi)元素設(shè)置width遗契、height、? margin-top和margin-bottom病曾。

我們可以通過(guò)修改display來(lái)修改元素的性質(zhì)牍蜂。

可選值:block:設(shè)置元素為塊元素? ? ?inline:設(shè)置元素為行內(nèi)元素

inline-block:設(shè)置元素為行內(nèi)塊元素? ?none:隱藏元素(元素將在頁(yè)面中完全消失)

visibility: 屬性主要用于元素是否可見漾根。

和display不同,使用visibility隱藏一個(gè)元素鲫竞,隱藏后其在文檔中所占的位置會(huì)依然 保持,不會(huì)被其他元素覆蓋辐怕。

可選值:visible:可見的? ? ? ?hidden:隱藏的

overflow:可以通過(guò)overflow來(lái)控制內(nèi)容溢出的情況。

可選值:visible:默認(rèn)值? ? ?scroll:添加滾動(dòng)條?

auto:根據(jù)需要添加滾動(dòng)條? ? ?hidden:隱藏超出盒子的內(nèi)容

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末从绘,一起剝皮案震驚了整個(gè)濱河市寄疏,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌僵井,老刑警劉巖陕截,帶你破解...
    沈念sama閱讀 216,496評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異批什,居然都是意外死亡农曲,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門驻债,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)乳规,“玉大人,你說(shuō)我怎么就攤上這事合呐∧旱模” “怎么了?”我有些...
    開封第一講書人閱讀 162,632評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵淌实,是天一觀的道長(zhǎng)青扔。 經(jīng)常有香客問(wèn)我,道長(zhǎng)翩伪,這世上最難降的妖魔是什么微猖? 我笑而不...
    開封第一講書人閱讀 58,180評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮缘屹,結(jié)果婚禮上凛剥,老公的妹妹穿的比我還像新娘。我一直安慰自己轻姿,他們只是感情好犁珠,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,198評(píng)論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著互亮,像睡著了一般犁享。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上豹休,一...
    開封第一講書人閱讀 51,165評(píng)論 1 299
  • 那天炊昆,我揣著相機(jī)與錄音,去河邊找鬼。 笑死凤巨,一個(gè)胖子當(dāng)著我的面吹牛视乐,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播敢茁,決...
    沈念sama閱讀 40,052評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼佑淀,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了彰檬?” 一聲冷哼從身側(cè)響起伸刃,我...
    開封第一講書人閱讀 38,910評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎逢倍,沒想到半個(gè)月后奕枝,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,324評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡瓶堕,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,542評(píng)論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了症歇。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片郎笆。...
    茶點(diǎn)故事閱讀 39,711評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖忘晤,靈堂內(nèi)的尸體忽然破棺而出宛蚓,到底是詐尸還是另有隱情,我是刑警寧澤设塔,帶...
    沈念sama閱讀 35,424評(píng)論 5 343
  • 正文 年R本政府宣布凄吏,位于F島的核電站,受9級(jí)特大地震影響闰蛔,放射性物質(zhì)發(fā)生泄漏痕钢。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,017評(píng)論 3 326
  • 文/蒙蒙 一序六、第九天 我趴在偏房一處隱蔽的房頂上張望任连。 院中可真熱鬧,春花似錦例诀、人聲如沸随抠。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)拱她。三九已至,卻和暖如春扔罪,著一層夾襖步出監(jiān)牢的瞬間秉沼,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留氧猬,地道東北人背犯。 一個(gè)月前我還...
    沈念sama閱讀 47,722評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像盅抚,于是被迫代替她去往敵國(guó)和親漠魏。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,611評(píng)論 2 353

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

  • 問(wèn)答題47 /72 常見瀏覽器兼容性問(wèn)題與解決方案妄均? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,748評(píng)論 1 92
  • 今天學(xué)習(xí)的知識(shí)點(diǎn): 1柱锹、/*設(shè)置字體顏色,使用color來(lái)設(shè)置文字的顏色*/ color: red; /*設(shè)置文...
    您的名稱已被使用閱讀 196評(píng)論 0 0
  • 字體(一):通過(guò)font-family可以指定標(biāo)簽中文字使用的字體 例如: p{font-family:Arial...
    呂若凡閱讀 398評(píng)論 0 0
  • 1.塊級(jí)元素和行內(nèi)元素 塊級(jí)(block-level)元素丰包;行內(nèi)(內(nèi)聯(lián)禁熏、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,002評(píng)論 1 4
  • 學(xué)習(xí)CSS的最佳網(wǎng)站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,050評(píng)論 0 1