【CSS】通过定位修改 display 显示模式 ( Display 显示模式转换 | inline-block 改块元素为行内块元素示例 | 为块元素设置浮动 | 为块元素设置定位 )

韩曙亮

发布于 2023-04-16 14:29:20

1K0

发布于 2023-04-16 14:29:20

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

一、Display 显示模式转换

display 显示模式 , 可以分为

行内显示模式 ;
块内显示模式 ;
行内块显示模式 ;

将元素的显示模式修改为行内块显示模式的方法 :

使用 inline-block 可以改变显示模式 , 将元素的显示模式改为行内块显示模式 ;
使用浮动 , 也可以将块内元素改为类似于行内块的显示模式 , 浮动是脱标的 , 不占用标准流元素的位置 ;
绝对定位和固定定位都可以到达将元素转为行内块显示模式的效果 ;

行内盒子 , 一旦使用了浮动 / 绝对定位 / 固定定位就可以将该盒子看做行内块元素盒子 , 为该盒子设置宽高等属性 ;

浮动元素和绝对定位 / 固定定位元素 , 都是脱标的 , 都不会触发外边距塌陷问题 , 为盒子设置浮动 / 定位 , 就不用考虑外边距塌陷的问题 ;

二、块元素示例

div 块级元素 , 不设置width , 默认充满父容器 ;

代码示例 :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>块元素</title>
	<style>
		.box {
			/* div 块级元素, 不设置width, 默认充满父容器 */
			height: 100px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div class="box">骐骥一跃，不能十步；驽马十驾，功在不舍。</div>
</body>
</html>

显示效果 :

三、inline-block 改元素为行内块元素示例

将块级元素转为行内块元素 , 行内块元素如果不设置宽度 , 默认宽度与元素内容宽度一致 ;

代码示例 :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>块元素</title>
	<style>
		.box {
			/* 将 显示模式 由 块级元素 改为 行内块元素 */
			display: inline-block;
			height: 100px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div class="box">骐骥一跃，不能十步；驽马十驾，功在不舍。</div>
</body>
</html>

展示效果 :

四、为块元素设置浮动

将块级元素设置为浮动元素 , 也能达到与行内块元素相同的效果 ;

代码示例 :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>块元素</title>
	<style>
		.box {
			/* 为块元素设置浮动 达到 行内块元素效果 */
			float: left;
			height: 100px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div class="box">骐骥一跃，不能十步；驽马十驾，功在不舍。</div>
</body>
</html>

显示效果 :

五、为块元素设置定位

将块级元素设置为绝对定位元素 , 也能达到与行内块元素相同的效果 ;

代码示例 :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>块元素</title>
	<style>
		.box {
			/* 为块元素设置绝对定位 达到 行内块元素效果 */
			position: absolute;
			height: 100px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div class="box">骐骥一跃，不能十步；驽马十驾，功在不舍。</div>
</body>
</html>

显示效果 :