CSS之元素转换

我想大家在写代码时有一个疑问,块级元素可以转换成其他元素吗?

让我为大家介绍一下元素转换

1.display:block(转换成块元素)

display:block可以把我们的行内元素或者行内块元素转换成块元素

接下来让我为大家演示一下:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        span {
            display: block;/* 转换成块元素 */
            /* 块元素可以设置宽高,独占一行 */
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <!-- span行内元素,没加display:block之前是在一行显示,不能设置宽高 -->
    <span>1</span>
    <span>2</span>
</body>
</html>

这是没加display:block;之前的效果:

这是加display:block;之后的效果:

扩展一下:

display:block可以与display:none一起使用,可以达到显示与隐藏的效果

2.display:inline(转换成行内元素)

display:inline;可以把元素转换成行内块元素

众所周知div是一个块元素,是独占一行显示的,我们给他加上inline会发生什么呢

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            display: inline;/* 转换成行内元素 */
            /* 宽高失效 */
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>我是要被转换成行内元素的块元素1</div>
    <div>我是要被转换成行内元素的块元素2</div>
</body>
</html>

效果图:

3.display:inline-block(转换成行内块元素)

display:inline-block可以把元素转换成行内块元素

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            display: inline-block;/* 转换成行内块元素 */
            /* 行内块元素可以设置宽高,在一行中显示 */
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>我是要被转换成行内块元素的块元素1</div>
    <div>我是要被转换成行内块元素的块元素2</div>
</body>
</html>

效果图:

感谢大家的阅读,本人文笔有限,如有什么错误的地方,可以跟我提出,感谢大家!

相关推荐
y先森28 分钟前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy28 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu108301891131 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿2 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡3 小时前
commitlint校验git提交信息
前端
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员4 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐4 小时前
前端图像处理(一)
前端