元素模式

最新推荐文章于 2024-08-10 22:43:21 发布

一只小小鑫_

最新推荐文章于 2024-08-10 22:43:21 发布

阅读量210

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_44413193/article/details/107525352

版权

块级元素

元素排列: 一行只能放一个块级元素。
设置样式: 可以设置宽度高度。
默认宽度: 容器的100%
包含: 容器级可以包含任何标签。
常用的块级元素：div,dl,dt,dd,ol,ul,fieldset,（h1-h6）,p,form,hr,colgroup,col,table,tr,td等。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>块级元素</title>
	<style type="text/css">
		div {
            width:  100px;
			height: 200px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div>块级元素1</div>
	<div>块级元素2</div>
	<div>
		<p>块级元素3</p>
		<h1>块级元素4</h1>
	</div>
	</body>
</html>

行内元素

元素排列: 一行可以放多个行内元素。
设置样式: 不可以直接设置宽度高度。
默认宽度: 它本身内容的宽度。
包含: 容纳文本或者其他行内元素。
常见的行内元素如：a,span,i,em,strong,b等。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>行内元素</title>
	<style type="text/css">
		span {
			background-color: red;
		}
	</style>
</head>
<body>
	<span>行内元素</span>
</body>
</html>

行内块元素

元素排列: 一行放多个行内块元素。
设置样式: 可以设置宽度高度。
包含: 它本身的宽度。
常见元素: img input textarea buttom。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>行内块元素&lt;/title>
	<style type="text/css">
		img {
            width: 200px
			height: 200px;
			background-color: red;
		}
	</style>
</head>
<body>
<img src="#">    /*#替换图片路径*/
	<img src="#">
</body>
</html>

标签显示模式转换display

块转行内: display:line;
行内转块: display:block;
块、行内元素转换为行内块: display:inline-block;

一只小小鑫_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素模式

块级元素元素排列: 一行只能放一个块级元素。设置样式: 可以设置宽度高度。默认宽度: 容器的100%包含: 容器级可以包含任何标签。常用的块级元素：div,dl,dt,dd,ol,ul,fieldset,（h1-h6）,p,form,hr,colgroup,col,table,tr,td等。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title&gt.
复制链接

扫一扫