文章目录
- 一、Display 显示模式转换
- 二、块元素示例
- 三、inline-block 改元素为行内块元素示例
- 四、为块元素设置浮动
- 五、为块元素设置定位
一、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>显示效果 :
