CSS標簽中顯示模式的示例分析

發(fā)布時間：2021-03-20 10:16:45 來源：億速云閱讀：106 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細講解有關(guān)CSS標簽中顯示模式的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

標簽的顯示模式（重點）

div和span標簽

1.樣式完全相同，標簽不同，顯示的結(jié)果完全不同

2.每個div會獨占一行，多個span會并列一排

1.塊元素

特點：寬度默認是100%，高度默認是0，可以設(shè)置寬度和高度，會繼承父級的寬度，換行顯示—div ul li p h

示意圖

CSS標簽中顯示模式的示例分析

總結(jié)：塊元素可以添加寬高的屬性，獨占一行

2.行元素

特點：寬高默認都是0，不能設(shè)置寬和高，一行顯示----span b i u a

示意圖

CSS標簽中顯示模式的示例分析

總結(jié)：對寬高不敏感，不能獨占一行

3.行內(nèi)的塊元素

特點：只能設(shè)置寬和高，不能換行顯示—img input

示意圖

CSS標簽中顯示模式的示例分析

多學一招：從大的方面來說，其實行內(nèi)的塊元素也屬于行內(nèi)元素，對行內(nèi)元素的某些操作，同樣可以操作行內(nèi)的塊元素，例：text-align:center;line-height:1000px;

4.模式轉(zhuǎn)換

語法：display:值

取值：block轉(zhuǎn)成塊元素，inline轉(zhuǎn)成行元素，inline-block轉(zhuǎn)成行內(nèi)的塊元素，none隱藏元素

多學一招：使用該屬性隱藏元素后，在頁面中將不占據(jù)空間

小案例：簡易導航的制作

案例示意圖

CSS標簽中顯示模式的示例分析

代碼

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		a{
            display:inline-block;
            width:100px;
            height:50px;
            background:#f00;
            text-align:center;
            text-decoration:none;
            color:#fff;
            line-height:50px;
        }
		body{text-align:center;}
	</style>
</head>
<body>

<a href="">導航</a>
<a href="">導航</a>
<a href="">導航</a>
<a href="">導航</a>
<a href="">導航</a>
<a href="">導航</a>

</body>
</html>

關(guān)于“CSS標簽中顯示模式的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

向AI問一下細節(jié)

CSS標簽中顯示模式的示例分析

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