03 转换css元素的类别

最新推荐文章于 2024-10-10 21:20:12 发布
最新推荐文章于 2024-10-10 21:20:12 发布
阅读量59 收藏
点赞数
分类专栏： 笔记 文章标签： css 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50975965/article/details/125476388
版权
本文介绍了如何使用CSS的display属性将元素转换为块级、行内和行内块级。通过示例展示了div从块级转为行内元素，以及行内元素转为块级元素的过程，同时解释了行内块级元素的特点，即能设置宽高且不独占一行。最后，通过实例展示了如何将不同类型的元素变为行内块级元素，使它们能并排显示并设置尺寸。
摘要由CSDN通过智能技术生成

03 转换css元素的类别

通过设置display属性

属性作用
block块级
inline行内
inline-block行内块级

接来下 就跟着小demo来学习吧！

不懂可以看看！！！什么时候块级元素和行内元素

块级元素转行内元素

我们都知道 div是块级元素 是独占一行 可以设置宽高的 并且是独占一行的

那么我们看看 给它转换成行内元素的效果吧！

img

转换成行内元素

可以清楚的看到 他们俩成为相亲相爱的好兄弟 在同一条线上了！

接下来就看看 行内元素转块级元素吧！

img

行内元素转块级元素

众所周知 行内元素是好兄弟 他们都是在一条线上的

可以看到 我们设置了宽高 他们还是不离不弃 生死相依！

那么 接下来 我们就让他 兄弟反目吧 ！

img

兄弟反目

  • 可以看到 当我们设置为块级元素之后 他俩翻脸速度比翻书还快
  • 直接另起一行 各奔东西的

img

转换成行内块级元素

可以看到 图中 b标签是行内元素 而p标签则是块级元素

我想给俩弄成相亲相爱的俩兄弟 该如何设置呢 下面就得用到我们的行内块级元素了！

img

结果

可以看到 当我们给这俩个标签设置成行内块级元素的时候

变成了 可设置宽高 不是独占一行的行内块级元素
img

