欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

如何在css中設置行高

這篇文章將為大家詳細講解有關如何在css中設置行高，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

站在用戶的角度思考問題，與客戶深入溝通，找到北林網站設計與北林網站推廣的解決方案，憑借多年的經驗，讓設計與互聯(lián)網技術結合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網站建設、網站建設、企業(yè)官網、英文網站、手機端網站、網站推廣、國際域名空間、雅安服務器托管、企業(yè)郵箱。業(yè)務覆蓋北林地區(qū)。

在css中，可以使用line-height屬性來設置行高，只需要給指定元素添加“l(fā)ine-height:行高值;”樣式即可，例“l(fā)ine-height: 10px;”。line-height屬性可以設置行間的距離（行高），不允許使用負值。

所謂行高是指文本行基線間的垂直距離。要想理解這句話首先得了解幾個基本知識：

頂線、中線、基線、底線

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <style type="text/css" >
            span
            {
                padding:0px;
                line-height:1.5;
            }
        </style>
    </head>
    <body>
        <div class="test">
            <div style="background-color:#ccc;">
                <span style="font-size:3em;background-color:#999;">中文English</span>
                <span style="font-size:3em;background-color:#999;">English中文</span>
            </div>
        </div>
    </body>
<html>

如何在css中設置行高

從上到下四條線分別是頂線、中線、基線、底線，很像才學英語字母時的四線三格，我們知道vertical-align屬性中有top、middle、baseline、bottom，就是和這四條線相關。

尤其記得基線不是最下面的線，最下面的是底線。

行高、行距與半行距

行高是指上下文本行的基線間的垂直距離，即圖中兩條紅線間垂直距離。

行距是指一行底線到下一行頂線的垂直距離，即第一行粉線和第二行綠線間的垂直距離。

半行距是行距的一半，即區(qū)域3垂直距離/2，區(qū)域1，2，3，4的距離之和為行高，而區(qū)域1，2，4距離之和為字體size，所以半行距也可以這么算：（行高-字體size）/2

如何在css中設置行高

內容區(qū)、行內框、行框

內容區(qū)：底線和頂線包裹的區(qū)域，即下圖深灰色背景區(qū)域。

如何在css中設置行高

行內框，每個行內元素會生成一個行內框，行內框是一個瀏覽器渲染模型中的一個概念，無法顯示出來，在沒有其他因素影響的時候（padding等），行內框等于內容區(qū)域，而設定行高時行內框高度不變，半行距【（行高-字體size）/2】分別增加/減少到內容區(qū)域的上下兩邊（深藍色區(qū)域）

行框（line box），行框是指本行的一個虛擬的矩形框，是瀏覽器渲染模式中的一個概念，并沒有實際顯示。行框高度等于本行內所有元素中行內框最大的值（以行高值最大的行內框為基準，其他行內框采用自己的對齊方式向基準對齊，最終計算行框的高度），當有多行內容時，每行都會有自己的行框。

<div style="background-color:#ccc;">
                <span style="font-size:1em;background-color:#666;">中文English</span>
                <span style="font-size:3em;background-color:#999;">中文English</span>
                <span style="font-size:3em;background-color:#999;">English中文</span>
                <span style="font-size:1em;background-color:#666;">English中文</span>
            </div>

如何在css中設置行高

（學習視頻分享：css視頻教程）

line-height

基本概念搞明白了我們就可以說說本文的主角line-height屬性了。

定義：line-height 屬性設置行間的距離（行高），不能使用負值。該屬性會影響行框的布局。在應用到一個塊級元素時，它定義了該元素中基線之間的最小距離而不是最大距離。line-height 與 font-size 的計算值之差(行距)分為兩半，分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。

可能的值

值說明
normal默認,設置合理的行間距。
number設置數(shù)字，此數(shù)字會與當前的字體尺寸相乘來設置行間距。相當于倍數(shù)
length設置固定的行間距。
%基于當前字體尺寸的百分比行間距。
inherit規(guī)定應該從父元素繼承 line-height 屬性的值。

示例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style type="text/css">
			p.small {
				line-height: 90%
			}
			
			p.big {
				line-height: 200%
			}
		</style>
	</head>

	<body>

		<p>
			這是擁有標準行高的段落。 在大多數(shù)瀏覽器中默認行高大約是 110% 到 120%。 這是擁有標準行高的段落。 這是擁有標準行高的段落。 這是擁有標準行高的段落。 這是擁有標準行高的段落。 這是擁有標準行高的段落。
		</p>

		<p class="small">
			這個段落擁有更小的行高。 這個段落擁有更小的行高。 這個段落擁有更小的行高。 這個段落擁有更小的行高。 這個段落擁有更小的行高。 這個段落擁有更小的行高。 這個段落擁有更小的行高。
		</p>

		<p class="big">
			這個段落擁有更大的行高。 這個段落擁有更大的行高。 這個段落擁有更大的行高。 這個段落擁有更大的行高。 這個段落擁有更大的行高。 這個段落擁有更大的行高。 這個段落擁有更大的行高。
		</p>

	</body>

</html>

關于如何在css中設置行高就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

網頁題目：如何在css中設置行高
文章鏈接：http://www.chinadenli.net/article0/gpcsoo.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供商城網站、移動網站建設、網站設計公司、面包屑導航、軟件開發(fā)、網站排名

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

手機網站建設