03 转换css元素的类别
03 转换css元素的类别
通过设置
display属性
属性 作用 block 块级 inline 行内 inline-block 行内块级
接来下 就跟着小demo来学习吧！
不懂可以看看！！！什么时候块级元素和行内元素
块级元素转行内元素
我们都知道 div是块级元素 是独占一行 可以设置
宽高的 并且是独占一行的那么我们看看 给它转换成行内元素的效果吧！
转换成行内元素
可以清楚的看到 他们俩成为相亲相爱的好兄弟 在
同一条线上了！接下来就看看 行内元素转块级元素吧！
行内元素转块级元素
众所周知
行内元素是好兄弟 他们都是在一条线上的可以看到 我们设置了宽高 他们还是不离不弃 生死相依！
那么 接下来 我们就让他 兄弟反目吧 ！
兄弟反目
- 可以看到 当我们设置为块级元素之后 他俩翻脸速度比翻书还快
- 直接另起一行 各奔东西的
转换成行内块级元素
可以看到 图中 b标签是行内元素 而p标签则是块级元素
我想给俩弄成相亲相爱的俩兄弟 该如何设置呢 下面就得用到我们的行内块级元素了！
结果
可以看到 当我们给这俩个
标签设置成行内块级元素的时候变成了 可设置宽高 不是独占一行的行内块级元素
03 转换css元素的类别的更多相关文章
- 课时92.CSS元素显示模式转换（掌握）
我们之前学习的显示模式都可以不用记忆,因为这节课我们要学习转换,我们可以任意来进行一个转换的,上面这些东西有一个了解就行了.所有的标签都有一个属性叫做display,display的中文含义就是显示的 ...
- css 嵌套 元素所属类别
元素所属类别 Metadata content(元数据元素)(8) base,link,meta,noscript,script,style,template, title Flow content( ...
- Css - 元素的显示模式
Css - 元素的显示模式 块元素(block) 块元素是指: 1.独占一行,每个div上下之间没有留白,上面的div的底部与下面的div的顶部紧紧靠在一起没有任何缝隙 2.可设置宽高,默认宽度是父元 ...
- 5：CSS元素类型
5:CSS元素类型 学习目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依据和元素类型分 ...
- 好程序员web前端分享CSS元素类型
好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...
- js函数实现转换css中常用的颜色编码
//转换css中常用颜色编码 var toRGB = function (val){ var reg1 = /^#([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i; ...
- [转载]CSS元素的定位position
CSS元素的定位position 属性position 值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一 ...
- Selenium自动化-CSS元素定位
接下来,开始讲解 CSS元素定位. CSS定位速度快,功能多,但是不能向上查找,比 xpath好用,是本人认为最好用的定位方式 大致用法总结: 具体使用仿上篇博客.http://www.cnblo ...
- css 元素溢出
css元素溢出: 当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置. overflow的设置项: (1)visible 默认值 内容不 ...
随机推荐
- 3道常见的vue面试题，你都会了吗？
最近流传各大厂纷纷裁员,导致很多人"被迫"毕业,显然很多人还是想留级,无奈出现在名单中,只能感叹命运不公,不过拿了N+1,也算是很欣慰. 又得去面试了,接下来一起来巩固下vue的3 ...
- 1903021116-吉琛-Java第四周作业-程序编写
项目 内容 课程班级博客链接 19级信计班 这个作业要求链接 Java分支语句学习 https://edu.cnblogs.com/campus/pexy/19xj/homework/12563 我的 ...
- 2021.12.08 [SHOI2009]会场预约（平衡树游码表）
2021.12.08 [SHOI2009]会场预约(平衡树游码表) https://www.luogu.com.cn/problem/P2161 题意: 你需要维护一个 在数轴上的线段 的集合 \(S ...
- Sentinel基础应用
Sentinel 是什么? 随着微服务的流行,服务和服务之间的稳定性变得越来越重要.Sentinel 以流量为切入点,从流量控制.熔断降级.系统负载保护等多个维度保护服务的稳定性. Sentinel ...
- Java web与web gis学习笔记（一）——Tomcat环境搭建
系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...
- 为何PostgreSQL即将超越SQL Server？
DB-Engines 2021年10月份统计,PostgreSQL当月上升10.30点,总分是597.27:SQLServer当月大幅下降16.32,总分是954.29 .按照这样的速度,2年之内,P ...
- XCTF练习题---MISC---pure-color
XCTF练习题---MISC---pure-color flag:flag{true_steganographers_doesnt_need_any_tools} 解题步骤: 1.观察题目,下载附件 ...
- 单列集合(Collection-Set)
(部分) Set类特点: "无序"(输入顺序和存储顺序不一样) HashSet 底层是HashMap 关于不能有重复元素/对象 遇到的问题: 解决办法:重新类的相关方法 选择名字和 ...
- kill -9 进程杀不掉，怎么办？
关注「开源Linux」,选择"设为星标" 回复「学习」,有我为您特别筛选的学习资料~ 用ps和grep命令寻找僵尸进程 ps -A -ostat,ppid,pid,cmd | gr ...
- 一文搞懂 Linux 的 inode！
一个执着于技术的公众号 1.inode 是什么 理解inode,要从文件储存说起. 文件储存在硬盘上,硬盘的最小存储单位叫做"扇区"(Sector).每个扇区储存512字节(相当于 ...