HTML基礎知識

1.line-height有什么作用井佑?

答: line-height 屬性設置行間的距離(行高)绰播,不能使用負值仗颈。該屬性會影響行框的布局。在應用到一個塊級元素時诸尽,它定義了該元素中基線之間的最小距離而不是最大距離原杂。line-height 與 font-size 的計算值之差(行距)分為兩半,分別加到一個文本行內(nèi)容的頂部和底部您机〈┮蓿可以包含這些內(nèi)容的最小框就是行框。
可能的值:

描述
normal 默認
number 設置數(shù)字际看,此數(shù)字會與當前的字體尺寸相乘來設置行間距咸产。
length 設置固定的行間距。
% 基于當前字體尺寸的百分比行間距仲闽。
inherit 規(guī)定應該從父元素繼承 line-height 屬性的值脑溢。

作用:

  • 單行文字的垂直居中對齊:把line-height值設置為height一樣大小的值可以實現(xiàn)單行文字的垂直居中;
  • 多行文字的垂直居中:對于高度固定的div赖欣,里面文字單行或多行顯示屑彻,字體大小有大有小的情況,設置font-size為0畏鼓,line-height為所需要的高度酱酬,display屬性為inline-block壶谒;
  • 使用行高代替高度避免haslayout:在某些情形下云矫,line-height可以和height互換,因為實現(xiàn)的效果一樣汗菜。都能撐開一個高度让禀,然而這兩個css屬性有一個較隱蔽的差異挑社,就是使用height會使標簽haslayout,而使用line-height則不會巡揍。
    參考文檔:css行高line-height的一些深入理解及應用痛阻、css行高line-height的用法

2.如何去查CSS屬性的兼容性?比如inline-block哪些瀏覽器支持腮敌?

答:可以用 caniuse.com來查css屬性的兼容性阱当。
各大瀏覽器對inline-block屬性的支持如下圖:

QQ圖片20160803141152.png

3.a 標簽的href, title, target 是什么? title 和 alt有什么區(qū)別糜工?如何新窗口打開鏈接?

  • ** href** 屬性用于指定超鏈接目標的 URL弊添。href 屬性的值可以是任何有效文檔的相對或絕對 URL,包括片段標識符和 JavaScript 代碼段捌木。如果用戶選擇了 a 標簽中的內(nèi)容油坝,那么瀏覽器會嘗試檢索并顯示 href 屬性指定的 URL 所表示的文檔,或者執(zhí)行 JavaScript 表達式刨裆、方法和函數(shù)的列表澈圈。
  • title屬性是鼠標懸停在超鏈接上的時候,顯示該超鏈接的文字注釋帆啃。
  • target 屬性規(guī)定在何處打開鏈接文檔瞬女。其值與描述如下:
描述
_blank 在新窗口中打開被鏈接文檔。
_self 默認努潘。在相同的框架中打開被鏈接文檔拆魏。
_parent 在父框架集中打開被鏈接文檔。
_top 在整個窗口中打開被鏈接文檔慈俯。
framename 在指定的框架中打開被鏈接文檔渤刃。
  • title 和 alt的區(qū)別: alt和title都是提示性語言屬性。title屬性是鼠標滑過時顯示的文字提示贴膘,alt屬性是圖片在無法正確顯示的時候起到文本替代的作用卖子;title可以用在除了base,basefont刑峡,head洋闽,html,meta突梦,param诫舅,script和title之外的所有標簽,alt屬性只能用在img宫患、area和input元素中刊懈。
  • 如何新窗口打開鏈接:
<a href="#" target="_blank">在新窗口代開鏈接</a>

跳轉(zhuǎn)到錨點

1.id定位,這樣的定位可針對任何標簽定位
<a href="#here">錨點</a>
<p id="here"></p>
2.使用name定位,name屬性只能針對a標簽來定位虚汛,而對div等其他標簽就不能起到定位作用
<a href="#f2"></a>
<br/><br/><br/>
<a name="f2">111</href>

跳轉(zhuǎn)到另一個頁面的錨點:

1.在test1.html創(chuàng)建錨 <a name="test">錨</a> 
2.在test2.html設置好鏈接 <a href="test1.html#test">連接到另外頁面的錨的超鏈接</a>

4.display: none, visibility: hidden, opacity:0有什么作用匾浪?有什么區(qū)別?

