標簽三種顯示模式轉換display

標簽三種顯示模式轉換display

前端知識qingyu2020-11-07 12:47:18302A+A-

  標簽顯示模式轉換display

  塊轉行內 display:inline;

  行內轉塊 display:block;

  塊,行內轉行內塊 display:inline-block;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			span {
				display: block;
				width: 100px;
				height: 200px;
				background-color: #008000;
			}
			div {
				display: inline;
				background-color: #FF0000;
			}
			a {
				display: inline-block;
				width: 200px;
				height: 100px;
				background-color: #0000FF;
			}
		</style>
	</head>
	<body>
		<span>我是行內元素</span>
		<span>我是行內元素</span>
		<div>我是塊元素</div>
		<div>我是塊元素</div>
		<a href="">百度</a>
		<a href="">新浪</a>
	</body>
</html>

標簽三種顯示模式轉換displayg

點擊這里復制本文地址 如需修改代碼或者定制開發,請聯系站長

支持Ctrl+Enter提交
qrcode

大黃雞源碼編程網 © All Rights Reserved.  
網站備案號:閩ICP備18012015號-4
Powered by Z-BlogPHP
聯系我們| 關于我們| 廣告聯系| 網站管理

国产00高中生在线视频