css 块元素、行内元素、行内块元素相互转换

在HTML和CSS中,元素可以分为三类:块级元素(Block-level Elements)、内联元素(Inline Elements)和内联块级元素(Inline-block Elements)。

块级元素(Block-level Elements):

1、块级元素在页面中以块的形式显示,它会占据一整行(从左到右),它会自动换行。

2、块级元素通常用于构建页面的结构,如段落、标题、列表、div等。

3、常见的块级元素有div, p, h1~h6, ul, ol, li, form等。

行内元素(Inline Elements):

1、行内元素只占据它对应标签的边框所包含的空间,它不会强制换行。

2、行内元素一般用于包裹文本或者在文本中插入一些特殊的元素,如强调、链接、图片等。

3、常见的行内元素有span, a, strong, em, img, br, input等。

行内块元素(Inline-block Elements):

1、行内块元素融合了块级元素和行内元素的特点,它会以块的形式显示,但是它不会强制换行,可以与其他元素在同一行上。

2、行内块元素可以设置宽度、高度、内外边距等,这与行内元素不同。

3、常见的行内块元素有img, button, input, label等。

相互转换:

一、块级元素转行内元素:

使用display: inline; CSS属性可以将块级元素转换成行内元素。

javascript 复制代码
div {
  display: inline;
}

二、行内元素转块级元素:

使用display: block; CSS属性可以将行内元素转换成块级元素。

javascript 复制代码
span {
  display: block;
}

三、行内元素转行内块元素:

使用display: inline-block; CSS属性可以将行内元素转换成行内块元素。

javascript 复制代码
span {
  display: inline-block;
}
相关推荐
软件小伟3 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾24 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧33 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm42 分钟前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
gqkmiss2 小时前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃2 小时前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter