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. 从乘法求导法则到BPTT算法

    本文为手稿,旨在搞清楚为什么BPTT算法会多路反向求导,而不是一个感性的认识. 假设我们要对E3求导(上图中的L3),那么则有: 所以S2是W的函数,也就是说,我们不能说: 因为WS2 = WS2(w ...

  2. 8.Jenkins进阶之流水线pipeline基础使用实践(1)

    ​目录一览: 0x01 基础实践 (1) Maven 构建之 Pipeline Script (2) Maven 构建之 Pipeline Script from SCM (3) Jenkins pi ...

  3. zabbix proxy cannot perform check now for itemid [xxxxx]: item is not in cache

    情况 接上次做完容器部署proxy后,为其添加host进行添加任务. 发现一直没有数据,就到item里面执行 execute now. 然后过了几分钟回来一看,还是没有. Emmm,看下log吧. S ...

  4. 硬核 | Redis 布隆（Bloom Filter）过滤器原理与实战

    在Redis 缓存击穿(失效).缓存穿透.缓存雪崩怎么解决?中我们说到可以使用布隆过滤器避免「缓存穿透」. 码哥,布隆过滤器还能在哪些场景使用呀? 比如我们使用「码哥跳动」开发的「明日头条」APP 看 ...

  5. 整理display:none;和visibility:hidden;和overflow:hidden;的区别

    1.display:none;  这个属性隐藏元素,不占网页任何空间,彻底隐藏,消失 2.visibility:hidden;  占据空间,但是无法点击.隐藏了这个层,看不到,却能摸得着 3.over ...

  6. 关于 display: inline-block; 中间有间隙的问题

    当我们给一个元素的一系列子元素设置display: inline-block; 时,会发现子元素之间存在间隙,如 <style> div { display: inline-block; ...

  7. 如何设计一个良好的API接口？

    沟通创造价值,分享带来快乐.这里是程序员阅读时间,每天和你分享读书心得,欢迎您每天和我一起精进.今天和大家一起讨论的话题是如何设计一个良好的API接口? 作者:梁桂钊 解读:张飞洪 挑战 API是软件 ...

  8. RxJava + Retrofit源码解析

    RxJava + Retrofit怎么请求网络,具体的用法这里就不讲了,本文只讲一些重点源码. 版本如下: okhttp : "com.squareup.okhttp3:okhttp:3.1 ...

  9. 眼见不一定为实：调用链HBase倾斜修复

    hello,大家好,我是小楼. 今天给大家分享一个关于HBase数据倾斜的排查案例,不懂调用链?不懂HBase?没关系,看完包懂~ 背景 最近HBase负责人反馈HBase存储的调用链数据偶尔出现极其 ...

  10. 个人冲刺（一）——体温上报app（一阶段）

    任务:完成了体温上报app的整体页面布局 activity_main.xml <?xml version="1.0" encoding="utf-8"?& ...