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. [资源] 桃宝上十几块买的C#教程网盘

    我粗略的看了下觉得挺好的,分享给大家 链接:https://pan.baidu.com/s/1iHuLUXde4_L7NB-Zw9JWNg 提取码:1314

  2. NodeJs学习日报day9——操作数据库

    const mysql = require('mysql') const db = mysql.createPool({ // 数据库的ip地址 host: 'localhost', user: 'r ...

  3. 2021.11.16 P2375 [NOI2014] 动物园（EXKMP+差分）

    2021.11.16 P2375 [NOI2014] 动物园(EXKMP+差分) https://www.luogu.com.cn/problem/P2375 题意: PS:这道神题的背景让人疑惑,重 ...

  4. python中一些元组知识

    元组 Python 的元组与列表类似,不同之处在于元组的元素不能修改. 元组使用小括号 ( ),列表使用方括号 [ ]. 元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可. 实例(Pytho ...

  5. DFA算法之内容敏感词过滤

    DFA 算法是通过提前构造出一个 树状查找结构,之后根据输入在该树状结构中就可以进行非常高效的查找. 设我们有一个敏感词库,词酷中的词汇为:我爱你我爱他我爱她我爱你呀我爱他呀我爱她呀我爱她啊 那么就可 ...

  6. 【第二课】从零开始学习Linux（学习笔记）

    之前工作会接触Linux,会常用的命令和服务,看过一些书,缺乏系统的学习和整理,现在放空自己,从零开始学习. 每日学习打卡: 2022-04-04

  7. Bugku CTF练习题---MISC---眼见非实

    Bugku CTF练习题---MISC---眼见非实 flag:flag{F1@g} 解题步骤: 1.观察题目,下载附件 2.拿到手以后发现是一个压缩包,打开是一个Word文档,观察其中的内容,除了开 ...

  8. Excel文件读写操作1(xls)

    一.Python-Excel常用的库:xlrd(read).xlwt(write).xlutils.openpyxl 1.xlrd  读取Excel文件,支持 .xls 和 .xlsx 格式. 2.x ...

  9. Linux-centos8实现私有CA和证书申请

    创建CA相关目录,centos8不存在这些目录,需手动建立 [root@centos8-liyj ~]#mkdir -pv /etc/pki/CA/{certs,cr1,newcerts,privat ...

  10. 团队Beta4

    队名:观光队 链接 组长博客 作业博客 组员实践情况 王耀鑫 **过去两天完成了哪些任务 ** 文字/口头描述 学习 展示GitHub当日代码/文档签入记录 无 接下来的计划 完成短租车,页面美化 * ...