1.css中的link標簽的意思

點擊藍字關注我們前言

2.css中l(wèi)ink標簽

點擊藍字關注我們在學習CSS期間，不少同學感覺基本能理解line-height和vertical-align的用法，但是遇到一些具體問題的時候，又發(fā)現(xiàn)搞不太明白了，這主要是對一些相云南同志網關概念理解得還不夠透徹，今天我們就通過

3.css中l(wèi)ink標簽屬性rel

本文一步步幫大家徹底搞懂這2個概念。一、相關概念要理解line-height和vertical-align這2個概念，我們同時也要掌握一些相關的概念，下面我們就給大家一一介紹。1.1 內聯(lián)盒子

4.css link 用法

塊狀元素的每一行，就是由內聯(lián)盒子組成的，內聯(lián)盒子分為具名內聯(lián)盒子和匿名內聯(lián)盒子* 如果被行內元素包裹，屬于具名內聯(lián)盒子* 如果只是光禿禿的文字沒有被行內元素包裹，屬于匿名內聯(lián)盒子我們來具體舉個例子：div {

5.link標簽中哪個屬性可以引入css樣式?

width: 400px; font-size: 30p云南同志網x; background-color: gold;}span { background-color: yellowgreen;

6.html link css

}

頁面展示效果如下：

7.link標簽導入css會導致阻塞嗎

黃色背景是一個p標簽，它的一行包含了：①光禿禿的文字“今天的”；②一個行內元素“月亮”；③光禿禿的文字“好美?。　逼渲孝俸廷劬蛯儆谀涿麅嚷?lián)盒子，②屬于具名內聯(lián)盒子這里我們再對比一下2種內聯(lián)盒子的高度：。

8.css link import

上例中，我們知道div的高度height是由匿名內聯(lián)盒子和具名內聯(lián)盒子的高度撐起的行高決定的，顯示為40px：

9.link標簽st云南同志網ylesheet屬性

現(xiàn)在我們在瀏覽器端把span標簽的文字大小改成0，那么此時div完全是由具名內聯(lián)盒子撐起的行高，我們看到div高度同樣是40px。

10.html中l(wèi)ink標簽的作用

因此我們可以得出結論，不論是具名內聯(lián)盒子還是匿名內聯(lián)盒子，它們的空間高度是由字體大小決定的，兩者沒有區(qū)別所以當我們需要查看內聯(lián)盒子效果時，可以用span標簽來表示，因為其可以設置背景色會更直觀1.2 行框盒子。

塊級元素的每一行就是一個行框盒子，每個行框盒子又是由一個一個內聯(lián)盒子組成的。行框上邊界要包裹住所有內聯(lián)盒子的上邊界，行框的下邊界要包裹住所有內聯(lián)盒子的下邊界。

在瀏覽器中，我們用光標選中一行的效果，即下圖里的云南同志網整個藍色區(qū)域就是一個行框盒子的區(qū)域（注意：此種情況只適用于自然撐開的高度，設置行高拉開的距離，藍色區(qū)域會大于行款盒子高度）。

1.3 基線

基線是內聯(lián)盒子中小寫字母的x的下邊緣的一條線，為了垂直方向對齊用的。默認情況下，行框盒子內的所有元素都是相對父元素在垂直方向上基線對齊。舉例如下：

上面三個”xx“，其中第一個①是直接寫在父元素div標簽里的，②③是分別寫在2個span標簽里，默認情況下span標簽里的內容在垂直方向上會與①里的x的底邊對齊這里要注意，即使標簽里寫的不是小x，也有小x這樣的一個空間對齊概念存在。

為了幫助大家更好理解，上例中，我們把div里寫的“xx”去掉了，顯示效果如下：

我們可以云南同志網看到，兩個span標簽垂直方向的位置依然沒有變化。1.4 幽靈節(jié)點

在HTML5文檔聲明中，內聯(lián)元素的所有解析和渲染就像每行行框盒子前面有一個空白節(jié)點，這個節(jié)點是透明的，沒有任何寬度，也沒有辦法用腳本獲得（幽靈節(jié)點）但是它只在使用html5文檔聲明的時候才存在我們寫下如下代碼：。

body {margin: 0;background-color: gold; }#box {width: 1200px;padding: 050px;margin-top

: 20px;font-size: 100px;background-color: black; }span {background-color: y云南同志網ellowgreen; }img{width:

100px; }中文aljx字符頁面的展示效果如下，我們看到圖片底邊和span標簽的文字x底邊存在對齊現(xiàn)象，因此，拉高了行高，圖片底邊和div底邊沒有重合。

現(xiàn)在我們在瀏覽器端設置span標簽的字體大小為0，效果如下：

我們看到，div依然和上面顯示span標簽時撐開了相同的高度，這是由于div自己的字體大小是100px，不論其中是不是直接寫了文字，div里的圖片也會有基線對齊的情況，不過圖片是以其底邊和父元素里的x底邊對齊。

只有當我們把div的字體設置為0時，才能解決這個問題：

二、line-height和vertical-align2.1 line-云南同志網height

上面我們學習了行框盒子，line-height就是來設置每行之間的距離首先大家要明確，因為行框盒子是存在于塊狀元素當中，所以這個行高屬性line-height也是給塊元素設置的注意：line-height具有繼承性，其后代的塊狀元素都會繼承該屬性。

一、格式：line-height:valuevalue取值：（1）normal，默認值不設置此屬性的時，是通過瀏覽器自動去計算（2）length，長度使用指定長度作為行高值單位px，em等（3）number，數(shù)值。

