前端显示模式（html)

寄与星河

于 2024-06-11 17:56:04 发布

阅读量74

点赞数 3

文章标签：前端 html

本文链接：https://blog.csdn.net/2301_80152154/article/details/139605377

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>显示模式</title>
		<style>
			.ziti{
				background-color: green;
				width: 300px;
				height: 300px;
				margin: auto;
				text-align: center;
			}
			a.{
				dispaly:block;
			}
		</style>
	</head>
	<body>
		<!-- 标签的显示模式
		1.块元素：block
		比较霸道，独占一行，默认宽度是父级元素的100%，可以设置宽，高和对齐属性
		块元素包括内元素和其他块元素，文字标签（h1~h6,p,div,ol,ul,li)内不要再装其他块元素
		2.行内元素：inline
		一行显示多个，默认的宽度是内容的宽度，宽，高和对齐属性设置无效
		行内元素只包括文本或其他行内元素，一般不包括块元素
		链接标签内不要再放其他链接
		3.行内块元素：block-inline
		一行显示多个，默认的宽度是内容的宽度
		可以设置宽，高和对齐属性
		<input/> <img/> <td/>单元格标签 -->
		<h3 class="ziti">小米su7</h3>
		<p class="ziti">性能旋风</p>
		<span class="ziti">2399</span>
		<del class="ziti">1999</del>
		<a herf="www.baidu.com" class="ziti">百度一下</a>
		<input type="text" class="ziti" />
		<input type="text" class="ziti" />
	</body>
</html>