look-word
关注
专栏目录
CSS之元素显示
you_for_ever的博客
04-21 191
1.什么是元素显示模式 是指元素以什么样的方式进行显示，比如div标签，自己独占一行，span标签一行可以放置多个。 HTML元素一般可以分为，块元素和行内元素两种。 块元素 常见的块元素有h1~h6，p，div，ul，ol，li，其中div是最典型的块标签。 块标签元素的特点。 比较霸道，自己独占一行。 高度，宽度，外边距以及内边距都可以控制。 宽度默认是容器的100% 是一个容器及盒子，里面可以放置行内或者块级元素。 注意 文字类的元素不能使用块级元素。 p标签主要存放文字，因此p标签中不能放块级元素。
css中替换元素和不可替换元素及显示元素详细探讨
09-25
大部分替换元素默认为行内元素，可以通过修改`display`属性改变元素的类别，实现行内元素到块级元素的转换，反之亦然。 替换元素和块级元素在格式化上有很多相似之处，如边距的压缩规则，以及默认的边框和填充为0。...
html 块元素 css,进一步理解CSS编程中的块级元素和行内元素
weixin_36140403的博客
07-16 331
Block element 块级元素顾名思义就是以块显示的元素，高度宽度都是可以设置的。比如我们常用的、、默认状态下都是属于块级元素。块级元素比较霸道，默认状态下每次都占据一整个行，后面的内容也必须再新起一行显示。当然非块级元素也可以通过css的display:block;将其更改成块级元素。此外还有个特殊的，float也具有此功能。Inline element 内联元素通俗点来说就是文本的显示方...
CSS块级元素、内联元素
11-21 6565
在css盒子模型中，我们提到了html元素中的块元素（block element）和内联元素（inline element）。那么它们究竟是什么呢？  其实，这两种元素都是html规范中的概念。块元素(block element)一般是其他元素的容器元素，能容纳其他块元素或内联元素。最常见的就是P和div这两个，说的简单点，块元素就好比一个四方块，可以放其他的四方块，并可以呈现在页面上任何地
css块级元素、内联元素
图图
06-09 4051
CSS块级元素、内联元素     在css盒子模型中，我们提到了html元素中的块元素（block element）和内联元素（inline element）。那么它们究竟是什么呢？      其实，这两种元素都是html规范中的概念。块元素(block element)一般是其他元素的容器元素，能容纳其他块元素或内联元素。最常见的就是P和div这
CSS基础: 元素隐藏和显示
u011863822的博客
03-09 454
现在聊一下常见的元素显示和隐藏，其实前面也用过，现在单独拿出来再聊一下。 主要说如果让一个元素在页面种隐藏或者显示出来。 display 属性 隐藏显示 其实display前面也聊过，再元素标准类别转换中说过，本篇主要聊其在元素显示和隐藏的作用。 display : none : 隐藏元素 display ：block : 除了转换位块级元素之外，同时还有显示元素的意思。 display 隐藏元素后，不再占有原来的位置。 所以在网页种都会使用，所以大家应该掌握。 visibility 可见性
css-块元素、内联元素、内联块元素
weixin_49344258的博客
10-12 669
元素就是标签， 布局中常用的有三种标签，块元素、内联元素、内联块元素，了解了这三种元素的特性，才能熟练的对页面进行布局。 1.块元素 块元素（会占据文档流一行显示），也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd、ol 等等都是块元素。，它在布局中的行为：支持全部的样式。如果没有设置宽度，默认的宽度为父级宽度 100% 盒子占据一行、即使设置了宽度同样也是父级宽度100%。 如图，两个div各自占据一行。 块元素转换为内联元素。display:inlin
CSS基础之显示模式及转换
拄着拐儿唱儿歌的博客
01-17 364
CSS基础之显示模式及转换
CSS随笔
道阻且长
04-03 360
CSS随笔
CSS块级元素、内联元素概念
sinolover的专栏
02-16 401
CSS文档流与块级元素（block）、内联元素（inline），之前翻阅不少书籍，看过不少文章， 看到所多的是零碎的CSS布局基本知识，比较表面。看过O'Reilly的《CSS权威指南》，发现里面提到的文档流概念让我很敏感。 可恶的是书中并没有解释文档流是什么东西，或许作者觉得这个太简单了以至于不值一提。但我觉得，这个概念实在太重要了。理解了它，一堆CSS布局的理论都变得易于理解，并且体会到CSS...
css盒模型和块级、行内元素深入理解
12-13
然而，通过修改`display`属性，可以将元素从一种类型转换为另一种类型。例如，将`display`设为`block`使行内元素变为块级，设为`inline`则反之。`inline-block`则允许元素既具有块级元素的宽高特性，又能保持行内...
[其他类别]XSLT+ CSS + JQuery + WebService 实现网站_fldd.zip
12-18
此项目结合了XSLT（可扩展样式表语言转换）、CSS（层叠样式表）、JQuery（JavaScript库）以及WebService技术，用于构建一个功能丰富的网站。以下是对这些技术及其在网站开发中作用的详细解释： **XSLT** 是一种用于...
高频CSS总结
qq_51384850的博客
10-10 700
盒模型、BFC、选择器权重计算方式、清除浮动、垂直居中、CSS3新特性、隐藏页面元素、em/px/rem/vh/vw区别、flex布局、CSS提高性能、画一个三角形、两栏布局：左边定宽，右边自适应方案
CSS3-Day1
m0_74039531的博客
10-10 483
CSS3圆角CSS3盒阴影box-shadowCSS3边界图片CSS3 background-clip属性padding-box 沿着边框填充content-box 在边框外面。
前端_002_CSS扫盲
最新发布
qq_42936379的博客
10-10 737
text-align 水平对齐和vertical-align 垂直对齐。选择器{ 属性名:属性值;class选择器 .[class_name]属性选择器 [arrtribute_name]也可以在标签里通过style属性进行样式设置。id选择器 #[id_name]四种链接状态分别是：，拿a标签举例。height和width。元素选择器 [tag]2.文件后缀.css。
CSS——文字闪烁效果
懒羊羊大王的博客
10-02 1678
今天来完成一个文字闪烁的动态效果，包含倒影、闪烁、可编辑等细节。
CSS响应式布局
2401_82561004的博客
10-10 426
CSS 响应式布局也称自适应布局，是 Ethan Marcotte 在 2010 年 5月份提出的一个概念，简单来讲就是一个网站能够兼容多个不同的终端（设备），而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。响应式布局能够为使用不同终端的用户提供很好的用户体验，而且随着大屏智能手机的普及，用“大势所趋”来形容也不为过。接下来我们以媒体查询为例来具体演示一下响应式布局的实现。
关于css文字下划线动画实现
梦雨的博客
10-10 245
【代码】关于css文字下划线动画实现。
CSS盒模型实战：美化顶部导航栏与元素转换
在这个案例中，学习者将学习元素类型的不同类别及其转换，以便更好地控制网页元素的显示方式。此外，还会涉及到内边距`padding`的应用，以确保导航栏中的链接元素间距均匀，以及如何使用`vertical-align`属性实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值