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. NodeJS学习day2

    今天还是接着学习IO,主要方面是文件路径相关操作 练习代码如下: const fs = require('fs') // 执行C:\CS\Node.js>node .\day2\fsRoad.j ...

  2. 3种方法改变this的指向

    <body>     <div style="width: 200px;height: 200px;hotpink;"></div>     & ...

  3. 代码源 BFS练习1

    BFS练习1 http://oj.daimayuan.top/course/11/problem/147 题目 思路 四个方向进行BFS 注意:此题读写量大,cin会被卡 代码 #include &l ...

  4. PostgreSQL 数据库备份脚本

    PostgreSQL 数据库备份脚本 #!/bin/bash # PG家目录(/opt/postgresql/pg96/) PG_HOME=${PGHOME} # pg数据库连接信息 PG_HOST= ...

  5. XCTF练习题---MISC---base÷64

    XCTF练习题---MISC---base÷64 flag:flag{E33B7FD8A3B841CA9699EDDBA24B60AA} 解题步骤: 1.观察题目,下载附件 2.打开附件,观察内容和题 ...

  6. Linux学习教程 | 全文目录

    本教程最大的特点是通俗易懂,并且非常详细,花费 7 天时间即可快速了解 Linux. 第一章 Linux简介 1.1 操作系统是什么,操作系统概述 1.2 Linux是什么,有哪些特点? 1.3 Li ...

  7. 一文详解 FTP、FTPS 与 SFTP 的原理

    开源Linux 长按二维码加关注~ 上一篇:2020年MySQL数据库面试题总结 无论是网盘还是云存储,上传都是一项很简单的操作.那些便捷好用的上传整理工具所用的 FTP 协议到底是什么意义,繁杂的模 ...

  8. mybatis各阶段的详解

    1 本阶段的需要注意的几个点 1,首先是在核心配置文件里面的内容: 配置的顺序,不配则不用管,配则必须按顺序来!!!! properties?, settings?, typeAliases?, ty ...

  9. Python 什么是flask框架？快速入门

    一:Python flask框架 前言 1.Python 面向对象的高级编程语言,以其语法简单.免费开源.免编译扩展性高,同时也可以嵌入到C/C++程序和丰富的第三方库,Python运用到大数据分析. ...

  10. 羽夏 MakeFile 简明教程

    写在前面   此系列是本人一个字一个字码出来的,包括示例和实验截图.该文章根据 GNU Make Manual 进行汉化处理并作出自己的整理,一是我对 Make 的学习记录,二是对大家学习 MakeF ...