行内元素和块元素以及行内块元素的特点

一、背景

初学html,接触很多标签

<h1>、<p>、<span>、<ul>、<em>
等,当写出简单的小页面的时候,例如仅仅是一篇带有标题的文章,标题
<h1>
标签单独一行,不管后面有多大的空间;
<p>
标签中使用多个
<em>
给某些词做强调,但是
<em>
却和
<p>
中的其他内容同一行,由此,会思考为什么
<em>
<h1>
会有这种的不同?

二、标签的类型(显示模式)

想要知道为何不同,得先了解HTML标签的类型。

HTML标签一般分为块标签和行内标签两种类型,也可以称为块元素和行内元素

上面举例中的

<h1>
标签就是典型的块元素,
<em>
标签就是一个行内元素。块元素和行内元素的具体特点如下:

三、块级元素(block-level)

块元素会独自占据一整行,或者多行,可以任意设置其大小尺寸,是用于搭建网页布局的必须部分,使网页结构更加紧凑合理。

块级元素有以下几个特点:

  1. 总是另起一行(特立独行)
  2. 可以设置其宽度、高度,内外边距
  3. 在不手动设置宽度的情况下,宽度默认为所在容器的100%(即容器宽度)
  4. 可以容纳行内元素和其他块元素。
常见的块级元素有:<div>/<h1>~<h6>/<p>/<ul>/<table>等,其中<div>是最常用最典型的块级元素。

特殊:文字类的块级元素不能放块元素,例如

<p>/<h1>~<h6>/<dt>

 /*块元素div*/
div{
    width: 200px;       /*宽高、外边距、内边距 都有效*/
    height: 30px;
    border:1px solid blue;
    margin:20px;        
    /*    padding:10px;*/   /*此处内边距会引起div宽高的变化,为了比较更直观就注释了*/
    line-height: 30px;
}

使用以上样式给下面块元素div设置

<div>我是块元素2</div>
<div>我是块元素2</div>

效果图见文末。

四、行内元素(inline-level)

行内元素也称为内联元素,行内元素不占有独立区域,其大小仅仅被动的依赖于自身内容的大小(例如文字和图片),所以一般不能随意设置其宽高、对齐等属性。常用于控制页面中文本的样式。

行内元素的特点:

  1. 总是和相邻的行内元素在同一行上(物以类聚)
  2. 设置宽高无效,水平方向的padding和margin属性可以设置,但是垂直方向上的无效。
  3. 默认宽度是他自身内容的宽度。
  4. 行内元素只能容纳其他行内元素或者文本。

特殊:a比较特殊,可以放块级元素,但是链接里面不能再放链接。

/*行内元素span*/
span{
    width:200px;        /*宽度设置无效*/
    height: 100px;      /*高度也无效*/
    border:1px solid red;
}

下面是Html样式

<span>行内元素1</span>
<span>行内元素2</span>
<span>行内元素3</span>
<span>我是行内元素行内元素行内元素4</span>

效果图见文末

五、行内块元素(inline-block)

普遍的规则里总有那么几个不一样的,在行内元素中就有那么几个特殊标签,比如

<img>/<input>/<td>
,可以给他们设置宽高、对齐属性,我们把这样特殊的一类标签称为行内块元素。行内块元素综合了块元素和行内元素的不同特点。

行内块元素的特点:

  1. 和相邻行内元素在同一行,但是之间会有空白缝隙。
  2. 默认宽度是他本身内容的宽度。
  3. 宽度、高度、行高、外边距以及内边距都可以手动设置。
    样式:
/*行内块元素input*/
input{
    width: 200px;      /*宽高均有效*/
    height: 30px;
}

结构:

<input type="text" value="行内块元素1"> 
<input type="text" value="行内块元素行内块元素2行内块元素">

综合效果图如下:

六、标签显示模式转换(display)

既然标签有不同的显示模式,就会有相应的转换办法以应对各种需要。

display正是我们想要的。

块元素——>行内元素 : display:inline;

行内元素——>块: display:block;

块、行内元素——>行内块: display: inline-block;

总结

总结完他们之间的特点更加清晰,记得更牢,首先在以后遇到当给一个元素设置的宽高无效的时候这就是一个原因,使用display即可解决。

本文转载于:猿2048⇛https://www.mk2048.com/blog/blog.php?id=iikihkj&title=行内元素和块元素以及行内块元素的特点

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

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

