css块元素

最新推荐文章于 2026-08-10 09:41:08 发布

原创最新推荐文章于 2026-08-10 09:41:08 发布 · 486 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

本文详细讲解了HTML中的块级元素如<h1>~<h6>、<p>、<div>等的使用，以及行内元素如<a>、<strong>的特性。行内块元素如<input>和<img>的独特之处也被阐述，包括如何实现元素间的间距和尺寸控制。

常见的块元素

常见的块元素有<h1>~<h6>,<p>,<div>,<ul>,<ol><li>...
文字类的标签内不能使用块级元素，比如<p>,<h1>~<h6>等标签主要用于存放文字，因此标签内不能放块级元素。

行内元素的特点

常见的行内元素有<a>,<strong>,<em>,<span>...

链接里不能再放链接;
特殊情况链接<a>里可以放块级元素，但是给<a>转换一下块级模式最安全。

行内块元素：inline-block

<input/>,<img/>,<td>,同时具有块元素和行内元素的特点。

一行显示多个，但两个元素之间有空白缝隙；
默认宽度是内容本身的宽度；
width、height、padding、margin可控制。

块级元素：block

1.独占一行
2.可以设置width/height
3.默认width是父级元素宽度的100%
4.块级元素里可以放块级元素和行内元素

行内元素：inline

1.一行可以显示多个
2.width/height设置无效
3.width默认内容的宽度
4.行内元素里只能放文字或者其它行内元素

algin:图片的对齐属性

center图片和文字居中对齐
top文字显示在图片的顶部
bottom文字跟图片顶部对齐

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>基础</title>
		<style>
			*{
				padding:0;
				margin:0;
				}
			/*块级元素:block
			1.独占一行
			2.可以设置width/height
			3.默认width是父级元素宽度的100%
			4.块级元素里可以放块级元素和行内元素	*/
			.tag-block{
				width:40px;
				height:50px;
				
			}
			.tag{
				background:blueviolet;
				width:200px;
				height:150px;
				}
				/*行内元素:inline
				1.一行可以显示多个
				2.width/height设置无效
				3.width默认内容的宽度
				4.行内元素里只能放文字或者其它行内元素*/
			.tag-inline{background: brown;}	
			/*行内块元素:inline-block
			1.一行可以显示多个
			2.默认宽度是内容的宽度
			3.可以设置width/height */
			.tag-inline-block{
				background: gold;
			    width:100;height:100;
			}	
		</style>
	</head>
	<body>
		<p class="tag-inline">p标签</p>
		<div class="tag-block">div标签</div>
		<h4 class="tag-inline-block">h4标签</h4>
		<ul>
			<li class="tag">列标签</li>
			<li class="tag">列标签</li>
		</ul>
		<ol>
			<li class="tag">列标签</li>
			<li class="tag">列标签</li>
		</ol>
		<span class="tag">span标签</span>
		<strong class="tag">fffff</strong>
		<a href="" class="tag">a标签</a>
		<input type="text" class="tag"/>
		<!--algin:图片的对齐属性
		center图片和文字居中对齐
		top文字显示在图片的顶部
		bottom文字跟图片顶部对齐-->
		<img src="img/1369025_140924134000_2.jpg" class="tag" align="center">
	</body>
</html>

标签

#css3