03 转换css元素的类别

最新推荐文章于 2024-05-28 16:06:03 发布
最新推荐文章于 2024-05-28 16:06:03 发布
阅读量102 收藏
点赞数
分类专栏： 笔记 文章标签： css 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50975965/article/details/125475630
版权

03 转换css元素的类别

通过设置display属性

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

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

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

块级元素转行内元素

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

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

img

转换成行内元素

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

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

img

行内元素转块级元素

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

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

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

img

兄弟反目

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

img

转换成行内块级元素

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

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

img

结果

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

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

look-word
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS之元素显示
you_for_ever的博客
04-21 158
1.什么是元素显示模式 是指元素以什么样的方式进行显示，比如div标签，自己独占一行，span标签一行可以放置多个。 HTML元素一般可以分为，块元素和行内元素两种。 块元素 常见的块元素有h1~h6，p，div，ul，ol，li，其中div是最典型的块标签。 块标签元素的特点。 比较霸道，自己独占一行。 高度，宽度，外边距以及内边距都可以控制。 宽度默认是容器的100% 是一个容器及盒子，里面可以放置行内或者块级元素。 注意 文字类的元素不能使用块级元素。 p标签主要存放文字，因此p标签中不能放块级元素。
html 块元素 css,进一步理解CSS编程中的块级元素和行内元素
weixin_36140403的博客
07-16 284
Block element 块级元素顾名思义就是以块显示的元素，高度宽度都是可以设置的。比如我们常用的、、默认状态下都是属于块级元素。块级元素比较霸道，默认状态下每次都占据一整个行，后面的内容也必须再新起一行显示。当然非块级元素也可以通过css的display:block;将其更改成块级元素。此外还有个特殊的，float也具有此功能。Inline element 内联元素通俗点来说就是文本的显示方...
CSS基础之显示模式及转换
拄着拐儿唱儿歌的博客
01-17 349
CSS基础之显示模式及转换
CSS块级元素、内联元素
11-21 6517
在css盒子模型中，我们提到了html元素中的块元素（block element）和内联元素（inline element）。那么它们究竟是什么呢？  其实，这两种元素都是html规范中的概念。块元素(block element)一般是其他元素的容器元素，能容纳其他块元素或内联元素。最常见的就是P和div这两个，说的简单点，块元素就好比一个四方块，可以放其他的四方块，并可以呈现在页面上任何地
css块级元素、内联元素
图图
06-09 4022
CSS块级元素、内联元素     在css盒子模型中，我们提到了html元素中的块元素（block element）和内联元素（inline element）。那么它们究竟是什么呢？      其实，这两种元素都是html规范中的概念。块元素(block element)一般是其他元素的容器元素，能容纳其他块元素或内联元素。最常见的就是P和div这
CSS基础: 元素隐藏和显示
u011863822的博客
03-09 429
现在聊一下常见的元素显示和隐藏，其实前面也用过，现在单独拿出来再聊一下。 主要说如果让一个元素在页面种隐藏或者显示出来。 display 属性 隐藏显示 其实display前面也聊过，再元素标准类别转换中说过，本篇主要聊其在元素显示和隐藏的作用。 display : none : 隐藏元素 display ：block : 除了转换位块级元素之外，同时还有显示元素的意思。 display 隐藏元素后，不再占有原来的位置。 所以在网页种都会使用，所以大家应该掌握。 visibility 可见性
CSS随笔
道阻且长
04-03 313
CSS随笔
css-块元素、内联元素、内联块元素
weixin_49344258的博客
10-12 605
元素就是标签， 布局中常用的有三种标签，块元素、内联元素、内联块元素，了解了这三种元素的特性，才能熟练的对页面进行布局。 1.块元素 块元素（会占据文档流一行显示），也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd、ol 等等都是块元素。，它在布局中的行为：支持全部的样式。如果没有设置宽度，默认的宽度为父级宽度 100% 盒子占据一行、即使设置了宽度同样也是父级宽度100%。 如图，两个div各自占据一行。 块元素转换为内联元素。display:inlin
CSS块级元素、内联元素概念
sinolover的专栏
02-16 379
CSS文档流与块级元素（block）、内联元素（inline），之前翻阅不少书籍，看过不少文章， 看到所多的是零碎的CSS布局基本知识，比较表面。看过O'Reilly的《CSS权威指南》，发现里面提到的文档流概念让我很敏感。 可恶的是书中并没有解释文档流是什么东西，或许作者觉得这个太简单了以至于不值一提。但我觉得，这个概念实在太重要了。理解了它，一堆CSS布局的理论都变得易于理解，并且体会到CSS...
精通CSS+DIV网页样式与布局视频教材
12-25
第7章　用CSS设置页面和浏览器的元素 7.1　丰富的超链接特效 7.1.1　动态超链接 7.1.2　按钮式超链接 7.1.3　浮雕式超链接 7.2　鼠标特效 7.2.1　CSS控制鼠标箭头 7.2.2　鼠标变幻的超链接 7.3　...
AJAX基础概念、核心技术与典型案例(内涵动态实例)
12-27
12.2.htm 一个在Head元素内定义CSS的范例 12.3.htm 引用CSS文件的页面 12.4.htm 通过下拉列表框来改变容器的背景色 12.5.htm 实演示如何创建CSS文件 12.6.htm 演示一个在...
medium-posts-widget：根据某些类别或标签过滤的中级帖子的可嵌入的滑块轮播小部件
02-27
安装依赖项npm install使用本地运行npm start建立使用npm run build托管在Web服务器上的widget_dist widget_dist/static文件夹中找到的widget.js和widget.css文件将以下代码添加到您希望支付小部件的任何地方。...
jquery.fullBleed:jQuery插件，可缩放图像以占据整个浏览器窗口
05-19
jquery.fullBleed 缩放图像以占据整个浏览器窗口... align可能值为： 左上方最高中心右上居中左中心中心（这是默认设置） 右中左下方底部中心右下元素类别可以将可选类添加到目标元素，这在引用CSS中的图像时很有用，因
精通JavaScript+jQuery Part1
07-20
　第7章　用CSS设置页面和浏览器的元素　 　7.1　丰富的超链接特效 　7.2　鼠标特效 　7.3　页面滚动条　 　第8章　用CSS制作实用的菜单　 　8.1　项目列表　 　8.2　无需表格的菜单　 　8.3　菜单的横竖转换　 　...
CSS实现一个雨滴滑落效果
云加速
05-28 292
这只是一个非常基础的示例，真实的雨滴滑落效果可能需要更复杂的动画和可能的JavaScript交互来实现更逼真的效果，比如雨滴的大小、速度、下落路径的随机性等。如果你想要一个更复杂的动画效果，你可能需要考虑使用SVG、Canvas或者WebGL等技术，并结合JavaScript来实现。使用纯CSS来实现一个真实的雨滴滑落效果可能会有些挑战，因为CSS主要关注于静态样式和简单的动画效果。然而，你可以使用CSS动画和@keyframes来模拟一个雨滴滑落的简化效果。这个示例中的雨滴是一个简单的圆形元素。
CSS（七）
weixin_69912448的博客
05-28 491
网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。height: 0;我们用css 边框可以模拟三角效果宽度高度为0我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了为了照顾兼容性 低版本的浏览器，加上 font-size: 0;
了解CSS中的link和@import引入CSS的区别
祈澈菇凉
05-28 95
【代码】了解CSS中的link和@import引入CSS的区别。
CSS文本粒子动画特效之爱心粒子文字特效-Canvas
最新发布
misschengispink的博客
05-28 149
html+css+js，采用canvas实现爱心文本粒子动画特效，炫酷特效，素材和完整代码都有~快拿去表白~
css行内快转换块级元素
05-24
你可以使用 CSS 的 display 属性将行内元素转换为块级元素。将 display 属性设置为 "block" 可以将行内元素转换为块级元素，如下所示： ```css span { display: block; } ``` 如果你想将块级元素转换为行内元素，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值