CSS基礎(chǔ)

問答

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

1. line-height有什么作用?

line-height
: 類似Word的行間距,設(shè)置字體所占的行高度,當(dāng)line-height:2;的時候,這行文字所占的高度是這行文字本來高度的兩倍,文字在行中居中,上下用空白占據(jù)。如下就是line-height:2的時候邊框被上下?lián)伍_半個字體行高。

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

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

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

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

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

    • href:設(shè)定超鏈接的目標(biāo)地址
    • title: 當(dāng)鼠標(biāo)移動到超鏈接上的提示性說明
    • targe: 設(shè)定打開超鏈接的方式

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

通過定義target來實現(xiàn)新窗口打開連接:
target有4個保留目標(biāo),引用自w3cschool

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

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

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

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

opacity:0
: opacity是設(shè)置元素的透明度,opacity:0是指透明度為0

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

5. 如何去除 a 鏈接的默認(rèn)樣式?直接在 a 鏈接父容器添加顏色,能否基礎(chǔ)到當(dāng)前 a 鏈接上?

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

不能,只能通過指定a標(biāo)簽的形式,定義a的樣式。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

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

友情鏈接更多精彩內(nèi)容