CSS样式（块级元素、行内元素、行内块级元素以及转换）

最新推荐文章于 2024-06-07 15:12:35 发布

AnyBisks

最新推荐文章于 2024-06-07 15:12:35 发布

阅读量1.7w

点赞数 1

分类专栏：前端css 文章标签： css

本文链接：https://blog.csdn.net/AnyBisks/article/details/78688179

版权

前端css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

CSS样式（块级元素、行内元素、行内块级元素以及转换）

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>元素描述</title>
		<style>

		</style>
	</head>

	<body>
		<!--
			块级元素
			典型代表:Div,h1-h6,p,ul,li
			
			特点：1.独占一行
	  			2.可以设置宽高
	 			3.嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致。
		-->
		<div>
			<p>我是p1</p>
		</div>

		<!--
			行内元素
			典型代表 span,a,strong,em,del,ins
		
			特点：1.在一行上显示
				2.不能直接设置宽高
		-->
		<span>我是小白</span>
		<a href="#">链接下</a>

		<!--
			行内块级元素
			典型代表:input img
			
			特点:
			   1.在一行上显示
		       2.可以设置宽高
		-->
		<img src="../../img/1.png" />

		<!--
			块级元素和行内元素的互换
			块级转行内:display:inline;
			行内转块级:display:block;
			块、行内转行内块：display:inline-block;
		-->
		<div>
			<span style="display: block;">我是行内转块级</span>
			<div style="display: inline;">块级转行内</div>
			<div style="display: inline-block;">块、行内转行内块</div>
		</div>
	</body>

</html>

AnyBisks

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
CSS样式（块级元素、行内元素、行内块级元素以及转换）

CSS样式（块级元素、行内元素、行内块级元素以及转换）元素描述  我是p1 <
复制链接

扫一扫