答:三者的主要作用是隱藏元素卷哩。
區(qū)別:

  • display: none
    1)蛋辈、瀏覽器不會生成屬性為display: none;的元素;
    2)将谊、display: none;不占據(jù)空間冷溶,所以動態(tài)改變此屬性時會引起重排;
    3)尊浓、display: none;不會被子類繼承挂洛;
    4)、display屬性眠砾,transition對它無效虏劲。
  • visibility: hidden
    1)、元素會被隱藏褒颈,但是不會消失柒巫,依然占據(jù)空間;
    2)谷丸、visibility: hidden會被子類繼承堡掏,子類也可以通過設置visibility: visible;來顯示;
    3)刨疼、visibility: hidden;不會觸發(fā)該元素已經(jīng)綁定的事件泉唁;
    4)、visibility: hidden;動態(tài)修改此屬性會引起重繪揩慕;
    5)亭畜、visibility,transition對它無效。
  • opacity:0
    1)迎卤、opacity=0只是透明度為100%,元素隱藏拴鸵,依然占據(jù)空間;
    2)蜗搔、opacity=0會被子元素繼承,且劲藐,子元素不能通過opacity=1,進行反隱藏樟凄。
    3)聘芜、opacity=0的元素依然能觸發(fā)已經(jīng)綁定的事件;
    4)缝龄、opacity,transition對她有效汰现。
    參考文檔

5.如何去除 a 鏈接的默認樣式挂谍?直接在 a 鏈接父容器添加顏色,能否繼承到當前 a 鏈接上服鹅?

答:可以用以下代碼去除a 鏈接的默認樣式:

text-decoration: none;
color: #333;/*字體顏色可自定義*/

直接在 a 鏈接父容器添加字體顏色,不能繼承到當前 a 鏈接上百新。(親測是這樣的)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末企软,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子饭望,更是在濱河造成了極大的恐慌仗哨,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,110評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件铅辞,死亡現(xiàn)場離奇詭異厌漂,居然都是意外死亡,警方通過查閱死者的電腦和手機斟珊,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,443評論 3 395
  • 文/潘曉璐 我一進店門苇倡,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人囤踩,你說我怎么就攤上這事旨椒。” “怎么了堵漱?”我有些...
    開封第一講書人閱讀 165,474評論 0 356
  • 文/不壞的土叔 我叫張陵综慎,是天一觀的道長。 經(jīng)常有香客問我勤庐,道長示惊,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,881評論 1 295
  • 正文 為了忘掉前任愉镰,我火速辦了婚禮米罚,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘丈探。我一直安慰自己阔拳,他們只是感情好,可當我...
    茶點故事閱讀 67,902評論 6 392
  • 文/花漫 我一把揭開白布类嗤。 她就那樣靜靜地躺著糊肠,像睡著了一般。 火紅的嫁衣襯著肌膚如雪遗锣。 梳的紋絲不亂的頭發(fā)上货裹,一...
    開封第一講書人閱讀 51,698評論 1 305
  • 那天,我揣著相機與錄音精偿,去河邊找鬼弧圆。 笑死赋兵,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的搔预。 我是一名探鬼主播霹期,決...
    沈念sama閱讀 40,418評論 3 419
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼拯田!你這毒婦竟也來了历造?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,332評論 0 276
  • 序言:老撾萬榮一對情侶失蹤船庇,失蹤者是張志新(化名)和其女友劉穎吭产,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體鸭轮,經(jīng)...
    沈念sama閱讀 45,796評論 1 316
  • 正文 獨居荒郊野嶺守林人離奇死亡臣淤,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,968評論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了窃爷。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片邑蒋。...
    茶點故事閱讀 40,110評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖按厘,靈堂內(nèi)的尸體忽然破棺而出寺董,到底是詐尸還是另有隱情,我是刑警寧澤刻剥,帶...
    沈念sama閱讀 35,792評論 5 346
  • 正文 年R本政府宣布遮咖,位于F島的核電站,受9級特大地震影響造虏,放射性物質(zhì)發(fā)生泄漏御吞。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,455評論 3 331
  • 文/蒙蒙 一漓藕、第九天 我趴在偏房一處隱蔽的房頂上張望陶珠。 院中可真熱鬧,春花似錦享钞、人聲如沸揍诽。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,003評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽暑脆。三九已至,卻和暖如春狐肢,著一層夾襖步出監(jiān)牢的瞬間添吗,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,130評論 1 272
  • 我被黑心中介騙來泰國打工份名, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留碟联,地道東北人妓美。 一個月前我還...
    沈念sama閱讀 48,348評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像鲤孵,于是被迫代替她去往敵國和親壶栋。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,047評論 2 355

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

  • 一普监、line-height有什么作用? line-height屬性是指文本行基線之間的距離贵试,而不是字體的大小,它確...
    dengpan閱讀 319評論 0 0
  • 問答 1鹰椒、line-height有什么作用? line-height 屬性設置行間的距離(行高)锡移。定義和用法注釋:...
    饑人谷_dudu閱讀 304評論 0 0
  • 1.line-height有什么作用? 答:line-height的主要作用是調(diào)整文本行高呕童,也相當于行間距的設置漆际。...
    呦泥酷閱讀 282評論 0 0
  • line-height有什么作用? 1、對于文章類文字上下排間隔一般我們對對象設置設置line-height行高屬...
    無目的閱讀 200評論 0 0
  • 一夺饲、line-height有什么作用? line-height行高奸汇,調(diào)整文字間的距離,可以在div使文字垂直居中往声,...
    崔敏嫣閱讀 211評論 0 0