相关文章

软件测试的功能测试和性能测试,大型软件的功能测试流程及性能测试流程

大型软件具有涉及子模块繁多、建设过程复杂、功能全面、性能具有较高要求的特点。依据ISO/IEC 9126软件产品评估标准&#xff0c;需要对软件的功能性、可靠性、可用性、效率、可维护性、可移植性等方面进行评估。因此&#xff0c;需要有一种方法能够对大型软件进行测试&#xf…

vue 分模块打包 脚手架_Vue面试官最爱的底层源码问题,你可以这样回答!

最近看到身边很多人都在投简历&#xff0c;有因为企业裁员的&#xff0c;有因为自己想跳槽的&#xff0c;原因不一&#xff0c;但是最终大家都会需要接触到面试这个事情。但是很多人对待面试不够认真&#xff0c;只会等待结果&#xff0c;不去努力。所以这边想整理一些懒人面试…

re.containerbase.startinternal 子容器启动失败_Python项目容器化实践(二) Docker Machine和Docker Swarm...

前言这篇文章介绍Docker生态中的常被提到的Engine、Machine和Swarm&#xff0c;大家以了解为主&#xff0c;工作需要再深入。EngineDocker Engine其实就是我们常说的「Docker」&#xff0c;它是一个C/S模型(Client/Server)的应用&#xff0c;包含如下组件:Daemon。守护进程&…

基于设备树的TQ2440的中断(2)

下面以按键中断为例看看基于设备数的中断的用法&#xff1a; 设备树&#xff1a; tq2440_key {compatible "tq2440,key";interrupt-parent <&gpf>;interrupts <0 IRQ_TYPE_EDGE_FALLING>, <1 IRQ_TYPE_EDGE_FALLING>;key_3 <&gpf 2…

计算机里有个不能进入的磁盘分区,新电脑只有一个分区怎么办? 教你们如何不进pe给硬盘创建新分区!...

很多朋友新电脑刚买回来打开发现明明自己机械硬盘1T或者1T机械加128G固态&#xff0c;但是却只有一个或者两个分区&#xff0c;但是又不会分区现在教大家如何不用老毛桃大白菜之类的进pe系统里面就能直接创建新分区1 WinR输入diskmgmt.msc2进入磁盘管理可以查看本机的C盘与E盘的…

OSGi中的权限

在上一篇文章中 &#xff0c;我们介绍了为Java应用程序实现沙箱的方法&#xff0c;在其中我们可以安全地运行移动代码 。 这篇文章探讨了如何在OSGi环境中执行相同的操作。 OSGi OSGi规范 为Java定义了一个动态模块系统 。 因此&#xff0c;它是实施那种可以使您的应用程序动…

HTTP简单教程

目录 HTTP简介 HTTP工作原理 HTTP消息结构 客户端请求消息服务器响应消息实例 HTTP请求方法HTTP响应头信息HTTP状态码 HTTP状态码分类HTTP状态码列表 HTTP content-type对照表 HTTP简介 HTTP协议是Hyper Text Transfer Protocol&#xff08;超文本传输协议&#xff09;的缩写&…

Reversed-Z详解

在3D渲染管线中&#xff0c;Z这个家伙几乎无处不在&#xff0c;如Z-Buffer&#xff0c;Early-Z&#xff0c;Z-Cull&#xff0c;Z-Test&#xff0c;Z-Write等等&#xff0c;稍有接触图形学的人都会对这些术语有所耳闻。 那么Z到底是什么呢&#xff1f;首先Z当然可以是任意坐标系…

pyqt开发的程序模板_小程序定制开发和模板开发要多少钱?有什么区别?

到现在&#xff0c;小程序开发已经有了1年多的历史&#xff0c;已经达到百万数量级。无论是小程序商城还是小程序游戏&#xff0c;其开发方式不外乎两种&#xff0c;一种是定制开发&#xff0c;另一种是模板开发。对于很多初次接触小程序的客户来说&#xff0c;还不知道小程序的…

html 三列布局(两列自适应,一列固定宽度)

不做过多解释&#xff1a;主要是记录一个完整的布局样式&#xff0c;实现页面大致三列其中左右两列是自适应宽度&#xff0c;中间固定宽度效果。 不多少代码奉上&#xff1a; CSS样式代码&#xff1a; /*********************公共标签样式********************//************…

