HTML3

一.line-height有什么作用?

line-height是用于設(shè)置行間的距離的屬性，也就是行高，而行高就是指文字的大小與行距的和。當(dāng)需要設(shè)置垂直居中的時候，經(jīng)常使line-height的值等于height的值。那么line-height行高是怎么產(chǎn)生了高度呢？在inline box模型中，有個line boxes，它的工作就是包裹每行文字。一個文字一個line boxes。line-height的特性都是line boxes表現(xiàn)出來的。下面具體看一下line-height的屬性。

  • 用絕對長度px表示
body{
  font-size: 15px;
  line-height: 20px;  
}

這個line-height的長度值20px會被后代元素繼承下來，而忽略本身font-size的值，line-height不會隨著font-size的值作相應(yīng)的改變。

  • 用百分比表示
body{
  font-size: 15px;
  line-height: 40%;  
}

其中，計算方法就是用font-size的大?。?5px）乘以line-height的百分比（40%）。這個計算出來的值會被層疊下去的元素繼承，所有繼承元素會使用這個計算出來的值，而忽略本身font-size的值，line-height不會隨著相應(yīng)的font-size作相應(yīng)比例的縮放。

  • 用normal表示
body{
  font-size: 15px;
  line-height: normal;  
}

桌面瀏覽器normal的值約為1.2，當(dāng)然這也取決于元素的 font-family。所以算出來的大小就是用font-size的大?。?5px）乘以1.2。所有繼承下來的元素不會忽略font-size的值，而使用相應(yīng)font-size的大小來乘以1.2。line-height會隨著font-size作相應(yīng)的縮放。

  • 用純數(shù)字表示
body{
  font-size: 15px;
  line-height: 1.2;
}

所有繼承下來的元素不會忽略font-size的值，line-height將使用相應(yīng)font-size的大小來乘以1.2。line-height會隨著相應(yīng)的font-size作相應(yīng)比例的縮放。
一般來說推薦使用無單位數(shù)值給line-height賦值。


效果對比

下面講一下line-height的一個重要用途-文本居中。

  • 單行文本

  • 不設(shè)置height
    如果不設(shè)置height，line-height可以設(shè)置為任意數(shù)字。


    單行文本垂直居中

  • 設(shè)置height
    將line-height值與height的高度值設(shè)置成一致就能達到效果（這里一般是在同塊元素里面使用）。


    單行文本垂直居中

  • 多行文字
    因為今天學(xué)習(xí)了如何讓圖片垂直居中，然后我想如果要讓文字達到一樣的效果，方法應(yīng)該是一樣的，也就是把文字來當(dāng)作圖片來處理。嘗試了一下，真的達到了預(yù)期的效果。這里面最重要的步驟就是把這些文字賦予表格元素，應(yīng)用表格的特性，然后再用vertical-align: middle，達到垂直居中的效果。


    多行文字垂直居中

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

要審查CSS的屬性可以使用Can I use進行查詢。

Can I use

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

  • a標簽的屬性值
  • href屬性
    它指示的是鏈接的目標，href 屬性的值可以是任何有效文檔的相對或絕對 URL。如果選擇了a標簽的內(nèi)容，瀏覽器會嘗試檢索并顯示 href 屬性指定的 URL 所表示的文檔。一般來說a標簽一定要有href屬性，這樣鼠標點擊的時候才會有一個手的形狀表示是一個鏈接。
  • title屬性
    title屬性作用是鼠標放置到a標簽的時候，顯示的提示信息。
  • target屬性
    target屬性是表示瀏覽器在何處打開一個新的鏈接，是打開一個新的窗口還是覆蓋本頁面。
  • title和alt屬性的區(qū)別
  • title屬性
    title是為該屬性的元素提供建議性的信息，它可以用在除了base，basefont，head，html，meta，param，script和title之外的所有標簽。當(dāng)鼠標放置在選定元素時，大部分可視化瀏覽器會顯示title的提示信息。title屬性用途之一就是為鏈接添加描述性文字，特別是當(dāng)連接本身并不是十分清楚的表達了鏈接的目的的時候。還有一個用處就是為圖像提供額外的說明信息，比如日期等信息。
  • alt屬性
    alt屬性只能用在img、area和input元素中，它是為了給那些不能看到文檔中圖像的瀏覽者提供文字說明信息，在圖片的位置顯示內(nèi)容。

所以說如果要使用額外或者非本質(zhì)的說明信息就要使用title屬性。

  • 在新窗口中打開鏈接
    要想在新窗口中打開鏈接，讓target賦值為_blank就行。
<a href="#" target="_blank">我是鏈接</a>
  • 跳轉(zhuǎn)到錨點
    在id上面加一個名字就能跳轉(zhuǎn)到錨點。
<div class="div2"></div>
    <p id="here">點擊直接跳轉(zhuǎn)到這里</p>

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

