CSS基礎

問答

  • line-height有什么作用?
  • 如何去查CSS熟悉的兼容性?比如inline-block哪些瀏覽器支持?
  • a 標簽的href, title, target 是什么? title 和 alt有什么區別?如何新窗口打開鏈接?
  • display: none , visibility: hidden, opacity:0 有什么作用?有什么區別?
  • 如何去除 a 鏈接的默認樣式?直接在 a 鏈接父容器添加顏色,能否基礎到當前 a 鏈接上?

1. line-height有什么作用?

line-height
: 類似Word的行間距,設置字體所占的行高度,當line-height:2;的時候,這行文字所占的高度是這行文字本來高度的兩倍,文字在行中居中,上下用空白占據。如下就是line-height:2的時候邊框被上下撐開半個字體行高。

line-height可以方便的在一個較小的塊中進行垂直居中。比如用div設置一個按鈕,
使用text-align可以設置水平居中,將line-height=height就可以使單行文字在這個塊內垂直居中。

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

可以使用caniuse網站,
inline-block可以在IE8、IE9中使用,不兼容IE8之前的版本。一般查看兼容性的時候,重點關注的是IE的兼容,因為IE的升級進展相對其他瀏覽器比較緩慢。

3. a 標簽的href,title,target 是什么?title 和 alt有什么區別?如何新窗口打開連接?

  • a 標簽是用來編寫超鏈接的,類似這樣的功能

    • href:設定超鏈接的目標地址
    • title: 當鼠標移動到超鏈接上的提示性說明
    • targe: 設定打開超鏈接的方式

title的作用是提示說明, alt是altermate text的縮寫,作用是在無法顯示的圖像里的替換文字
用來解釋這個圖片本來的樣子。

通過定義target來實現新窗口打開連接:
target有4個保留目標,引用自w3cschool

_blank
瀏覽器總在一個新打開、未命名的窗口中載入目標文檔。
_self
這個目標的值對所有沒有指定目標的 <a> 標簽是默認目標,它使得目標文檔載入并顯示在相同的框架或者窗口中作為源文檔。這個目標是多余且不必要的,除非和文檔標題 <base> 標簽中的 target 屬性一起使用。
_parent
這個目標使得文檔載入父窗口或者包含來超鏈接引用的框架的框架集。如果這個引用是在窗口或者在頂級框架中,那么它與目標 _self 等效。
_top
這個目標使得文檔載入包含這個超鏈接的窗口,用 _top 目標將會清除所有被包含的框架并將文檔載入整個瀏覽器窗口。

4. display: none , visibility: hidden, opacity:0 有什么作用?有什么區別?

display: none
: display 屬性規定元素應該生成的框的類型,display: none 的這個元素將不會被顯示。

visibility: hidden
: visibility 屬性規定元素是否可見。visibility: hidden是讓元素不可見。

opacity:0
: opacity是設置元素的透明度,opacity:0是指透明度為0

區別:display:none屬性會不展示且脫離了文檔流,而visibility:hidden和opacity:0仍在文檔流之中,只是看不見,所在的位置都在;display:none和visibility;hidden自身所綁定的事件將不會被觸發,而opacity:0除了透明度為0,其他功能屬性事件都與正常元素沒有區別。

5. 如何去除 a 鏈接的默認樣式?直接在 a 鏈接父容器添加顏色,能否基礎到當前 a 鏈接上?

<style>
    div a{
        text-decoration: none;
    }
</style>

不能,只能通過指定a標簽的形式,定義a的樣式。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,563評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,694評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 178,672評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,965評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,690評論 6 413
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,019評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,013評論 3 449
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,188評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,718評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,438評論 3 360
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,667評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,149評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,845評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,252評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,590評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,384評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,635評論 2 380

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,784評論 1 92
  • 顏色: 1.color: 設置對象的文本顏色。無默認值。2.opacity:<number>默認值:1。設置對象...
    nothing_c閱讀 429評論 0 0
  • line-height有什么作用? 設置文本行距,就是設置一行文字上下的高度。 如何去查CSS熟悉的兼容性?比如i...
    羞澀的澀閱讀 324評論 0 0
  • CSS基礎 本文包括CSS基礎知識選擇器(重要?。。。├^承、特殊性、層疊、重要性CSS格式化排版單位和值盒模型浮動...
    廖少少閱讀 3,111評論 0 40
  • 參考網站:Selenium系列 以下內容到百度界面之后輸入搜索內容hello!之后返回百度頁面底部備案信息
    抬頭挺胸才算活著閱讀 208評論 0 0