单曲循环 翻译_歌单 | 单曲循环amp;热评

December2020/12/ 写在前面的话 /本来打算在跨年的时候才更文&#xff0c;但是吧又觉得空出这最后一个月有点苍白&#xff0c;然后最近一直夜半网抑云(敏感ing)就想到可以做一期分享歌单的推文&#xff0c;分享一些最近听得频繁的歌曲(还不是刷抖音刷出来的)。《暧昧》// 王菲徘…

休息使用Jersey –包含JAXB,异常处理和客户端程序的完整教程

最近&#xff0c;我开始使用Jersey API开发一个Restful Web服务项目。 在线提供了一些教程&#xff0c;但是我遇到了异常处理方面的一些问题&#xff0c;而且在使用JaxB和提供异常处理方法的完整项目中找不到任何地方。 因此&#xff0c;一旦我能够使用带有异常处理和客户端程序…

【转】Java方向如何准备BAT技术面试答案(汇总版)

原文地址&#xff1a;http://www.jianshu.com/p/1f1d3193d9e3 这个主题的内容之前分三个篇幅分享过&#xff0c;导致网络上传播的比较分散&#xff0c;所以本篇做了一个汇总&#xff0c;同时对部分内容及答案做了修改&#xff0c;欢迎朋友们吐槽、转发。因为篇幅长度和时间的原…

numpy维度交换_“lazy”的transpose()函数——从numpy 数组的内存布局讲起

1 数组的两种内存布局方式行优先与列优先首先我们回顾一下&#xff0c;矩阵数据在内存中的两种布局方式&#xff1a;行优先&#xff08;row-major&#xff09;&#xff1a;以行为优先单位&#xff0c;在内存中逐行存储/读取&#xff1b;对于多维&#xff0c;意味着当线性扫描内…

云耀服务器切换系统,【计算】云耀服务器-常见操作汇总指南

通过上期的介绍&#xff0c;相信大家对于云耀云服务器的基本知识有了一个了解。云耀云服务器是一个具备独立、完整的操作系统和网络功能&#xff0c;可快速搭建简单应用的新一代云服务器。接下来&#xff0c;本期为大家带来关于云耀云服务器使用中的一些简单方法和小技巧。1.云…

机器学习应该准备哪些数学预备知识?

转 https://www.zhihu.com/question/36324957 https://www.zhihu.com/question/36324957/answer/139408269 机器学习应该准备哪些数学预备知识&#xff1f; 数据分析师&#xff0c;工作中经常使用机器学习模型&#xff0c;但是以调库为主。 自己一直也在研究算法&#xff0c;也…

react usecontext_Vue3原理实战运用,我用40行代码把他装进了React做状态管理

前言vue-next是Vue3的源码仓库&#xff0c;Vue3采用lerna做package的划分&#xff0c;而响应式能力vue/reactivity被划分到了单独的一个package中。如果我们想把它集成到React中&#xff0c;可行吗&#xff1f;来试一试吧。使用示例话不多说&#xff0c;先看看怎么用的解解馋吧…

css的三个特性 背景透明设置

关于行内元素&#xff08;补充一点&#xff09; 行内元素只能容纳文本或其他行内元素。&#xff08;a特殊a里面可以放块级元素&#xff09; 例子&#xff1a; 关于行高tip: 选择器的嵌套层级不应大于3级&#xff0c;位置靠后的限定条件应尽可能的精确。 属性定义必须另起一行…

ccs安装多版本编译器离线_大数据分析:学习工具JDK,在线安装指南

hadoop是使用Java语言开发的并且Hadoop运行需要有Java环境的支持&#xff0c;因此在安装hadoop之前需要安装Java开发环境即JDK(Java Development Kit)。安装前首先向大家介绍以一下本文会用到的几个词&#xff1a;JAVA_HOME:一是为了方便引用&#xff0c;比如&#xff0c;JDK安…

asp.net尚未在web服务器上注册_最新版Web服务器项目详解 00 项目概述

点 击 关 注 上 方&#xff02;两猿社&#xff02;设 为&#xff02;置 顶 或 星 标&#xff02;&#xff0c;干 货 第 一 时 间 送 达。互 联 网 猿 | 两 猿 社TineyWebServerLinux下C轻量级Web服务器&#xff0c;助力初学者快速实践网络编程&#xff0c;搭建属于自己的服务器…