問答
- 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的樣式。