整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
高有無單位的問題
Div{font: 12px/1.5 '宋體'}
Div{font: 12px/1.5em '宋體'}
Div{font: 12px/150% '宋體;}<style>
.father{
width:200px;
height:30px;
background-color:pink;
font-size:16px;
line-height:2em;
}
.son{
font-size:20px; /* 繼承過來的行高為32px */
}
</style>
<div class="father">
<div class="son"> 我是文字 </div>
</div>
<style>
.father{
width:200px;
height:30px;
background-color:pink;
font-size:16px;
line-height:2; /* 設(shè)置文本所在行的行高。默認(rèn)為normal。 */
}
.son{
font-size:20px; /* 繼承過來的行高為40px 20*2px */
}
</style>
<div class="father">
<div class="son"> 我是文字 </div>
</div>行高 2em 和 2 不一樣的。
加em ：
先計(jì)算大小, 后繼承。
不跟單位：
先繼承, 后計(jì)算大小。
題一： 一般在我們的認(rèn)識里行內(nèi)元素是不支持寬高的，如果要讓其支持寬高，必須通過css顯示的轉(zhuǎn)換：display:block;可是所有的行內(nèi)元素都不支持寬高嗎？其實(shí)不然，來看下面的例子：
demo1
demo2
代碼運(yùn)行后我們發(fā)現(xiàn)input和img標(biāo)簽居然支持寬高，在我們的印象中input和img是行內(nèi)元素（inline），是不支持寬高的，但是它們卻有點(diǎn)特殊，原來它們是可替換元素！
html中的元素可分為替換元素和不可替換元素，替換元素本身是空元素，是由其屬性來決定的，比如這里的input，通過type屬性就可將其設(shè)置為文本框或單選按鈕，img也一樣，通過src元素可以來顯示不同的圖片，常見的有<img>、<input>、<textarea>、<select>，他們和一般的行內(nèi)元素有區(qū)別，行內(nèi)元素不支持寬高，而它們卻支持width和height屬性，如果沒設(shè)置寬高，就顯示默認(rèn)的大小，比如img，就顯示圖片原來的尺寸。
不可替換元素比較常見，也就是塊級元素(div,p,h1……)或一些行內(nèi)元素(span,strong,a……)，它們是直接顯示元素內(nèi)容，比如你什么時(shí)候見過div通過type來顯示不同的東西？顯然沒有。
問題二：行內(nèi)元素除了可替換元素外，比如span元素，一定要display:block;才可以支持寬高嗎？其實(shí)也不然。且看下面例子：
或者這樣設(shè)置也可以：
顯然我并沒有顯示的設(shè)置span元素為block，但是同樣能支持寬高，這里的原因是我css設(shè)置了span為position:absolute;或者float:left;讓其具有包裹性，從而支持寬高，所以在你設(shè)置元素浮動(dòng)或者絕對定位的情況下，設(shè)置元素display:block;就顯得多余了。
Ps:如果喜歡，那就關(guān)注我吧！
技術(shù)等級】初級
【承接文章】《CSS段落對齊方式，系統(tǒng)認(rèn)識塊級元素與內(nèi)聯(lián)元素，CSS前端進(jìn)階篇》
本文重點(diǎn)講解CSS技術(shù)中文本樣式的 line-height 屬性以及該屬性在單行垂直居中問題上的應(yīng)用。本文屬于前端開發(fā)的初級教程，適合于剛剛開始接觸CSS技術(shù)的學(xué)習(xí)者。
一、設(shè)置段落行距：
CSS技術(shù)利用 line-height 屬性來設(shè)置行距
顧名思義，行距就是段落中行與行之間的距離。調(diào)整行距可以讓段落看起來更加美觀。
該屬性的取值是帶有單位的數(shù)值。
例如：p{line-height:30px;}
上述代碼表明：<p></p>標(biāo)記對內(nèi)部文本的行距為30像素。
本身該屬性的使用是非常簡單的，但是有一個(gè)問題需要大家考慮：這個(gè)行距是以一行的哪個(gè)標(biāo)準(zhǔn)線來進(jìn)行度量的呢？答案是一行的“基線”。那么，什么是“基線”呢？
四線三格的第三線就是 “基線”
上面這張圖為我們解釋了什么是“基線”。基線就是英語本子上四線三格的第三線，是大部分英文字母在書寫時(shí)結(jié)束的那條線。
在CSS中，line-height 屬性的調(diào)整就是以這條線為標(biāo)準(zhǔn)線的。換句話說，當(dāng)line-height屬性設(shè)置為一定的數(shù)值時(shí)，段落中任意兩行的行距就是這兩行基線之間的距離。
二、行距屬性的應(yīng)用：
首先，大家看下面這個(gè)效果。頂部文本“歡迎關(guān)注小海前端”這幾個(gè)字在一個(gè)粉紅色的塊中顯示，并且是垂直方向居中的，這個(gè)應(yīng)該在頁面中如何設(shè)置呢？
如何實(shí)現(xiàn)塊中的垂直居中
這就需要用到 line-height 屬性的一個(gè)小技巧。
當(dāng)一行文本（注意：必須是一行）在一個(gè)<div></div>塊內(nèi)部顯示時(shí)，將該<div></div>塊的行高設(shè)置為這個(gè)塊本身的高度，就可以讓內(nèi)部的一行文本垂直居中了。
相應(yīng)的CSS代碼如下所示：
div{
width:1000px; height:30px;
background-color:#ff5857; //該屬性為背景顏色，主要是讓我們能夠看到塊本身
line-height:30px;
}
大家看上述代碼：line-height 屬性的取值和 height 屬性的取值是相同的，這樣內(nèi)部的一行文本就實(shí)現(xiàn)垂直居中了。
下一篇文章中，小海老師會(huì)重點(diǎn)為大家講解vertical-align屬性的使用。該屬性的使用要求較多，使用起來較為繁瑣，希望廣大前端愛好者千萬不要錯(cuò)過。
如果大家希望得到更加全面的關(guān)于HTML和CSS技術(shù)講解的內(nèi)容，可以私信我。我會(huì)免費(fèi)將小海老師自己編寫的HTML和CSS的PDF教材發(fā)給你，幫助你在前端開發(fā)的道路上闊步前行。
在頭條上也已經(jīng)寫了有十篇文章了。這些文章都是從前端開發(fā)的基礎(chǔ)開始一步一步講起的。我非常希望能有更多的前端開發(fā)初學(xué)者通過我寫的文章，逐步學(xué)到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學(xué)過程中的經(jīng)驗(yàn)，每寫一篇時(shí)我都盡量把握好措辭，用簡單易懂的語言描述，同時(shí)精心設(shè)計(jì)版面，讓版面更加豐富，激發(fā)閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費(fèi)小海老師很久的時(shí)間。
希望收藏了我寫的文章的你同時(shí)可以關(guān)注一下“小海前端”，因?yàn)檫@些文章都是連載的，并且是經(jīng)過我精心整理和系統(tǒng)的歸納過的。
關(guān)注“小海前端”，我會(huì)繼續(xù)為大家奉上更加深入的前端開發(fā)文章，也希望更多的初學(xué)者跟著學(xué)下去，我們共同將前端開發(fā)的路努力堅(jiān)持的走下去。
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
