溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

css中行標(biāo)簽的含義是什么

發(fā)布時間：2023-02-02 14:30:56 來源：億速云 閱讀：135 作者：iii 欄目：web開發(fā)

本篇內(nèi)容介紹了“css中行標(biāo)簽的含義是什么”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

css中行是指行內(nèi)標(biāo)簽，行內(nèi)標(biāo)簽不占有獨立的區(qū)域，僅僅靠自身的字體大小和圖像尺寸來支撐結(jié)構(gòu)，一般不可以設(shè)置寬度、高度、對齊等屬性，常用于控制頁面中文本的樣式；常見行內(nèi)標(biāo)簽有a、strong、b、em、i、del、s、ins、u、span標(biāo)簽，其中span標(biāo)簽最典型的行內(nèi)元素。

一、概述

1、塊級標(biāo)簽

概念 每個塊元素通常都會獨自占據(jù)一整行或多整行，可以對其設(shè)置寬度、高度、對齊等屬性，常用于網(wǎng)頁布局和網(wǎng)頁結(jié)構(gòu)的搭建。

1)塊級標(biāo)簽特點

1、每個塊級元素都從新的一行開始，并且其后的元素也另起一行(獨自占據(jù)一整行或多整行)
2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。
3、寬度缺省是它的容器的100%，除非設(shè)定一個寬度。
4、它可以容納行內(nèi)標(biāo)簽和其他塊級標(biāo)簽。

注意

只有文字才能組成段落因此 p 里面不能放塊級元素，同理還有這些標(biāo)簽h2,h3,h4,h5,h6,h7,dt，他們都是文字類塊級標(biāo)簽，里面不能放其他塊級元素。

2)常見塊級標(biāo)簽

div、h2~h7、p、hr、form、ul、dl、ol、li  其中div標(biāo)簽是最典型的塊元素。

2、行內(nèi)標(biāo)簽

概念  行內(nèi)標(biāo)簽不占有獨立的區(qū)域，僅僅靠自身的字體大小和圖像尺寸來支撐結(jié)構(gòu)，一般不可以設(shè)置寬度、高度、對齊等屬性，常用于控制頁面中文本的樣式。

1)行內(nèi)標(biāo)簽特點

1、和相鄰行內(nèi)標(biāo)簽在一行上
2、高，行高及外邊距和內(nèi)邊距不可改變；
3、默認寬度就是它本身內(nèi)容的寬度。
4、設(shè)置margin只有 左右margin 有效，上下無效。設(shè)置padding只有 左右padding 有效，上下則無效。
5、行內(nèi)元素只能容納文本或則其他行內(nèi)元素。（a特殊: a標(biāo)簽可以放div塊級標(biāo)簽，同時a標(biāo)簽里不能再放a標(biāo)簽）

2)常見行內(nèi)標(biāo)簽

a、strong、b、em、i、del、s、ins、u、span 其中span標(biāo)簽最典型的行內(nèi)元素。

3、行內(nèi)塊元素

1)行內(nèi)塊元素特點

1、和相鄰行內(nèi)元素（行內(nèi)塊）在一行上,但是之間會有空白縫隙。
2、默認寬度就是它本身內(nèi)容的寬度。
3、高度，行高、外邊距以及內(nèi)邊距都可以控制。

2)常見塊級標(biāo)簽

img、input、td

4、三只之間的轉(zhuǎn)換

它們之間可以通過樣式轉(zhuǎn)換

塊轉(zhuǎn)行內(nèi)：display:inline;
行內(nèi)轉(zhuǎn)塊：display:block;
塊、行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊： display: inline-block;

二、測試

這里做一個綜合小測試：完整代碼

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>塊級標(biāo)簽、行內(nèi)標(biāo)簽、行內(nèi)塊標(biāo)簽</title>
	<style>
  
    div,span,input { /*為了方便查看，這里給這些元素加邊框*/
    	border-style: solid; 
    	border-width: 1px;
    	border-color: red;
    }

	div {          
		width: 100px; /* 對塊級標(biāo)簽、行內(nèi)標(biāo)簽、行內(nèi)塊標(biāo)簽都設(shè)置寬和高*/
		height: 100px; 
	}
	span {
		width: 100px;
		height: 100px;
	}
	input {
		width: 100px;
		height: 100px;
	}
	</style>
</head>
<body>
	<div>div</div>
	<div>===div===</div>
	<span>span</span>
	<span>===span===</span>
	<input type="text" value="input">
	<input type="text" value="===input===">
</body>
</html>

運行結(jié)果

css中行標(biāo)簽的含義是什么

通過這個運行結(jié)果可以很明顯的得出以下結(jié)論

css中行標(biāo)簽的含義是什么

“css中行標(biāo)簽的含義是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手