2021-03-23

最新推荐文章于 2024-10-17 00:04:56 发布

lhl3094140242

最新推荐文章于 2024-10-17 00:04:56 发布

阅读量61

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/lhl3094140242/article/details/115113777

版权

笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了HTML中的元素显示模式，包括块元素、行内元素和行内块元素的特点及转换方法。通过CSS的`display`属性，可以将元素从一种模式转换为另一种，例如将`div`转换为行内元素，`p`转换为块元素，以及`a`标签的安全块级转换。此外，还展示了`<input>`作为行内块元素的特性。

摘要由CSDN通过智能技术生成

权重：
ID的权重是100
类的权重是10
标签的权重是1
样式最后使用权重大的

元素显示模式：块元素、行内元素、行内块元素
转换成行内元素：display：inline；
inline：行内元素

转换成块元素：display：block；
block：块

转换成行内块元素display：inline-block；
inline-block：行内块

块元素的特点:
1.比较霸道,自己独占一行;
2.可以控制width、height、对其属性;
3.宽度默认是容器(父级元素宽度)的100%;
4.块元素内可以包含行内元素或块元素.
常见的块元素有<h1><h6><p><div><ul><ol><li> 文字类的标签内不能使用块元素，比如<p><h1><h6> 等标签主要用于存放文字，因此标签内不能放块级元素。

行内元素:
1.一行内显示多个;
2.设置width,height无效;
3.默认的宽高是内容的宽高;
4行内只能容纳文本或其他行内元素
常见的行内元素有<a>,<strong>,<em>,<span>等
链接里不能再放链接
特殊情况链接<a>里可以放块元素，但是给<a>转换i型块级模式最安全

行内块元素 inline-block
<input/>,<img/>,<td>,同时具有块元素和行内元素的特点
1.一行显示多个，但两个元素之间有空白缝隙；
2.默认宽度是内容本身的宽度；
3.width、height可控制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>元素显示模式</title>
		<style>
			div{
				/* 转换成行内元素: */
				display: inline;  /* inline:行内元素 */
				background-color: #7FFFD4;
			}
			/* 块元素的特点:
			1.比较霸道,自己独占一行;
			2.可以控制width、height、对其属性;
			3.宽度默认是容器(父级元素宽度)的100%;
			4.块元素内可以包含行内元素或块元素. 
			常见的块元素有<h1><h6><p><div><ul><ol><li>
			文字类的标签内不能使用块元素，比如<p><h1><h6>等标签主要用于存放文字，因此标签内不能放块级元素。*/
			p{
				background-color: bisque;
			}
			ul li{
				height: 50px;
				width: 200px;
				background-color: aquamarine;
			}
			/* 行内元素:
				1.一行内显示多个;
				2.设置width,height无效;
				3.默认的宽高是内容的宽高;
				4行内只能容纳文本或其他行内元素.
				常见的行内元素有<a>,<strong>,<em>,<span>等
				链接里不能再放链接
				特殊情况链接<a>里可以放块元素，但是给<a>转换i型块级模式最安全*/
			a{
				/* 转换成块元素 */
				display: block;  /* block:块 */
				width: 1000px;
				height: 50px;
				background-color: yellow;
			}
			span{
				
				background-color: aquamarine;
			}
		</style>
	</head>
	<body>
		<!-- 元素显示模式：块元素、行内元素、行内块元素 -->
			<p>1</p>
			<div>盒子</div>
			<ul>
				<li>11</li>
				<li>333</li>
				<li>222</li>
				<li>444</li>
			</ul>
			<a href="#" style="text-decoration: none;">链接</a>
			<a href="#" style="text-decoration: none;">链接</a>
			<a href="#" style="text-decoration: none;">链接</a>
			<span>文字内容</span>
			<span>文字内容</span>
			<span>文字内容</span>
			<!-- 行内块元素 inline-block
			 <input/>,<img/>,<td>,同时具有块元素和行内元素的特点
			 1.一行显示多个，但两个元素之间有空白缝隙；
			 2.默认宽度是内容本身的宽度；
			 3.width、height可控制-->
			<input type="text" style="width: 200px; height: 100px;"/>
	</body>
</html>