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. python基础练习题（一个整数，它加上100后是一个完全平方数，再加上168又是一个完全平方数，请问该数是多少？）

    day2 --------------------------------------------------------------- 实例003:完全平方数 题目: 一个整数,它加上100后是一个 ...

  3. netty系列之:netty中的核心MessageToMessage编码器

    目录 简介 框架简介 MessageToMessageEncoder MessageToMessageDecoder MessageToMessageCodec 总结 简介 在netty中我们需要传递 ...

  4. python学习番外篇——字符串的数据类型转换及内置方法

    目录 字符串的数据类型转换及内置方法 类型转换 内置方法 优先掌握的方法 需要掌握的方法 strip, lstrip, rstrip lower, upper, islower, isupper 插入 ...

  5. Python学习-Day1（Typora软件与计算机）

    学习总括 Typora软件介绍(markdown语法) 相关拓展知识 文件的后缀名是什么? 什么是语言? 什么是编程语言? 什么是编程?(程序员写代码的本质) 计算机的五大组成部分 计算机的本质 计算 ...

  6. .NET桌面程序应用WebView2组件集成网页开发3 WebView2的进程模型

    系列目录     [已更新最新开发文章,点击查看详细] WebView2 运行时使用与 Microsoft Edge 浏览器相同的进程模型. WebView2 运行时中的进程 WebView2 进程组 ...

  7. Oracle 数据库表删除重复数据

    删除重复数据并保留一条 方法一 1.建立临时表,记录重复的数据 create table 临时表 as select a.字段1,a.字段2,max(a.rowid) as dataid from 原 ...

  8. ucore lab3 虚拟内存管理 学习笔记

    做个总结,这节说是讲虚拟内存管理,大部分的时间都在搞SWAP机制和服务于此机制的一些个算法.难度又降了一截. 不过现在我的电脑都16G内存了,能用完一半的情景都极少见了,可能到用到退休都不见得用的上S ...

  9. Kafka核心组件详解

    1.概述 对于Kafka的学习,在研究其系统模块时,有些核心组件是指的我们去了解.今天给大家来剖析一下Kafka的一些核心组件,让大家能够更好的理解Kafka的运作流程. 2.内容 Kafka系统设计 ...

  10. 团队Arpha1

    队名:观光队 组长博客 作业博客 组员实践情况 王耀鑫 **过去两天完成了哪些任务 ** 文字/口头描述 完成服务器连接数据库部分代码 展示GitHub当日代码/文档签入记录 接下来的计划 与服务器连 ...