css中标签显示模式、块元素、行内元素、行内块元素、显示模式转换

标签显示模式display:

HTML标签一般分为块标签(块元素:block-level)和行内标签(行内元素:inline-level)两种类型,但是还有第三种说法行内块元素:table-row-group:设置元素为表格行组显示,display值总结如下表:
在这里插入图片描述
块元素block-level:

独占一行,可以设置宽度、高度、对齐等属性,常见的块标签:h1~h6、p、div、ul、ol、li等。

行内元素(内联元素)inline-level:

一行可排列多个行内元素,一般不能设置宽度、高度、对齐等属性,但是水平方向的margin和padding可以设置,宽度和高度由内容决定,常用于控制页面文本的样式,常见的行内标签:a、strong、b、em、i、del、s、ins、u、span等。 行内块元素: 在行内标签中有几个可以设置宽度和高度的元素如:img、input、td等,通常被称为行内块元素,其特点:在同一行上面,但是可以设置宽度高度,相邻元素之间有空白间隙。

显示模式转换:

行内元素可以转换成块元素,块元素也可以转换为行内元素,也可以把元素直接转换成行内快元素,行内块元素可以看成文本,转换后各自的属性特点变成对应的转换后的属性特点。

	span{display:block;/* 把行内元素转换为块元素 */}div{display:inline;/* 把块元素转换为行内元素 */}div,span{display:inline-block;/* 把元素转换为行内快元素 */}

提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者删除。
笔者:苦海

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/575443.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql 介绍 怎么下载 驱动jar包 各种细节问题大详解

对碰到的问题做个记录总结。 1 MySQL 的官网下载地址:http://www.mysql.com/downloads/版本说明。 1. MySQL Community Server 社区版本,开源免费,但不提供官方技术支持。 2. MySQL Enterprise Edition 企业版本,需付费&#xff…

css书写规范、行高

