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 鏈接上百新。(親測是這樣的)