03 转换css元素的类别

通过设置display属性

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

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

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

块级元素转行内元素

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

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

转换成行内元素

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

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

行内元素转块级元素

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

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

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

兄弟反目

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

转换成行内块级元素

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

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

结果

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

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

03 转换css元素的类别的更多相关文章

  1. 课时92.CSS元素显示模式转换（掌握）

    我们之前学习的显示模式都可以不用记忆,因为这节课我们要学习转换,我们可以任意来进行一个转换的,上面这些东西有一个了解就行了.所有的标签都有一个属性叫做display,display的中文含义就是显示的 ...

  2. css 嵌套 元素所属类别

    元素所属类别 Metadata content(元数据元素)(8) base,link,meta,noscript,script,style,template, title Flow content( ...

  3. Css - 元素的显示模式

    Css - 元素的显示模式 块元素(block) 块元素是指: 1.独占一行,每个div上下之间没有留白,上面的div的底部与下面的div的顶部紧紧靠在一起没有任何缝隙 2.可设置宽高,默认宽度是父元 ...

  4. 5：CSS元素类型

    5:CSS元素类型 学习目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依据和元素类型分 ...

  5. 好程序员web前端分享CSS元素类型

    好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...

  6. js函数实现转换css中常用的颜色编码

    //转换css中常用颜色编码 var toRGB = function (val){ var reg1 = /^#([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i; ...

  7. [转载]CSS元素的定位position

    CSS元素的定位position 属性position   值 描述 absolute                             生成绝对定位的元素,相对于 static 定位以外的第一 ...

  8. Selenium自动化-CSS元素定位

    接下来,开始讲解 CSS元素定位. CSS定位速度快,功能多,但是不能向上查找,比 xpath好用,是本人认为最好用的定位方式   大致用法总结: 具体使用仿上篇博客.http://www.cnblo ...

  9. css 元素溢出

    css元素溢出: 当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置. overflow的设置项: (1)visible 默认值 内容不 ...

随机推荐

  1. 通过nfs将centos目录挂载到windows 系统的磁盘上

    环境:centos8,windows7 1.在centos上安装nfs服务 yum -y install nft-utils 2.启动nfs服务 systemctl start nfs-server ...

  2. Java学习day28

    为什么要只用Lambda表达式:1.可以避免匿名内部类定义过多.2.可以让代码变简洁.3.去掉无意义代码,保留核心逻辑 函数式接口(Functional Interface)定义:1.任何接口,如果只 ...

  3. python 包之 redis 数据库操作教程

    一.安装 redis 是一个 Key-Value 数据库 Value 支持 string(字符串),list(列表),set(集合),zset(有序集合),hash(哈希类型)等类型 pip inst ...

  4. Luffy /2/ 后台数据库配置&前台创建配置

    目录 二次封装Response 后台数据库配置 命令操作 pycharm连接 django操作mysql 方式一 方式二 user表设计 前台创建及配置 全局css样式配置 配置文件配置 二次封装Re ...

  5. ASP.NET Web 应用 Docker踩坑历程

    听说Docker这玩意挺长时间了,新建Web应用的时候,也注意到有个启用Docker的选项. 前两天扫了一眼<[大话云原生]煮饺子与docker.kubernetes之间的关系>,觉得有点 ...

  6. Atlassian应对CVE-2022-22963，CVE-2022-22965的常见问题

    CVE-2022-22965 常见问题解答 基本信息 已发现 Spring Framework 中的关键远程代码执行漏洞 CVE-2022-22965.根据 Spring 的安全公告,此漏洞会影响在 ...

  7. Linux内核浅入浅出

    公众号关注 「开源Linux」 回复「学习」,有我为您特别筛选的学习资料~ 01 前言 拥有超过1300万行的代码,Linux内核是世界上最大的开源项目之一,但是Linux内核是什么,它用于什么?且听 ...

  8. 不再空谈AI，从打造一台智能无人机开始

    对于大多数无人机爱好者来说,能自己从头开始组装一台无人机,之后加入AI算法,能够航拍,可以目标跟踪,是心中的梦想. 并且,亲自从零开始完成复杂系统,这是掌握核心技术的必经之路. 开课吧特邀北京航空航天 ...

  9. 如何基于 ZEGO SDK 实现 Android 通话质量监测

    功能简介 在进行视频通话过程中,用户有时候会出现网络不好的情况,比如在进行多人视频通话或者多人唱歌时,我们需要实时显示用户的网络质量. 示例源码 参考 下载示例源码 获取源码. 相关源码请查看 &qu ...

  10. 什么叫做 SSO

    什么叫做 SSO 本文写于 2020 年 12 月 8 日 SSO 的全称叫做 Single Sign On,意味「单点登录」. 何为单点登录?就是你希望自己的两个网站,可以做到:一个网站登录了,另一 ...