此時表示設置為當前字體大小的number倍的值大多數(shù)情況下，這是設置line-height的推薦方法，不會在繼承時產生不確定的云南同志網結果（4）%，百分比該值是相對于當前字體尺寸的百分比來設置間距（5）inherit。

從父元素繼承l(wèi)ine-height屬性的值我們知道line-height本身就具有繼承性，為何還有有這個繼承的屬性值呢？這個屬性值是針對如input標簽這種有自己樣式的標簽使用的，如input標簽的line-height值默認是normal，不會從父元素繼承，而希望該值和父元素的行高一致就需要設置為該屬性值。

舉例如下：這是沒有設置該屬性時的默認效果： 

這是line-heigh設置為inherit的效果：

二、應用舉例：（1）在沒有設置塊狀元素高度的時候，其高度是由line-height決定的①line-height云南同志網值不為0時，代碼如下：#box1 {width: 200px;line-height。

: 50px;background-color: gold;border: 1px solid black; }看看div高度此時的div高度為50px，如下圖：

②line-height值為0時，代碼如下：#box1 {width: 200px;line-height: 0;background-color: gold;border: 1px solid black;

}看看div高度此時div高度為0，如下圖：

（2）line-height可以讓內聯(lián)元素近似居中（適用于當line-heigh大于內聯(lián)元素自身高度云南同志網的情況）我們來看以下代碼：body {background-color: gold;   }

#box {width: 1200px;padding: 050px;font-size: 80px;line-height: 150px;background-color: black;   }span

{background-color: yellowgreen;   }中文aljx顯示效果如下：

我們可以看到①②的高度是一致的，所以此時span標簽位置在div中是正好居中的，但是由于CSS字體在設計的時候不會正好占據內聯(lián)盒子內容區(qū)的1/2處，一般來說會有一些下沉，所以文字顯示效果是近似居中的2.2 v云南同志網ertical-align

上面講到的幽靈節(jié)點，我們知道了一個默認基線對齊的現(xiàn)象，那我們要如何消除幽靈節(jié)點的影響呢，設置vertical-align屬性，來調整內聯(lián)盒子在一行中垂直怎么對齊，就是一個解決方案注意，這個屬性是設置給需要修改對齊方式的行內/行內塊元素的。

格式：vertical-align:valuevalue取值：*baseline（基線），默認值基線是內聯(lián)盒子中小寫字母的x的下邊緣的一條線與和父元素的x下邊緣線對齊* middle，元素的垂直中心點和父元素的x的1/2處對齊。

* bottom，內聯(lián)盒子的底部和行框的底部對齊* top，內聯(lián)盒子的頂部和行框的頂部對齊說明：（1）設置為云南同志網baseline或middle時，都是與父元素里的子文本節(jié)點x位置有關，即使沒有寫x也存在這樣一個空間概念。

，可以理解為以下書寫：

?（2）設置為top或bottom時，只與行框盒子的上下邊界有關，與父元素中的x不再有關舉例如下：body {background-color: gold; }#box {width

: 1200px;padding: 050px;font-size: 100px;color: white;backgro云南同志網und-color: black; }span {vertical-align

: bottom;color: black;font-size: 50px;background-color: yellowgreen; } 中文aljx<

span>中文aljx顯示效果如下：

我們已知行框盒子上、下邊界要包裹住所有內聯(lián)盒子的上、下邊界，此時白色字體的匿名內聯(lián)盒子高度撐起行框盒子的上下最大高度，設置span標簽以bottom垂直對齊，其底邊就與行框盒子的底邊在一條線上2.3 line-height和vertical-align的具體應用。

（1）設置圖片垂直居中div {width: 500px;heig云南同志網ht: 500px;border: 1px solid black;。

text-align: center;/* 1.設置line-heihgt=height */line-height: 500px; }img {/* 2.設置圖片居中 */vertical-align

: middle; }

顯示效果如下：

如果單獨設置line-height和height高度一致并不能使圖片垂直居中，因為圖片底邊會和父元素里的x底邊對齊，所以要要實現(xiàn)圖片垂直居中，這2個屬性需要配合使用（2）設置多行文本垂直居中。

div {width: 300px;height: 300px;/* 1.設置line-heigh云南同志網t=height */line-height: 300px;border

: 1px solid black; }span {/* 2. 去設置span讓span變成行內塊狀元素，這樣就能將span當成一個整體來對待 */display: inline-block;

border: 1px solid green;/* 3.line-height具有繼承性需要將其繼承下來的line-height去掉 */line-height: normal;/* 4.讓span和父元素的x的1/2處對齊 */

vertical-align: middle; }

顯示效果如下：

上面我們有舉例說明單獨設置line-height可以實現(xiàn)單行的文本垂直居中，但是這種多行文本的垂直居中，我們就需要配合vertical-align: middle來實現(xiàn)垂直居中效果總結在具體的運用中，要實現(xiàn)單行文本的垂直居中，設置。

line-heihgt與height的值相同就可以實現(xiàn)但如果要實現(xiàn)圖片或多行文本的垂直居中，我們就需要將line-height與vertical-align一起共同使用才能實現(xiàn)居中效果ENDNO.1往期回顧

字節(jié)二面：你對Phoenix二級索引有了解嗎？JavaScript迭代器與生成器之迭代器百度云南同志網一面：你來談談JS中的淺拷貝與深拷貝JS中常用的6種數(shù)組遍歷方法：forEach、map、filter、reduce、some、every

分享，點贊，在看，都在這兒,點我不香嗎？