CSS 單位理解

CSS 一共有四種引入方式

  • 外聯(lián)式
    1.link
    2.@import url
  • 嵌入式
    style 標(biāo)簽一般放在head部分
    <style type="text/css">
    p {
    color:red;
    }
    </style>
  • 行內(nèi)式
    <p style="color:red;">Hello,World</p>

外聯(lián)式兩種方式的區(qū)別

  • 1.link屬于XHTML標(biāo)簽 @import屬于CSS2.1以后引進(jìn)來的啸澡。
  • 2.當(dāng)一個(gè)頁面被加載的時(shí)候(就是被瀏覽者瀏覽的時(shí)候),link引用的CSS會(huì)同時(shí)被加載氮帐,而@import引用的CSS會(huì)等到頁面全部被下載完再被加載嗅虏。
  • 3.@import可以在css中再次引入其他樣式表,比如可以創(chuàng)建一個(gè)主樣式表上沐,在主樣式表中再引入其他的樣式表皮服。

文件路徑../main.css、./main.css参咙、main.css有什么區(qū)別

    1. ../main.css 是指的是main.css上一層文件夾的路徑龄广。
    1. ./main.css 與 main.css 沒有什么本質(zhì)區(qū)別,都是指的是和該文件同一層的路徑蕴侧。

console.log是做什么用的

  • 用于調(diào)試JS的代碼择同,相對(duì)于alert(),可以看見JS中對(duì)象的內(nèi)容。

text-align有幾個(gè)值净宵,分別有什么作用

text-align這個(gè)屬性主要控制文本對(duì)齊方式
text-align 有三個(gè)值:left right center justify inherit
left : 文本向左對(duì)齊
center : 文本居中對(duì)齊
right:文本向右對(duì)齊
justify:文本兩端對(duì)齊
inherit:從父元素哪里繼承對(duì)齊方式

px奠衔、em、rem分別是什么塘娶?有什么區(qū)別?如何使用

px:相對(duì)長度單位痊夭。像素px是相對(duì)于顯示器屏幕分辨率而言的刁岸。
em:相對(duì)長度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸她我。
rem:rem是新增的一個(gè)相對(duì)單位(root em虹曙,根em)迫横,這個(gè)單位引起了廣泛關(guān)注。這個(gè)單位與em有什么區(qū)別呢酝碳?區(qū)別在于使用rem為元素設(shè)定字體大小時(shí)矾踱,仍然是相對(duì)大小,但相對(duì)的只是HTML根元素疏哗。

  • rem和 em單位是由瀏覽器基于你的設(shè)計(jì)中的字體大小計(jì)算得到的像素值呛讲。

  • em單位基于使用他們的元素的字體大小。

  • rem 單位基于 html 元素的字體大小返奉。

  • em 單位可能受任何繼承的父元素字體大小影響贝搁。

  • rem 單位可以從瀏覽器字體設(shè)置中繼承字體大小。

  • 使用 em單位應(yīng)根據(jù)組件的字體大小而不是根元素的字體大小芽偏。

  • 在不需要使用em單位雷逆,并且需要根據(jù)瀏覽器的字體大小設(shè)置縮放的情況下使用rem。

  • 使用rem單位污尉,除非你確定你需要 em單位膀哲,包括對(duì)字體大小。

  • 媒體查詢中使用 rem單位

  • 不要在多列布局中使用 em或 rem,改用%被碗。

  • 不要使用 em或 rem某宪,如果縮放會(huì)不可避免地導(dǎo)致要打破布局元素。

參考了 rem em 徹底研究 徹底弄懂css中單位px和em,rem的區(qū)別

Chrome 工具

如下代碼蛮放,設(shè)置 p為幾 rem缩抡,讓h1和p的字體大小相等?

設(shè)置P為6

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市包颁,隨后出現(xiàn)的幾起案子饵隙,更是在濱河造成了極大的恐慌,老刑警劉巖故硅,帶你破解...
    沈念sama閱讀 221,406評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件腐泻,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡岳悟,警方通過查閱死者的電腦和手機(jī)佃迄,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,395評(píng)論 3 398
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來贵少,“玉大人呵俏,你說我怎么就攤上這事√显睿” “怎么了普碎?”我有些...
    開封第一講書人閱讀 167,815評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長录平。 經(jīng)常有香客問我麻车,道長缀皱,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,537評(píng)論 1 296
  • 正文 為了忘掉前任动猬,我火速辦了婚禮啤斗,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘赁咙。我一直安慰自己钮莲,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,536評(píng)論 6 397
  • 文/花漫 我一把揭開白布序目。 她就那樣靜靜地躺著臂痕,像睡著了一般。 火紅的嫁衣襯著肌膚如雪猿涨。 梳的紋絲不亂的頭發(fā)上握童,一...
    開封第一講書人閱讀 52,184評(píng)論 1 308
  • 那天,我揣著相機(jī)與錄音叛赚,去河邊找鬼澡绩。 笑死,一個(gè)胖子當(dāng)著我的面吹牛俺附,可吹牛的內(nèi)容都是我干的肥卡。 我是一名探鬼主播,決...
    沈念sama閱讀 40,776評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼事镣,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼步鉴!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起璃哟,我...
    開封第一講書人閱讀 39,668評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤氛琢,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后随闪,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體阳似,經(jīng)...
    沈念sama閱讀 46,212評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,299評(píng)論 3 340
  • 正文 我和宋清朗相戀三年铐伴,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了撮奏。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,438評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡当宴,死狀恐怖畜吊,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情户矢,我是刑警寧澤玲献,帶...
    沈念sama閱讀 36,128評(píng)論 5 349
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響青自,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜驱证,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,807評(píng)論 3 333
  • 文/蒙蒙 一延窜、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧抹锄,春花似錦逆瑞、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,279評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至吻育,卻和暖如春念秧,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背布疼。 一陣腳步聲響...
    開封第一講書人閱讀 33,395評(píng)論 1 272
  • 我被黑心中介騙來泰國打工摊趾, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人游两。 一個(gè)月前我還...
    沈念sama閱讀 48,827評(píng)論 3 376
  • 正文 我出身青樓砾层,卻偏偏與公主長得像,于是被迫代替她去往敵國和親贱案。 傳聞我的和親對(duì)象是個(gè)殘疾皇子肛炮,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,446評(píng)論 2 359

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,758評(píng)論 1 92
  • css樣式引入 樣式的三種引入方式1.** 外部樣式表 ** 當(dāng)樣式需要應(yīng)用于很多頁面時(shí) `rel=關(guān)系 st...
    jrg_memo閱讀 1,489評(píng)論 0 1
  • 其實(shí)CSS中的長度單位一共有8個(gè)宝踪,分別是px侨糟,em,pt肴沫,ex粟害,pc,in颤芬,mm悲幅,cm。(ex:相對(duì)長度單位站蝠。相對(duì)...
    iam夢(mèng)的的閱讀 497評(píng)論 0 0
  • 我們很容易無法擺脫的使用我們所熟悉的CSS技術(shù)汰具,當(dāng)新的問題出現(xiàn),這樣會(huì)使我們處于不利的地位菱魔。 隨著Web繼續(xù)的發(fā)展...
    yo_yo_閱讀 348評(píng)論 0 0
  • 剛剛步入初中的我留荔,一心只愛玩,使得學(xué)習(xí)一落千丈,那天期中考試聚蝶,我又想起了小學(xué)的那點(diǎn)事杰妓。 小學(xué)一年級(jí),...
    空氣瞄閱讀 251評(píng)論 0 1