display标签的几种属性值

最新推荐文章于 2024-09-06 23:41:09 发布

焦急的托托

最新推荐文章于 2024-09-06 23:41:09 发布

阅读量238

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_68522572/article/details/130823081

版权

文章探讨了HTML中<p>标签的默认特性，以及块级元素（如div,p,h1等）、行内元素（span,a,em）和行内块元素（img,input）的显示差异。重点在于display属性对元素的影响，例如设置为table或none时的行为变化。同时强调了块级元素能设置宽高和行内元素不能设置高度，以及行内元素只能设置左右外边距的特点。

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

1，首先放上没有设置display属性时候的html代码和初始视图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>试试它们的功能</title>
		<style>
		p{
			border-color: aqua;
			border-width: 8px;
			border-style: inset;
			background-color: aquamarine;		
		}	
		</style>
	</head>
	<body>
		<p>夜饮东坡醒复醉，归来仿佛三更。家童鼻息已雷鸣。敲门都不应，倚杖听江声。</p>
		<p>长恨此身非我有，何时忘却营营。夜阑风静縠纹平。小舟从此逝，江海寄余生。</p>
	</body>
</html>

在火狐浏览器上运行的结果是这样的

可以发现元素的宽度自动撑满了整个页面并且独占一行。这也是<p>标签本身就具备的特性，中间的空隙也是因为p标签自带的上下边距，同样的上阕离网页边也有一定距离。

2，于是我们可以熟悉常见的块级元素都有哪些：div,p段落标签,h1这一系列标题字,ul无序列表,ol有序列表，dt，dd定义列表标签等。

3，现在看行内元素【inline

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

4，行内块元素【inline-block

常见的行内块元素有img，input。

这样看起来好像行内元素和行内块元素没什么区别，但是行内元素是不能设置宽和高的，行内块元素就可以设置。并且行内元素只能设置左右方向的外边距。

5，display取值为table时

6，取值为none则隐藏。

写得很简略，主要用来复习一下。

焦急的托托

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
display标签的几种属性值

这也是<p>标签本身就具备的特性，中间的空隙也是因为p标签自带的上下边距，同样的上阕离网页边也有一定距离。2，于是我们可以熟悉常见的块级元素都有哪些：div,p段落标签,h1这一系列标题字,ul无序列表,ol有序列表，dt，dd定义列表标签等。这样看起来好像行内元素和行内块元素没什么区别，但是行内元素是不能设置宽和高的，行内块元素就可以设置。并且行内元素只能设置左右方向的外边距。行内元素常见的有span,a,em,strong。常见的行内块元素有img，input。3，现在看行内元素【inline。
复制链接

扫一扫