HTML 2-行高、a標簽

MobService 發布于2019-08-02 10:28 / 2669人閱讀

摘要：行高是指上下文本行的基線間的垂直距離，即圖中兩條紅線間垂直距離。等于包裹文字的元素本身的高度時，文字垂直居中。僅在屬性存在時使用。但標簽字體大小屬性受父元素影響。

line-height

line-height設置文本的行高，行高即文本行基線之前的距離,行高減去字體大小就等于行間距從上到下四條線分別是頂線、中線、基線、底線，很像學英語字母時的四線三格，vertical-align屬性中有top、middle、baseline、bottom，就是和這四條線相關。注意,基線不是最下面的線，最下面的是底線。行高是指上下文本行的基線間的垂直距離，即圖中兩條紅線間垂直距離。行距是指一行底線到下一行頂線的垂直距離，即第一行粉線和第二行綠線間的垂直距離。如下圖：

line-height:number 設置數字，此數字會與當前的字體尺寸相乘來設置行間距。
line-height:px固定值設置固定的行間距。
line-height:% 基于當前字體尺寸的百分比行間距。
line-height:inherit 規定應該從父元素繼承line-height 屬性的值。(任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。)
line-height等于包裹文字的元素本身的高度時，文字垂直居中。

關于CSS屬性的兼容性

CSS屬性的兼容性可在 caniuse 中搜索屬性名

a標簽的href, title, target 屬性

href屬性：創建指向另一個文檔的鏈接,為name時創建文檔內的錨點。
titel屬性：鼠標懸停在鏈接時顯示額外信息。
titel與alt的區別：使用alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明，它只能用在img、area和input元素中，是用來替代圖像而不是提供額外說明文字。title屬性是提供非本質的額外信息，比如在圖像可見時對圖像的描述(鼠標放在圖片時即會顯示)。target屬性：規定在何處打開目標 URL。僅在 href 屬性存在時使用。target屬性值等于_blank時，鏈接在新窗口中打開：
優酷

a標簽設置偽類按L-V-H-A順序，偽類設置在a標簽上所有瀏覽器都支持，設置在其他div元素上只有IE8以上瀏覽器支持
a:link {color:#FF0000;} / 未訪問的鏈接 /
a:visited {color:#00FF00;} / 已訪問的鏈接 /
a:hover {color:#FF00FF;} / 鼠標劃過鏈接 /
a:active {color:#0000FF;} / 已選中的鏈接 /

a標簽設置錨點：
文字 href為#時表示，鏈接的是當前頁面
設置錨點用id

段落

href為#ccc時，鏈接的是對應的錨點。

display: none , visibility: hidden, opacity:0 的作用和區別

display:block/inline/inline-block/none/table-cell/fix
display:none; 元素被設置成不顯示，實際渲染時該元素脫離文檔流，但dom樹中該元素仍然存在
visibility:hidden; 元素被設置成隱藏，實際渲染時該元素仍然在文檔流里面（仍然占空間），dom樹中也存在，相當于元素變透明了。
opacity:0;使元素透明度為0就好像消失一樣，但是所占據的空間還在，不會改變頁面布局

a鏈接的默認樣式設置

a標簽的顏色不會繼承父元素的顏色樣式，即a標簽自帶的顏色屬性不被父元素顏色屬性影響。但a標簽字體大小屬性受父元素影響。
a標簽去掉下劃線，增加顏色

a{
    text-decoration: none; //去除a標簽默認的下劃線樣式
    color: red;
    transition:color 0.3s;  //a標簽的顏色有變化時，使用漸變效果，效果變化時間0.3s
}

云服務器 GPU云服務器 html行高單位字體行高 html html 設置行高 html行高詳解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52374.html

HTML 2-行高、a標簽

摘要：行高是指上下文本行的基線間的垂直距離，即圖中兩條紅線間垂直距離。等于包裹文字的元素本身的高度時，文字垂直居中。僅在屬性存在時使用。但標簽字體大小屬性受父元素影響。 line-height line-height設置文本的行高，行高即文本行基線之前的距離,行高減去字體大小就等于行間距從上到下四條線分別是頂線、中線、基線、底線，很像學英語字母時的四線三格，vertical-align屬性中...

lx1036 2019-08-29 15:27 評論0 收藏0
360前端星計劃學習-HTML + CSS

摘要：設計思想兼容已有內容避免不必要的復雜性解決現實問題優雅降級尊重事實標準變化新增語義化標簽去除純表示性的標簽拖拽離線語法標簽不區分大小寫推薦小寫空標簽可以不閉合屬性不必引號。遇到這種情況時，會生成匿名塊級盒來包含行級盒。瀏覽器瀏覽器渲染引擎 JavaScript引擎 IE Trident JScript Edge EdgeHTML Chakra Safari We...

lpjustdoit 2019-08-29 12:27 評論0 收藏0
360前端星計劃學習-HTML + CSS

摘要：設計思想兼容已有內容避免不必要的復雜性解決現實問題優雅降級尊重事實標準變化新增語義化標簽去除純表示性的標簽拖拽離線語法標簽不區分大小寫推薦小寫空標簽可以不閉合屬性不必引號。遇到這種情況時，會生成匿名塊級盒來包含行級盒。瀏覽器瀏覽器渲染引擎 JavaScript引擎 IE Trident JScript Edge EdgeHTML Chakra Safari We...

mumumu 2019-08-01 16:41 評論0 收藏0
HTML 郵件兼容問題與解決方案

摘要：因為微軟一向地特立獨行，使得成為了最難啃的骨頭。這就意味著郵件中幾乎只有這幾個元素，盡量避免使用或是其他標簽。 HTML 郵件內容雖然也是 HTML，但是和我們在網頁上使用的 HTML 不同，因為安全原因，各大郵箱服務商及郵件客戶端都會對郵件內容進行一定程度上的處理，不會按照你寫的原本 HTML 展示。 showImg(https://segmentfault.com/img/bVLl...

Cheriselalala 2019-08-29 12:18 評論0 收藏0
HTML 郵件兼容問題與解決方案

摘要：因為微軟一向地特立獨行，使得成為了最難啃的骨頭。這就意味著郵件中幾乎只有這幾個元素，盡量避免使用或是其他標簽。 HTML 郵件內容雖然也是 HTML，但是和我們在網頁上使用的 HTML 不同，因為安全原因，各大郵箱服務商及郵件客戶端都會對郵件內容進行一定程度上的處理，不會按照你寫的原本 HTML 展示。 showImg(https://segmentfault.com/img/bVLl...

RdouTyping 2019-08-01 16:35 評論0 收藏0