他們的作用都是讓元素消失，但在渲染效果上有一定的區(qū)別。

  • display:none 表示讓元素消失，并且脫離文檔流，下面的元素將會上移，占據(jù)其位置；
  • visibility：hidden 也是讓元素消失，但是并沒有脫離文檔流，渲染的時候為空白，它所在的位置仍然存在，下面的元素不會上移；

opacity：0 和visibility的作用相似，表示透明度為0，占據(jù)的位置仍然保留。

具體的對比效果，可以參考代碼

五.如何去除 a 鏈接的默認樣式？直接在 a 鏈接父容器添加顏色，能否繼承到當(dāng)前 a 鏈接上？

  • 去除a鏈接的默認樣式
    a鏈接默認樣式下面會有一條下劃線，如圖：


    a鏈接默認樣式

    要去除它的默認樣式，則使用：

a{
text-decoration: none;
}
去除默認樣式之后

去除默認樣式之后我們可以用它用來制作一個按鈕：


按鈕

  • 直接在 a 鏈接父容器添加顏色，不能繼承到當(dāng)前 a 鏈接上。除了顏色不繼承，其他的都可以繼承，比如字體大小。要實現(xiàn)對a鏈接顏色起作用，必須選中a。


    實現(xiàn)對a鏈接添加顏色

代碼題

1.寫個div，邊框為1px, #ccc, 寬度為200px, 高度為80px, 內(nèi)有一行文字這里是饑人谷，文字字體大小14px, 顏色#f0f, 文字在div里垂直水平居中。
代碼1
2.對于如下html代碼

  • 給.dialog加個邊框 1px, #ccc
  • 給header設(shè)置高度40px, 左對齊，左內(nèi)邊距10px, 文字16px, 顏色#f00,下邊框#ccc 1px。
  • 給content 設(shè)置高度100px,內(nèi)部 a鏈接去掉下劃線，顏色 blue, 鼠標放置上去后顏色變?yōu)?red
  • 給footer設(shè)置高度50px，內(nèi)部 btn設(shè)置 邊框1px #ccc, 圓角3px, 上下內(nèi)邊距4px,左右內(nèi)邊距3px，顯示為inline-block, footer哪居中顯示;
<div class="dialog"> 
<div class="header"> 
    <h3>我是標題</h3> 
<a class="close" title="關(guān)閉" href="#">X</a> 
</div> 
<div class="content"> 
        <h3>歡迎來到 <a >饑人谷</a></h3>                 
        <p> 在這個大家庭你能快樂的學(xué)到更多前端技能</p> 
</div> 
<div class="footer">
     <a class="btn btn-cancel" href="#">取消</a>
     <a class="btn btn-confirm" href="#">確認</a>
   </div>
 </div>

代碼2
3.寫一個如下表格

表格

記住描述整個表格的屬性標記放在<table>里，描述單元格的屬性標記放在<tr><td>里面。哎，寫代碼的時候我老是會搞不清在哪里描述。還需要注意的問題就是細心啊，一開始的時候表格老是結(jié)果不對，原來是tr沒有把td和th包裹。下次一定要仔細。
代碼3
4.下面代碼有什么作用？手抄一遍如下代碼，改變?yōu)g覽器寬度看看效果。

<!DOCTYPE html>
<html>
<head> 
  <meta charset="utf-8"> 
  <style> 
    .wrap{ width: 900px; margin: 0 auto; } 
  </style>
</head>
<body> 
  <div id="header"> 
    <div class="wrap">這里是標題</div> 
  </div> 
  <div id="content"> 
    <div class="wrap">這里是內(nèi)容</div>
  </div>
<div id="footer">
   <div class="wrap">這里是 footer</div>
</div>
</body>
</html>

將段落設(shè)置成外邊距上下為0，左右自動調(diào)整。將wrap類的寬度固定，無論瀏覽器寬度多大都能居中顯示。

代碼的github鏈接L6

最后編輯于 ：
?著作權(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)瀏覽器兼容問題一：不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 14,093評論 1贊 92
  • 參考1.line-height12.line-height23.line-height34.line-height...
    鴻鵠飛天閱讀 1,025評論 0贊 0
  • 1. line-height有什么作用? line-height指定一行的行高,使用后會使文本在上下居中。 lin...
    小木子2016閱讀 445評論 0贊 0
  • 1.line-height有什么作用？ 所謂的行高，是指文本行基線之前的距離。在理解這句話之前先了解幾個基本知識：...
    饑人谷_任磊閱讀 552評論 0贊 1
  • 課程目標 掌握基本標簽和基本樣式的用法 學(xué)習(xí)建議 閱讀資料都是老師的原創(chuàng)文章、示例代碼、或者是精心挑選的文章。是除...
    饑人谷_江君閱讀 674評論 0贊 0

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