css书写规范: 空格规范: 选择器与花括号{之间必须包含空格,属性冒号:后面和属性值必须包含空格 .text {font-size: 16px;}选择器规范: 当有多个选择器同时出现时,每个选择器必须独占一行 .box,.nav,.mai…

CSS中的层叠性、继承性、优先级、权重

css三大特性: 三大特性:层叠性、继承性、优先级 层叠性: 指多种css样式的叠加,是浏览器处理多种css样式冲突的能力,如果给一个元素通过不同或者相同的选择器设置相同的属性但属性值不同时,权重相同的情况…

Nifi 怀疑出个bug 流程中的实时数据结果痕迹没有不是实时的,是之前的。以及相应解决办法。

1 在 Nifi 中做数据处理,有一个半小时之前执行过的流程,因为没设置好执行的时间,结果把读的数据库的表持续读成数据流 流到文件里,结果生成大量文件,一个文件就存着一张表的结果。 2 然后过了三十分钟吧,…

There is insufficient memory for the Java Runtime Environment to continue. NIFI 启动时报 jvm内存溢出

Nifi 突然启动报错。之前正常,停了两天再起就jj了。。 Nifi 解压路径还有log文件夹, 里面有各种日志文件可看。他把错误集中另存为了一个文件: 打开里面一通查看,调整。描述是java的运行环境jvm内存超出了,帖子…

CSS中盒子模型、嵌套盒子中垂直外边距塌陷问题解决方案、标准盒模型、怪异盒模型

盒子模型(Box Model): 指把HTML页面中的元素看作是一个矩形的盒子,也称容器,这个盒子从内到外由:元素的内容(content)、内边距(padding)、边框(b…

servlet/filter/listener/interceptor区别与联系(转)

由于最近两个月工作比较清闲,个人也比较“上进”,利用工作空余时间,也继续学习了一下,某天突然想起struts2和struts1的区别的时候,发现为什么struts1要用servlet,而struts2要用filter呢?一时又发…

Eclipse和IDEA 简单对比说明

Eclipse和IDEA Eclipse 当下最流行的IDE(集成开发环境)当属eclipse和idea莫属,不少新手都在问这两个ide哪个更好,今天给大家说一下自己这些年来使用这两款开发环境的心得。 一般情况下,问这个问题大多是新手&#xff0…

CSS中文档流之普通流,浮动及定位、浮动特性及清除浮动的方式、定位模式,子绝父相搭配定位方式、z-index层级

文档流: 普通流(normal flow): 字面意思是普通流或者标准流,也就是常说的文档流,指网页内标签正常是从上到下,从左到右排列的意思,css的定位机制有3种:普通流&#xff…

VScode中常用element语法

Element语法: 熟练掌握element语法可以大大提高开发效率,建议在平时练习时留意element语法,下面是常用VScode中element语法: 1、快速生成HTML骨架:!Enter或Tab键 2、快速生成带有id或者class名的标签:标签…

jQuery Tools:Web开发必备的 jQuery UI 库

基本介绍 jQuery Tools 是基于 jQuery 开发的网站界面库,包含网站最常用的Tabs(选项卡)、Tooltip(信息提示)、Overlay(遮罩、弹窗)、Scrollable(滚动控制)、Form Validat…

控制元素显示和隐藏的方式及区别、内容溢出处理(区域滚动)、透明性、字体图标、常见字体、自定义字体设计、网站图标、CSS代码分析

元素的显示与隐藏: 常见控制元素的显示和隐藏的属性有display、visibility、overflow,需要清楚的理解三者之间的区别。 display显示: 当值为none时为销毁对象,不保留原位置,当值为block时为生成对象。 visibility可…

html5中Canvas、绘制线条模糊、常见绘制工具、绘制基本图形、绘制图片、面向对象的方式绘制图形图片、绘制文本、帧动画绘制

Canvas容器: canvas标签用来定义图像的容器,必须配合脚本来绘制图像,canvas也运用于游戏开发。注意:canvas绘制图时会出现线条模糊情况,这是因为显示屏像素和canvas中定义的一个点不完全重合(相差0.5)导致…

MySQL INFORMATION_SCHEMA 使用

一、INFORMATION_SCHEMA介绍 第一个查询看看库里有多少个表,表名等select * from INFORMATION_SCHEMA.TABLES information_schema这张数据表保存了MySQL服务器所有数据库的信息。如数据库名,数据库的表,表栏的数据类型与访问权限等。再简单点…

mrql初级教程-使用(er)

最近使用mrql做xml文件解析,使用xpath来进行判断使用的方法如下,其中t.mrql文件如下:v args[1];store ty:source(xml,args[0],{"page"},xpath(.[idID6]/place));ty;执行下面的命令mrql -local t.mrql hdfs://183.175.12.220:9010/u…

web Worker简介、web Worker报错分析、作用

web Worker: web Worker是运行在后台的javascript,不会影响性能,常用于高耗费CPU的任务,必须部署到线上才可以正常使用,这里有三个方法比较重要,需要注意: postMessage(),发送消息&#xff0c…

SSE事件作用,错误分析

Server-Sent(SSE): server sent用于自动接收服务器更新,当服务器发生数据更新时,此事件将自动执行来更新页面数据,常用于博文、股价等不断变化的项目中。下面将简单介绍SSE中三个常用事件: on…

css3盒模型、过渡、转换介绍

CSS3中盒模型: 前面CSS中学到的盒子模型给padding、border会撑开盒子的大小,实际大小要通过计算才能得到,为了解决这个问题,CSS3推出了box-sizing属性来解决此问题,当box-sizing的属性值为border-box时,无…

css3中animation动画、浏览器私有前缀、文字阴影、滤镜

animation动画: 可以设置多个节点来控制一个或 一组动画,动画可以实现更多变化,更多控制,连续自动播放等效果。动画的使用分两步:1、定义动画 2、调用动画(调用必须写调用名称和持续时间),其属…

ASP.NET 页生命周期

参考:http://msdn.microsoft.com/zh-cn/library/ms178472(vvs.100).aspx转载于:https://www.cnblogs.com/pengpenghappy/p/3778721.html